Thank you! Your submission has been received!
Oops! Something went wrong while submitting the form
Triggers and animations make up the two primary aspects of any interaction: a trigger is what starts or continues an animation.
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.
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:
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:
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.
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.
To trigger an animation on specific devices, unselect the devices on which you don’t want the animation to occur.
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
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:
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:
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:
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.
After creating an action, you can choose whether this action affects:
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.
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.
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.
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.
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.
