Triggers and animations

The Interactions Panel in the Designer allows you to build complex interactions using triggers and animations. A trigger—like clicking an element or scrolling down the page—can start or even continuously animate one or more elements on the page.

In this guide, we’ll cover triggers and animations as they relate to building interactions.

Types of triggers

The Interactions Panel is divided into two primary sections: element triggers and page triggers.

Let’s take a look at each type of trigger:

Element triggers

The top section of the Interactions Panel lets us add element triggers, which trigger an animation when we interact with an element—like hovering over or clicking.

There are two main steps to adding an element trigger:

1. Select the element (section, button, div block, etc.) you’re setting up as the trigger
2. Press the + to select the trigger type

The element triggers are:

• Mouse click (tap)
• Mouse hover
• Mouse move over element (continuous)
• Scroll into view
• While scrolling in view (continuous)

When choosing an element trigger, keep in mind that element triggers can be used to animate any element (or multiple elements) on the canvas. In other words, an element serving as the trigger doesn't have to animate itself—it can animate other elements, too.

Component triggers

You can also trigger custom animations when you interact with navbars, dropdowns, tabs, and sliders. These trigger types are hidden by default. You can access them once you select the corresponding element on the canvas:

• For navbar interactions - Select the main navbar element, then choose Navbar from the element trigger menu.
• For dropdown interactions - Select the main dropdown element, then choose Dropdown from the element trigger menu.
• For tab link interactions - Select the tab Link element inside of the tab menu element, then choose Tab from the element trigger menu.
• For slider interactions - Select a Slide element inside of the Mask element, then choose Slider from the element trigger menu.

Page triggers

The lower section of the Interactions Panel is where we can add page triggers, which trigger an animation when there's a change in the page state—like when the page is loaded.

Unlike an element trigger, adding a page trigger involves only one step: simply press the + to select the trigger type.

The page triggers are:

• Page load
• Mouse move in viewport (continuous)
• Page scrolled
• While page in scrolling (continuous)

Configuring a trigger

After we select the type of trigger we’re adding in the Interactions Panel, we can specify exactly what we want to happen. The options we have depend on the type of trigger used. For instance, a Mouse Hover has two triggers: On Hover and On Hover Out. Each trigger can start its own animation.

Other triggers, like Mouse Move over Element and While Scrolling in View, are continuous—they’re continuously following the mouse movement or scroll position to affect the animation. 

Trigger targets

By default, if you set a trigger on an element, the interaction occurs on all devices — and only when you interact with that specific element.

Triggering an animation on specific breakpoints

To trigger an animation on specific devices, unselect the devices on which you don’t want the animation to occur.

Triggering an animation on elements with the same class

If you want to trigger an animation on all elements with the same class, set just one interaction on one element and apply it to the class of that element. You can set this by simply changing the target of the trigger in the trigger settings and setting it to affect the class of the selected element.

See an example and read more: About reusing interactions

Setting up an animation

To set up an animation based on the trigger you just created,  open the action dropdown and either select a quick effect or choose the animation type under custom animation and press + to create a new animation:

Alternatively, if you’ve already created an animation for this type of trigger in your project, you can select it from the list:

The Animation Timeline

Whether you’re creating a new animation or editing an existing animation, the Animation Timeline is the interface in which you can use keyframes (or actions) to animate different elements.

In this example, we’ve created an animation based on the page scrolling. As we scroll down the page, the text at the top moves horizontally and decreases in opacity. As we can see below, the playhead (in green) shows the current position of the page.

While we can create timed animations based on a number of triggers (using milliseconds, seconds, etc.), our example uses percentages to indicate the current scroll position.

In this case, 0% indicates when we’re at the top of the page, and 100% indicates when we’ve scrolled down to the bottom of the page.

At 0%, we have four actions—two each for Text Background and Text Foreground. These actions simply set the position to 0px (no movement) and the opacity to 100% (fully opaque). Below, we can see our starting actions for the scroll animation:

At 100%, we have four more actions—each complementary to the actions we already configured above. In this case, each element is moved 900px in either direction, and the opacity is set to 0%. Let's take a look at our ending actions for the scroll animation:

Pro tip
Want to select multiple actions on our timeline? Two ways: (1) press and hold SHIFT to select any two actions (and anything in between), or use CMD on Mac or CNTRL on Windows to select multiple, non-consecutive points on our timeline.

As we can see below, at any time, we can add an action by pressing the + on the top-right of the Interactions Panel, or we can simply press + inside the timeline before, on, between, or after existing actions to add actions inline.

Action targets

By default, any action you add to your animation timeline will affect the selected element. However, you can change the target of an action in two ways:

1. Replace the element the action affects
2. Choose whether the action affects only the selected element, all elements with the same class, or the interaction trigger itself.

Replacing a target element

To replace the element the action affects, right-clicking the action in the animation timeline, choose change target, then, select a different element on the canvas.

Must know
Changing any settings within the animation timeline will affect all interactions that trigger this animation sequence.

Affecting individual element, class of the element, or the interaction trigger

After creating an action, you can choose whether this action affects:

• Only the Selected Element
• All elements with the same Class as the selected element
• The Interaction Trigger itself

Targeting the selected element

This is the default target of any animation action you create. 

Any action that is set to affect the selected element will always affect that specific element. So, when you reuse any animation with an action that affects the selected element, no matter what element triggers the interaction, the action will still affect this specific element.

Targeting a class

You can choose to target the class of the selected element instead. This option ensures that a specific animation action affects all elements with the same Class as the selected element.

You can also limit the affected elements to children, siblings, or parents of the interaction trigger.

Need to know
Make sure to apply a class to your element(s) before you create class-based animation. The “Class” option won't be available for actions applied to elements without a class.

Targeting all elements on a page with the same class

Let’s say you want a number of elements to move in the same pattern when the page loads.

You can assign the same class to all these elements. Then, use combo classes to change their initial position. This will allow you to apply the same action to the base class and have each element move in the same pattern starting from different positions.

Targeting only children, siblings, or parents 

You can choose to limit the classes that are affected by an action by specifying whether they are children, siblings, or parents of the trigger element.

Now, going back to the button example. You can use the class target to animate all button arrows when you hover over a button. However, here you’ll notice that hovering over one button will animate all button arrows within all buttons on that page. To limit the action to the button on which you hover, make sure to choose the only children with this class option under the affect menu.

You can use the only siblings with this class option in the same way when the element you want to animate is a sibling of your trigger element, such as a menu dropdown or a popup modal. You can similarly use the only parents with this class option when the element you want to animate is the parent of your trigger element.

Targeting the interaction trigger

The Interaction Trigger option allows you to create actions that affect only the interaction trigger. Reusing this animation in any other interaction will replace the action elements with the trigger element of the new interaction. This helps you quickly apply the same animation to any element without the need to create new animations.

The “Interaction Trigger” option is only available when the action is applied to the interaction trigger element. For the same reason, this option isn’t available in animations triggered by a Page trigger.

Resources

• See an example and read more about reusing interactions
• Learn about interpolation, easing, and smoothing
• Jump right into an interactions example