Improve user experience with dozens of new animation options in your editor. Use them to grab attention, trigger interest and direct user interactions.

Animate In, Animate Out

You can now reverse the direction of the scroll triggered animation to control whether the animation eases in or out. Animations include:

• Fade in / Fade out
• Slide in / Slide out
• Bounce in / Bounce out 
• Rotate in / Rotate out 
• Roll in / Roll out 
• Zoom in / Zoom out 
• Flip in / Flip out 

Here’s how to create fresh interactions between two elements, using both in and out scroll animation:

1. Select the left column and apply scroll animation to it. 
2. Set the animation to roll in from the left.
3. Set animation to end on 75% from the top of the screen view.
4. Select the right column and apply scroll animation to it.
5. Set the animation to roll out to the right.
6. Set the animation to start at 75% from the bottom of the screen.
   

Pause and Unpause Animations

Use the pause button on the left side panel to pause animations that are designed to disappear off the screen, so they stay visible while you edit. 

Note: The pause animation is only relevant when editing, which means your live site and preview will still show the animations.

In addition to the new scroll effects, below you’ll find new entrance triggered animations. Use them to draw attention to elements such as CTA's or social icons.

• Zoom 
• Flip 
• Flash
• Pulse
• Rubber band
• Shake
• Swing
• Tada
• Wobble

Where to find animations



Access the Animation controller in the design editor of any widget and element that allows for animations.