This is an animation we’ll build in Adobe
After Effects, and we’ll link the whole thing up to a web page. When someone scrolls through the page, the
animation will follow their scroll position. Now, we’re going to cover this from the
very beginning, so if you’ve never used After Effects before, we’ll cover everything
you need to know to get started. And six things, we’ll set up our composition
in After Effects, we’ll build the animation, we’ll export it, we’ll bring it into Webflow
and put it inside our layout, we’ll configure a trigger, this is what tracks the scroll
position on the page, and finally we’ll link our animation to that trigger. Let’s get started in After Effects, and
to open After Effects open After Effects. That’s step one. Except it isn't. Let’s continue. And something to consider when setting up
a composition in After Effects, this is the starting point, but you can always make changes
later. You can change dimensions, you can change
timing, frame rate, but for this example, let’s choose 1,000 by 1,000. Frame rate doesn’t matter too much for a
continuous animation like this, let’s choose 60 so we can approximate what it might look
like on a common browser. Same deal with duration, not critical, we
can use anything here. And finally, let’s set the background color
to black. When we hit okay, everything’s ready to
go. If we want to go back and make a change, we
can right-click on our composition, and access the settings. Let’s change our background color to white
since this more closely matches the design we’re going for. That’s step one. Step two is where things get really interesting. Let’s start by creating the outer orbital
path for this animation. Now, we’re going to build this in a few
different stages. We’re not going to animate until we’ve
set up everything in our composition. So, to do that, let’s first adjust our zoom. We’re going to fit up to 200 percent, and
down here, where the layers usually appear, we’re going to right-click, go to New, Shape
Layer. And from this, we can create any shape we
want. What happens if we preview right now? If we hit play? Nothing. We can’t see anything because we haven’t
defined what that shape is. So let’s open up using this arrow, and we’ll
go to Add, from Add, we’ll select Ellipse. And now we have an ellipse shape, but if we
hit play again, nothing. We have to define either a stroke or a fill
or something else for this path. So let’s go to Add for a second time, let’s
do a Stroke, and if we go to preview now, still absolutely nothing. Except there is, we just can’t see it, that’s
because the stroke color is white. Let’s change the stroke color to a light
grey. And if we hit play, we can see exactly what’s
going on. Okay, let’s make our stroke one pixel so
it’s really thin. And we’ll go to the ellipse path, we can
put the arrow next to that, and adjust the size. This is going to be our outer orbital path,
for our outermost planet. So we’re going to bring this almost all
the way to the edge. That’s our outer orbital path, and if we
click on the layer here and hit return we can call it Orbital Path. This way we can keep things organized. And also, for a stylized look, let’s add
one more thing. Let’s add a fill. And we’ll choose the fill color here, make
it black, and we can actually open up fill here to affect opacity. And we’ll drop the opacity all the way down
to maybe 3 percent. That looks pretty good. That’s our first orbital path. So now that we’ve created one we can just
copy and paste. So we’ll paste the second one, and all we’ll
do is go into Contents here, into Ellipse Path, and adjust its size. Bring this one in a little bit. Now, why are we adjusting size on the ellipse
path itself instead of going into Transform and affecting something like scale? Well the reason we’re doing that is because
we don’t want the stroke, the stroke we put around the ellipse, if we transformed,
if we scaled everything down, that stroke which is one pixel would also scale down as
well. We want a consistent stroke, so we’re using
the Ellipse Path Size property here. Let’s actually make that a little bit smaller,
so our outer orbit, and the next orbit are a little bit further spaced apart. That looks pretty good. So let’s copy and paste again, and we’ll
go in here, just going into Contents, Ellipse Path, and adjusting the size. Same thing for the next planet, just copy
and paste, bring this one in a little bit more. Contents, Ellipse Path, Size. And, we’ll speed this part up now in post
so you don’t have to sit through every manual adjustment. And, that’s it. Seven orbital paths, that means we’ll have
seven different planets. Let’s command A or control A on PC to select
all, and then we can just hit the arrow here to collapse all of them. We have seven orbital paths, each of them
representing the path a planet will take as it rotates around that star. Speaking of the star, let’s create a star. And rather than doing this from scratch, let’s
use orbital path seven as a template. Copy and paste it, open up, and we’ll make
some changes here. So for the contents, let’s do what we’ve
done with the others and make this a lot smaller. This will be the star itself. We’ll put that right at the center. And we’ll click on the label and hit return,
Star. And let’s zoom in so we can see what we’re
doing, let’s go into 800 percent. And we’ll use the same stroke color here,
but we want the fill to be a little bit different. In fact, we want the fill itself, let’s
go in and choose a color of white, we want the fill itself to have an opacity of 100
percent. So if we zoom out, you can see the star right
at the center. That looks pretty good. So that’s our star. Let’s collapse that, and we’ll use the
same type of design for our planets, but there’s a little bit of a difference with the planets. Let’s copy and paste. We’ll call this one, hit return, planet. And for our planet, we’re going to go into
Contents, and we’ll adjust two things for each planet. The first thing we’ll adjust is the size,
we don’t want it as large, so let’s make this one, let’s say 15. But we’ll also adjust it’s position, so
for now, let’s just move this position right here on top of the first orbital path. Let go. Let’s click out. That looks pretty good. We want it just balanced right on that orbital
path. Just copy and paste for the second planet,
let’s go in, Contents, and we’re going to randomize the size a little bit. Maybe this one will be 20, and update it’s
position to go right over here. Now that might be a little close to the third
orbital path, so let’s make it something like 18, click out, that looks pretty good. So copy and paste, planet three. Again we’re going to speed this up in post
so you don’t have to sit through each planet. And that’s about it for our seven planets. So now that everything’s placed as it needs
to be placed, let’s talk about anchor points. Now the reason we used position here inside
of the contents, is because the anchor point, which is indicated right here in the center,
that little crosshair, that anchor point is the point from which everything will rotate. So, if we adjust rotation, let’s start on
planet seven here, if we open up transform, and we adjust rotation, we’ll see that it
actually orbits, let’s actually adjust this to fit up to 200 percent, this orbits around
the star. So because the anchor point is the center,
that’s the point around which everything orbits. Now, if we were to move the entire layer,
let’s affect the position on the entire layer, let’s move it over here, you can
see the anchor point is changing position two. Now if we rotate with that moved anchor point,
that’s the new place around which everything orbits. Let’s command Z and undo a couple times
so we can get our anchor point back. That looks pretty good. Now notice how as we grab the playhead and
move right and left and right and left, nothing’s animating. We want to create keyframes for that to happen. And the way we can do that is going to the
first frame here, frame zero, we’re going to click on the stopwatch next to rotation. So that’s going to create our first keyframe,
you can see that keyframe right there, was automatically created, this still isn’t
animated yet, but we basically set that first point. That first keyframe is indicating that that
rotation is in 113 degrees. What happens if we move the playhead all the
way to the end to the last frame and we affect our rotation? Let’s crank that up to maybe 275 degrees. So if we do that, and then grab our playhead
and move left and right, we can see the planet is in orbit around that anchor point. So that looks pretty good for planet seven. We might want planet seven to orbit even more,
so if we go above 360, we can see right here where it says rotation, once we hit 360, it
actually changes to one revolution plus 0 degrees. Because, after 360 it’s done one full revolution
so this is now one full revolution plus 77 degrees and so on. Let’s edit right there, and take a look
at that outer planetary orbit. That looks pretty good. Okay, that’s planet seven. Let’s do planet six. We’ll go into transform, and we’ll affect
it’s starting rotation point and do we want it to start over here, and we’ll add our
first keyframe by clicking on the stopwatch, go to the end, and we’ll rotate. Test that out; looks pretty good. Now, you might not be able to see because
of the zoom level and the contrast, you might not be able to see each of these orbital paths
as we’re previewing them so it can help to keep the planet you’re working with selected,
or it could help to change our composition settings. We could just choose a different background
color for right now. Let’s change the background color to black,
let’s hit okay. Now we can see a little better what’s going
on. So if we click out, we can take a look at
our orbital paths, the planets orbiting around that star, that’s two planets. Now we’re going to speed up again and do
the other five. And that looks pretty good. We can keep tweaking if we’d like but let’s
hit space bar from the first frame to preview what the animation will look like. Okay, let’s change the background color
back. Go to Composition Settings, we’ll choose
white background because that’s the layout we’re eventually going to use as we integrate
it to the web page. Let’s go to the beginning, take a look there. And that looks pretty good. We can move forward from there. Now, After Effects, just like Photoshop, or
Cinema 4D, or DaVinci Resolve, these are all applications that have tons of options. There’s no right or wrong way to use them,
and that’s an important consideration. You may know of, or you may discover a totally
different way to build this, and that’s a beautiful thing. Okay, step three, we’ve built our animation,
let’s export it. Now, we’re using a plug-in called Bodymovin
to take our After Effects composition and turn it into a single JSON file. We can find that in Window, Extensions, Bodymovin. We have a separate video which shows how to
install the Bodymovin extension so check that out if you haven’t already. We’ll want to make sure our composition
is actually selected, and we should set a destination folder, this is where the export
is going to save the file. And when we’re done, press render. That’s it. That’s step three. Step four, let’s import that exported file
into Webflow. We have a side-by-side layout here we built
in a grid. And if you haven’t built a site in Webflow
before, we have tons of teaching resources, videos, articles, all of this is on Webflow
University and it’s all free. So check that out if you haven’t already. But we’ll simply drag our animation into
the left part of this grid. And, if we were to publish this site as is,
it’d actually work okay. It’s up there on the top, but it’s animating. And we’ll fix up the layout first, but then
we’ll make sure to tie this animation to our scroll position instead of just playing
automatically when the page loads. Okay. Out of preview mode. And to position this so it’s vertically
centered, we’re going to use a trick. We’ll use a div block, a div, which is just
a box. And we can drag the div block into our grid
right here. And once we do, we can put our Lottie animation,
the thing we exported from After Effects, right inside that div block. And if we preview now, it’s exactly the
same. Out of preview. It didn’t change anything because we haven’t
told the div block how to behave. Let’s set a type to 100 percent of the viewport,
that’s 100 VH, and we’re almost there just a few more changes. We’re going to enable flexbox. This let’s us align and justify content
to the center. So let’s align and justify cont- and it’s
done. Regardless of the size of our viewport, this
animation will be at the vertical center. Magic? Not at all, because we just demonstrated exactly
how it’s done. Now, one more thing. If we scroll, the animation is stuck there
at the top. It scrolls with all the headings and paragraphs
and even the fake buttons, but what if we make the div block, that div block we created,
what if we make that sticky? And what if we make sure it sticks starting
at 0 pixels from the top. So it’ll essentially stick right away. Let’s try it out in preview mode while we
scroll, the animation is staying in the perfect center the whole time. That’s step four. Step five, we’re almost done. This is the big part. We’re going to set up a scroll-based trigger. Over in interactions, we’ll add a trigger. There are two types of triggers. A trigger is just something, an event upon
which an animation is, for the lack of a different term, triggered. If you want an animation to start when you
click something, clicking that thing, that’s a trigger. If you want an animation to start on page
load, the page itself loading, that’s the trigger. In this case, we want the trigger to be on
the page. We want this animation to progress as we’re
scrolling through the entire page, so we’ll select that option. And, we’re almost there. This is the last part. We want to create a new animation for this. While we’re scrolling we want our After
Effects animation to animate. And, there are two parts here. There’s 0 percent when we’re at the top
of the page, and there’s 100 percent, when we’ve scrolled to the bottom of the page. We want to make sure our Lottie animation,
the planets, we want to make sure that’s selected. And we’ll simply add a keyframe, an action,
to control our playback. And two things showed up. One at 0 and another at 100. At 0, we’re basically at the beginning of
the animation. At 100, let’s go in, and make sure we’re
at the end of our animation. Too easy? We’ll see. And let’s go into preview mode. And as we scroll, it works exactly as expected. But, that’s it. We set up the After Effects composition, we
animated, we exported, we added our animation to Webflow, we configured the trigger, and
finally we set up our animation so it would tie into where we scrolled on the page. Now, there are trillions of things you can
do with this. We have the full course available on Webflow
university, but that’s a basic, scroll-based animation in the Webflow designer.
