Understanding Interactions and Events in Framer

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.

Interactions

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.

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.

Try in Framer

Transitions

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.

Targets

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.

Try in Framer

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.

Going Further

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!