Quick effects

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!
Quick effects

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)

Browser support

Can I Use ? Data on support for the feature across the major browsers from caniuse.com.

Was this helpful?
OR

Thanks for the feedback! If you can, please add additional feedback below.

Oops! Something went wrong while submitting the form

Thank you! Your feedback has been received!

Oops! Something went wrong while submitting the form