Quick effects overview

With quick effects, you can add more than 20 prebuilt entrance, exit, and emphasis animations to elements on click, hover, and scroll.

In this lesson:

1. Slide animation
2. Grow animation
3. Rubber band animation

Slide animation

1. With any of your items selected, click into the Interactions panel
2. Click the plus sign next to Element Trigger
3. Choose Scroll Into View from the dropdown menu
4. From the Action menu under When Scrolled Into View, choose Slide
5. From the dropdown menu, choose the slide direction (e.g., From Left)
6. Under Trigger settings, make sure this animation is applied to all elements with this class (e.g., Class: Checklist item)

Grow animation

1. With any of your items selected, click into the Interactions panel
2. Click the plus sign next to Element Trigger
3. Choose Scroll Into View from the dropdown menu
4. From the Action menu under When Scrolled Into View, choose Grow
5. Under Trigger settings, make sure this animation is applied to all elements with this class (e.g., Class: feature cell)

Rubber band animation

1. With any of your items selected, click into the Interactions panel
2. Click the plus sign next to Element Trigger
3. Choose Mouse Hover from the dropdown menu
4. From the Action menu under On Hover, choose Rubber Band
5. Under Trigger settings, make sure this animation is applied to all elements with this class (e.g., Class: Button and Dark Outline)

‍