Quick effects

Use quick effects to add prebuilt entrance, exit, and emphasis animations to introduce basic motion and interactions to your project.

This video features an old UI. Updated version coming soon!
 
This video features an old UI. Updated version coming soon!

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)

Clone this project
Try Webflow — it's free

Production for this lesson

Directed by

-

Produced by

-

Written by

-

Article by

-

Edited by

-

Designs by

-

Need more help? Want to report a bug? Contact support
Have feedback on the feature? Submit feature feedback