Quick effects overview

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

We’re transitioning to a new UI, and are in the process of updating our Webflow University content.

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)

Table of contents

Continue learning

Hmm…we couldn’t find any results for “search query”. Try a different search term or check out our community forum.

Search the forumReset the filter
Load more

Filter

Reset
Thank you! Your submission has been received!
Oops! Something went wrong while submitting the form.
Topics
Thank you! Your submission has been received!
Oops! Something went wrong while submitting the form.
Back to top