Lesson info

With quick effects, you can add more than 20 prebuilt entrance, exit, and emphasis animations to elements on click, hover, and scroll into view to introduce basic motion and interactions to your project.

Assets

Want to follow along with this lesson? Fortunately, we created a zip file which contains all the assets used in the project, and we've included that link 

right here
.

Transcript

As we already know, interactions are built using triggers and animations. When this happens...then that happens. Quick effects like grow, Jello, shrink, drop, pop, Jello, rubber band, jiggle, Jello. Honestly? We're really big fans of Jello. But quick effects like these make it exceedingly quick to add beautiful interactions. Hence the name "quick effects."

And we'll demonstrate three today. We'll do a slide animation which affects each of these items as they scroll into view. We'll do a grow animation, which affects these as they scroll into view. And we'll end by adding a rubber band animation which affects these buttons on hover.

Let's do the slide animation. Three items here — they all have the same class applied. (Checklist item.) With any of them selected, we'll go over to interactions. Why? Because we're going to create an element trigger. When the element scrolls into view (when any element that has this class applied scrolls into view) we'll have it slide in. Now there are a number of options we have here. And we can preview each and every one if we'd like. But for now, let's slide in from the left. And we'll just make sure we trigger this animation on all elements that have the class applied.

If we scroll up and then go into preview mode? It works exactly as we'd expect. Now, we're only triggering when it scrolls into view, we could add another one where it scrolls out of view. But notice how each element is sliding into view based on when it enters the viewport.

That's the slide animation. Same concept for this one. Each of these three items (these elements) has the same class applied. In this case, they're all occupying the same vertical scroll position, so when it scrolls into view, we'll want to add our animation (grow), which we can preview right here. We can preview this as many times as we want. Like before, let's apply it to all elements of the same class. And we'll scroll up — then we'll preview — and when we scroll down, it behaves exactly as expected. All three grow into view.

Finally, let's add the rubber band animation which affects these buttons. Same deal with this one. Each button has the same combo class applied. We'll go over to interactions, so we can create an interaction, which, upon hover (when we hover over the button), we wanna apply a rubber band effect. Now, if we leave it as-is, and we go to preview mode? Hovering over this particular element (this button) animates the button. Pretty simple. But the others don't quite work. And by "don't quite work," we mean they just don't work at all. But if we go back, as we've done in the other two examples, and make sure we apply this to all elements that have that same class, and we go back to Preview, all these buttons function the same way.

So. Quick effects. A simple, quick way to add interactions (these animated effects) to elements and classes in any project.

Related tutorial

Quick effects

2:51