Understanding Interactions and Events in Framer
Interactions and Events are part of the core experience in Framer, and learning how to combine them in creative ways will help you create truly amazing prototypes.
Framer is the most advanced prototyping tool. Design complex animations and interactive components—without writing a single line of code.
Creating complex flows and animations does require knowledge of what tools to use for the specific things you're trying to do. For example, animating a button between states in Framer is set up differently than you would if you want a modal to appear. Keep reading to learn the right tools for the job.
Understanding the differences between Interactions and Animations with their various event triggers, and how they all play nicely together, will allow you to prototype creative new ideas, in half the time.
Let's start with the basics. An interaction in Framer is the name given to the combination of a trigger, transition, and target. We'll dive a bit deeper into these concepts below, but knowing how they all work together will help you understand interactions in Framer.
If you want to navigate your prototype or connect different flows/screens together, you'll need to start by adding an interaction.
Framer makes it really easy to add new interactions to your project. You can take the prototyping connector from almost any element, drag the connector to a new screen, and click to create a new interaction.
Framer defaults to adding a Tap trigger, an instant transition, and the target as the screen you link to.
Let's take a look at these different options below.
|Tap||A trigger that fires as soon as a mouse or finger press ends on the element where the interaction is applied.|
|Tap Start||The Tap Start trigger is fired the moment your tap or click has been initiated. Opposed to the Tap interaction, which is fired only once you release.|
|Mouse Enter||A trigger that fires as soon as a mouse enters on top of the element where the interaction is applied.|
|Mouse Leave||A trigger that fires as soon as a mouse leaves the element where the interaction is applied.|
|Appear||A special trigger that allows you to automatically transition when the element appears. Can only be added to top level elements, like a screen, and is useful when paired with a delay.|
|Key & Gamepad||A special trigger that allows you to transition after a key is pressed. You can set up which keyboard key or game button from a controller is used in the transition editor. Can only be added to top level elements, like a screen.|
Appear, Key, and Gamepad triggers are special triggers that you're only able to add to a top level element, like a Screen.
In addition to adding a trigger, you're also able to add a delay, which will prevent the transition from happening until a set amount of time has passed.
You're able to set up as many transitions across your prototypes as you'd like, so double check the different triggers you set up. If you're running into any issues, you might have duplicate triggers set up, which might cause some unexpected transitions to occur.
A transition is the part that comes after the trigger is started. Framer comes with some default transitions, but also allows you to create custom ones through Magic Motion.
Some transitions allow you to further customize its behavior through configuration options.
|Instant||Instantly transition to the next screen.|
|Push||Transition to the next screen by pushing the current one off screen.||Transition: An easing curve used to transition to the next screen. Direction: The direction the incoming screen should come from.|
|Modal||Add a dismissible modal to the middle of your current screen. Dismiss by clicking outside the modal, or by transitioning to a new screen.||Transition: An easing curve used to transition to the next screen. Backdrop: The color of the backdrop as the modal appears.|
|Overlay||Add a dismissible overlay on top of your current screen. Dismiss by clicking outside the overlay, or by transitioning to a new screen.||Transition: An easing curve used to transition to the next screen. Direction: The direction the incoming screen should come from. Backdrop: The color of the backdrop as the modal appears.|
|Fade||Fade to the next screen.||Transition: An easing curve used to transition to the next screen.|
|Flip||Flip to the next screen.||Transition: An easing curve used to transition to the next screen. Direction: The direction the incoming screen should come from.|
|Magic Motion||Design custom animations of elements between screens.||Transition: An easing curve used to transition to the next screen.|
A target in Framer is the destination you want to transition to after the trigger is activated. You can only set one target per transition, but can easily set the target by clicking and dragging the prototyping connector from one element to a different screen.
If you want to edit the target at any point, you can do so by clicking into the transition set on an element in the upper right corner.
Interactions inside Smart Components
So far, we've taken a look at triggers, transitions, and targets for screen transitions on the canvas. Framer also allows you to encapsulate all of these things into reusable components, that all follow the same methods for setting up interactions.
You're able to add all of the same triggers to start your interaction as mentioned above, but the transition inside Smart Components is Magic Motion by default. This is to allow you to focus on the custom animation you're trying to accomplish between component Variants.
You can also be explicit about where you want to transition to using the once option, and will have the ability to specify a target.
Adding transitions to your components will allow you to see the animations on a component level or on a singular screen in your design. If we want our component to navigate to an entire new screen in addition to animating between states, there’s one additional concept we need to grasp.
Triggering Events from Smart Components
Smart Components in Framer are the building blocks for your interactive prototypes, and allow you to customize them as much as you need.
You can build a Smart Component for a button, or for an entire navigation bar, but these two components contain different events so you use them across your prototypes.
A button component would most likely only have one interaction on the entire component, like a click interaction.
But a navigation component would need to have multiple interactions inside of it, one for each of the menu items you have.
This is where an event variables comes in.
Since your component can have multiple interaction targets (like the different menu items in a navigation component), you're able to attach an event variable to any of the parts you want to interact with in your Smart Component. For each event variable you set up, you'll see it appear on the main canvas as an available trigger for your component.
For your smart components, you'll normally need to set up both an Interaction and an Event Variable.
Magic Motion in Framer is the default transition used inside the Smart Components you build, allowing you to smoothly animate your component between different states.
With any Smart Component you create with multiple Variants, you'll also gain a Variant Selector that allows you to choose which variant is currently shown on the canvas.
If you want your component to transition states across different screens, all you need to do is place different variants on each screen, add a Magic Motion transition between to two, and Framer will animate your component between the two!