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.
