Triggers & animations

 
new course
CSS grid landing page tutorial (36min)

Lesson info

Lesson info

How does one create an interaction? There are two pieces: triggers and animations. A trigger—like a click or a hover or a scroll—is what starts or continues an animation. In this lesson, we go into the two types of triggers, as well as an overview of the animation timeline.

Clone this projectDownload project assetsDownload lesson assets

Transcript

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.

Let’s start with triggers.

As we know, interactions are made up of triggers and animations. (A trigger triggers an animation.) 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. Or when we hover over Element 1, Elements 2, 3, and 4 begin facing Element 1 based on where the mouse happens to be hovering.

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.