Triggers & Animations – Webflow interactions and animations tutorial


In this lesson, we’ll cover the basics when
it comes to using triggers to execute animations. This is a quick overview, and we’ll do the
two major parts of the Interactions panel: triggers and the animation timeline. And in terms of triggers, there are two types
(two categories): We have element triggers, which trigger an
animation when we interact with an element (like hovering over or clicking on an element). And we have page triggers, which trigger an
animation when there’s a change in the page state (like when the page is loaded). When we add a trigger in the Interactions
panel, we can then specify exactly what we want to happen. But it’s worth saying here that triggers
don’t always have to apply to the element that’s serving as the trigger. If we have Element A? We can have a mouse click trigger — when
we click on Element A, Element B spins around. So. An element that serves as a trigger doesn’t
necessarily have to animate itself. As Shakespeare so brilliantly put it: “Triggers
doth affect other stuff, too.” Now we’ve created separate content spanning
all sorts of practical applications for these — element triggers, page triggers. And in that content, we’ll cover the ways
to add and configure each of those interactions from scratch. But for now, let’s move from trigger types
to the timeline. When we scroll down on this example we already
built (when the page is scrolling), the position of this text obviously changes. The trigger (what causes the animation) — that
trigger — is actually the page itself scrolling. Let’s dig in by clicking that trigger. All it’s saying is: when we scroll, play
a scroll animation. Now when we say animation — we don’t always
mean a timed animation (something that follows milliseconds or seconds; linear animation). We’ll click in here to look, and we’ll
simply open up our scroll animation. On our animation timeline (in this example
at least) we don’t see seconds. We see 0% on the top and 100% on the bottom. In this case, 0% is when we’re at the top
of the page, and 100% is when we’ve scrolled down to the bottom of the page. If we hover over the 0% indication, we’ll
see that all four of these points are at 0%. Same thing at 100%. So when we’re at 0%, there are two keyframes
(or “actions”) set for text background, and we have two more set for text foreground. This animation is simply achieved by setting
our starting points up here, and our ending points down here. At 0%, this element should basically show
up where it is. Same thing on the text foreground. Move 0 pixels left or right, and make sure
the opacity is at 100%. That’s what’s happening at the top of
the page. That’s our first set of actions. Our starting keyframes. What about at 100 (the bottom of the page)? Well this is where it gets fun. We’ve told the text background to move left
900 pixels. And we’ve told the text foreground to move
900 pixels to the right. And we’ve set the opacity on both of these
to 0%. So if we switch on Live Preview, we can see
— as we’re scrolling down the page — that our text elements are moving laterally, and
the opacity is dropping. Well, it’s technically dropping, but because
this animation is looking at the whole page, the opacity doesn’t hit zero until we’ve
scrolled down to the bottom. So it’s happening, but we can’t see it
that well. We can click and drag any of these points
around in the timeline. So now opacity should drop to 0% much sooner. Scroll down, and we can see it works as expected. Let’s do the same thing with the text foreground
opacity. Move it to the same spot. And if we change our mind? What if we want to select multiple actions
(multiple points or keyframes on our timeline)? Two ways: we can use shift to select any two
actions (and anything in between), or we can use the COMMAND key on Mac or CONTROL key
on Windows to select multiple, non-consecutive points on our timeline. In this case, we’ll select both of these
points for opacity, and click and drag anywhere on our timeline. The points — these actions — are moving
together now. If we go ahead and preview this? We can see our scroll animation is being affected
by where we are on the page. Also: if we’re just starting, or even if
we already built an animation like we see here, we can add other keyframes (other actions)
from the dropdown. Or, we can insert right in the timeline. Just click, and we can add actions in place. Right from the dropdown. And that…is the animation timeline. Like we said before, we have a ton of content
for interactions — all sorts of triggers and animations. But here we’ve covered the basics when it
comes to the two primary ways we work with interactions: creating triggers, and animating
on the timeline.

3 Comments

Add a Comment

Your email address will not be published. Required fields are marked *