Causes and motion

How to prompt an animation on specific breakpoints

If you wish to initiate an animation on certain breakpoints, you can verify the breakpoints where you desire the animation to take place. By default, an animation triggers on all breakpoints (Desktop and higher, tablet, phone landscape, and phone portrait).

For instance, this can be beneficial in case you want mouse click interactions to happen exclusively on Desktop and above breakpoints. In that scenario, visitors will be capable of activating the interaction with their mouse.

How to initiate an animation on all elements with an identical class

If you opt to commence an animation on all elements sharing the same class, you can implement an interaction on one element with that class, subsequently apply it to the entire class.

To establish an animation on all elements with that class:

1. Set an animation on an element
2. Proceed to Trigger settings and pick Class
3. Opt for the class you intend to apply the animation on from the Class dropdown

Discover more about reusing interactions. 

Additional animation configurations

Scroll offset

For numerous page scrolling triggers (e.g., “Scroll into view,” “While scrolling in view (continuous),” etc.), you can opt to set an offset. This postpones the initiation of the interaction until it reaches a certain scroll percentage of the page — the greater your scroll offset, the longer a visitor scrolls before the interaction commences.

Delay

You have the ability to define an animation delay, causing the animation to take place only after the assigned time delay has elapsed.

Smoothing

You can also modify the smoothing of an animation. Smoothing dictates the pace at which the animation responds to mouse movement.

How to configure an animation

To configure an animation based on the trigger you’ve just set up, you can generate a custom animation or select a pre-existing animation (e.g., fade, shrink, jello, etc.).

How to set a pre-existing animation

Pre-existing animations encompass the appear & disappear and emphasis animations that come pre-configured in the Designer. These can be chosen as a speedier alternative to building each component of an animation individually.

Note: Pre-existing animations can solely be established for element triggers — not page triggers.

To configure a pre-existing animation:

1. Initiate an Element trigger (e.g., mouse hover, scroll into view, etc.)
2. Unfold the Action dropdown from the beginning action segment (e.g., if you chose the mouse hover element trigger, you’d unveil the Action dropdown from the On hover segment)
3. Opt for an action from either the Appear & disappear category or the Emphasis category

Subsequently, you can customize the direction and delay for Appear & disappear animations, or the direction for Emphasis animations.

How to configure a custom animation

To configure a custom animation:

1. Establish an Element trigger (e.g., mouse hover, scroll into view, etc.) or Page trigger (e.g., Page load, page scrolled, etc.)
2. Unveil the Action dropdown from the initial action section (e.g., if you chose the mouse hover element trigger, you’d expose the Action dropdown from the On hover segment)
3. Click “Initiate an animation” beneath Custom animation
4. Click the “plus” adjacent to Timed animations
5. Name your animation atop the Interactions panel
6. Press the “plus” on the right of Actions
7. Opt for a Global variables, Transform, Style, or Miscellaneous animation from the dropdown

Following this, you’ll fine-tune the timing of the animation in the animation timeline.

How to operate the animation timeline

Whether you’re creating a new animation or amending an existing animation, the animation timeline is where you can employ keyframes to animate various elements.

To append an action to the animation timeline, initially navigate to the animation timeline. Subsequently, you can add an action in one of two methods:

• Tap the “plus” icon atop the timeline
• Click the “plus” icon within the timeline prior to, on, amid, or post existing actions to insert actions inline

Illustration

For example, let’s construct an animation for the “While page is scrolling” page trigger. As you scroll down the page, you can make your hero section text move horizontally and decrease in opacity. The green playhead in the animation timeline indicates the current position of the page (0% – 100%).

Timed animations frequently utilize other triggers (milliseconds, seconds, etc.) but this instance employs percentages to signify the page’s present scroll position. Here, 0% denotes a scroll position at the top of the page, and 100% denotes a scroll position at the bottom of the page. 

Now, you can integrate various actions at different points.on the page. For example, you could include 4 procedures at 0% scroll position:

• Text background — Shift 0px
• Text background — Transparency 100% (fullyvisible)
• Text foreground — Shift 0px
• Text foreground — Transparency 100%

These steps position the Text background and text foreground at 0px (no movement) and set their transparency to 100% (fully visible). When a visitor reaches the top of the page, the text background and foreground will be completely visible and remain in their original places.

You can also introduce 4 methods at 100% scroll position:

• Text background — Shift 900px
• Text background — Transparency 0% (completely see-through)
• Text foreground — Shift 900px
• Text foreground — Transparency 0%

In this instance, each element is shifted by 900px in any direction, and the transparency is set to 0%. Let’s review our final actions for the scrolling animation:

These steps adjust the position of the Text background and text foreground to 900px (shifting 900px either way) and set their transparency to 0% (fully see-through). When a visitor reaches the bottom of the page, the text background and foreground will be completely transparent and shifted 900px from their original positions to the right or left of the page.

Pro tip: Two techniques exist for selecting multiple actions on the animation timeline. To pick multiple consecutive actions, press and hold Shift and select those actions. To select multiple, non-consecutive actions, press Command (on Mac) or Control (on Windows) and choose the actions.

Regarding action targets

By default, each action you add to your animation timeline influences the chosen element. Yet, you can modify the focus of an action in one of two ways:

• Substitute the target element affected by the action
• Determine whether the action influences solely the chosen element, all elements sharing the same category, or the interaction trigger itself

Modifying the target element

To modify the element impacted by an action:

1. Right-click an action in the animation timeline
2. Click Change target
3. Select a different element on the canvas to apply the action to

Important: Any modifications within the animation timeline will affect all interactions that activate the animation sequence.

Determining how the action affects the single element, category of the element, or the interaction trigger

Once you create an action, you can select whether this action affects:

• Only the chosen element
• All elements sharing the same category as the chosen element
• The interaction trigger itself

Targeting solely the chosen element

The chosen element is the standard target for any animation action you form. Any action set to influence the chosen element will steadily impact that precise element. As a result, if you reutilize an animation with an action influencing the chosen element, the action will impact that element consistently, irrespective of the triggering element.

Targeting all elements with the same category as the chosen element

You may also prefer to target the category of the chosen element. This will cause the animation action to influence all elements sharing the identical category as the chosen element.

This choice proves helpful when you want several elements to shift in parallel when the page loads. To accomplish this, assign the same category to all elements and use combo categories to shift them to different positions on the page. Subsequently, you can utilize the same animation action on the base category, allowing each element to shift similarly, but from distinct initial positions.

You can also confine the affected elements to only children, siblings, or parents sharing the same category as the interaction trigger.

Targeting children, siblings, or parents sharing the same category as the chosen element

You can define which classes are affected by an action by specifying whether they are children, siblings, or parents of the trigger element.

This option can prove useful, like when you desire all arrows within button elements sharing the same category to animate on hover. If you integrate the animation action to all elements with the same category, on hovering over 1 button, you’ll observe that all arrows within every button on that page animate. To restrict the animation action to the button being hovered over at that moment, access the Affect menu and opt for “Category.” Subsequently, select the Category from the dropdown and opt for “Only children with this category.”

The “Only siblings with this class” choice serves well when the element you aim to animate is a sibling of your trigger element, like a menu dropdown or a popup modal. Equally, you can utilize the “Only parents with this category” alternative when the element subjected to animation is the parent of your trigger element.

Note: Ensure you attribute a category to your element(s) before forming class-based animation. The “category” choice won’tbe ready for actions applied to elements that do not contain a specific class.

Strategies for targeting the Trigger of Interaction

You may also establish operations that uniquely impact the Trigger of Interaction. Subsequently, for any subsequent interaction where you reuse the animation, the animation will substitute the previous target element(s) with the trigger element of the new interaction. This facilitates the swift application of the same animation to any element without necessitating the creation of fresh animations.

Comment: The option for the “Trigger of Interaction” is solely accessible when an operation is executed on the trigger element of the interaction. Consequently, this choice is not offered in animations prompted by a Page trigger.

Modifying an active animation

You can modify an existing animation by navigating to the Interactions panel and selecting the animation to unveil its configurations. Consequently, hover over the title of the animation and tap on the settings icon “cog” situated to the right of the animation’s title. This action will disclose the animation timeline for that specific animation.

Alternative sources

• Expand your knowledge about adopting interactions
• Delve into interpolation, easing, and smoothing
• Learn the process for setting a continual animation that shifts and fades elements horizontally as you scroll

Eliminating and discarding unutilized triggers and animations

Procedure for erasing triggers and animations

From the Interactions panel, it is possible to eliminate triggers or animations. By doing so, the trigger or animation will no longer be linked to its specific target element or page action. To eradicate a trigger or animation:

1. Proceed to the Interactions panel
2. Hover over the animation or trigger you wish to delete
3. Select the “trash” icon adjacent to the trigger name

Remark: When you delete a trigger from the Interactions panel, the animation, which was previously connected to it, is not deleted. It merely detaches the animation from that particular trigger. Subsequently, you can still avail the animation when configuring new triggers.

Process for eliminating triggers and animations from your website

If an animation is removed, or a trigger lacking a connected animation is deleted from the Interactions panel, it does not entirely eradicate the trigger or animation from your site. This is due to the possibility of reusing previously created animations on alternative element or page triggers. Nonetheless, you might consider cleaning up unutilized triggers or animations for enhanced site optimization and improved performance. 

While clearing unutilized interactions, you may not have the capacity to select which triggers are eliminated, but you can decide which animations to retain or discard. All unused triggers get erased during the cleanup process of unutilized interactions.

Tip: The option to fully remove (clean up) an animation is solely possible when the animation is not linked to an element or page trigger. Initially, remove the animation from any element or page triggers in the Interaction panel, then proceed to eliminate the animation from your website.

To wipe out unutilized triggers and animations:

1. Access the Interactions panel
2. Press Clean up located at the top of the panel
3. Determine the animations you intend to discard/retain
4. Click on Delete