Oops! Something went wrong while submitting the form
Triggers and animations
The UI in this lesson may seem different if you've enables the Style Panel Beta! This content will be updated soon!
This video features an old UI. Updated version coming soon!
This video features an old UI. Updated version coming soon!
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:
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:
Select the element (section, button, div block, etc.) you’re setting up as the trigger
Press the + to select the trigger type
The element triggers are:
Mouse click (tap)
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
element (or multiple elements) on the canvas. In other words, an element serving as the trigger
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.
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:
Mouse move in viewport (continuous)
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
, are continuous—they’re continuously following the mouse movement or scroll position to affect the animation.
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.
To set up an animation based on the trigger you just created, open the
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 ) 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:
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.
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:
Replace the element the action affects
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.