Summary

In this course, we’ll show you how to use Adobe After Effects to build movement into your design— visually, without any code. Learn how to create an animation that triggers when someone loads a webpage, clicks, hovers, or scrolls. Use this technology to render an image sequence in Cinema 4D or Blender, and control that sequence based on the position of your mouse. This course will give you the tools to use both After Effects and Webflow to their full potential. 

Requirements:

Lessons in this course

Get started

Coming soon

An overview of what the After Effects and Lottie in Webflow course will cover.

An overview of the After Effects and Lottie in Webflow course.

After Effects and Lottie course introduction
1:19
Coming soon

How to install and use the Bodymovin extension for After Effects, which lets you export After Effects compositions as JSON files.

Install and use the Bodymovin extension to export After Effects compositions as JSON files.

How to install Bodymovin
3:14
Coming soon

Create animations in After Effects, export them as Lottie JSON files with the bodymovin plugin, and animate them in your Webflow site.

Create animations in After Effects, export them as Lottie JSON files with the bodymovin plugin, and animate them in your Webflow site.

Lottie overview
14:48
Coming soon

Lottie inspirations

Coming soon

Animate an After Effects animation when people click on a given element.

Click based animations
1:40
Coming soon

Animate an After Effects animation when the Lottie file scrolls into view.

Set up an After Effects animation to animate when it scrolls into view.

Animate when in view
2:24
Coming soon

Animate an After Effects animation as the page scrolls.

Animate while scrolling
2:03
Coming soon

Show an After Effects animation as a placeholder before the website loads.

Create a sequenced animation that animates multiple elements once a page loads.

Page loader animation
4:10
Coming soon

Animate a video from After Effects as you scroll down the page.

Animate a video on scroll
6:34
Coming soon

Create a 3D animation in Cinema 4D and import it into your website.

Build a Cinema 4D animation from scratch.

Cinema 4D in Webflow
20:00
Coming soon

3D phone rotation on scroll
22:08
Coming soon

Add web animations with After Effects & Lottie

10
Lessons
Get started
Get started

Coming soon
Coming soon
Coming soon
Coming soon
Lottie inspirations
Lottie inspirations

Coming soon
Coming soon
Coming soon
Coming soon
Coming soon
Coming soon
Coming soon
Coming soon
This video features an old UI. Updated version coming soon!
This video features an old UI. Updated version coming soon!
This video features an old UI. Updated version coming soon!
This video features an old UI. Updated version coming soon!
This video features an old UI. Updated version coming soon!
This video features an old UI. Updated version coming soon!
This video features an old UI. Updated version coming soon!
This video features an old UI. Updated version coming soon!
This video features an old UI. Updated version coming soon!
This video features an old UI. Updated version coming soon!
This video features an old UI. Updated version coming soon!
This video features an old UI. Updated version coming soon!
This video features an old UI. Updated version coming soon!
This video features an old UI. Updated version coming soon!
This video features an old UI. Updated version coming soon!
This video features an old UI. Updated version coming soon!
This video features an old UI. Updated version coming soon!
This video features an old UI. Updated version coming soon!
This video features an old UI. Updated version coming soon!
This video features an old UI. Updated version coming soon!
This video features an old UI. Updated version coming soon!
This video features an old UI. Updated version coming soon!
This video features an old UI. Updated version coming soon!
This video features an old UI. Updated version coming soon!
This video features an old UI. Updated version coming soon!
This video features an old UI. Updated version coming soon!
This video features an old UI. Updated version coming soon!
This video features an old UI. Updated version coming soon!
This video features an old UI. Updated version coming soon!
This video features an old UI. Updated version coming soon!
This video features an old UI. Updated version coming soon!
This video features an old UI. Updated version coming soon!
This video features an old UI. Updated version coming soon!

After Effects and Lottie course introduction

An overview of what the After Effects and Lottie in Webflow course will cover.

Learn more

Transcript

This is Adobe After Effects. Many consider it the industry standard for motion graphics. What if, without any code, we can bring After Effects to the web? What if we can do this visually, based not only on when someone loads up a web page, or clicks, but what about an animation that can progress as someone scrolls? Or, what if, using that same technology, we could render an image sequence in Cinema 4D, or Blender, and control that sequence based on the position of our mouse? This is what’s possible with After Effects in Webflow. It’s built on Airbnb’s Lottie and it works like this. Step one: Create an animation in After Effects. Step two: export it using an extension called body moving.

[Voice coach] Body movin

[McGuire] Body moving

[Voice coach] Body movin

[McGuire] Body moving

[Voice coach] Body movIN

Step three: Webflow. Just, add your animation, drag it in. If you preview it now, it animates exactly as it does in After Effects. But, here’s the biggest part: step four. These triggers we’re listing on the screen, you can use any of them to control the animation. We’re going to teach how to animate each of these triggers, because we’re going to show you how you can use both After Effects and Webflow to their full potential, together.


How to install Bodymovin

How to install and use the Bodymovin extension for After Effects, which lets you export After Effects compositions as JSON files.

Learn more

Transcript

Bodymovin is a free extension that lets us export After Effects compositions as JSON files, so we can embed them in websites, add them to apps, or confuse unsuspecting email recipients. Honey, who’s JSON? We’re going to cover installing the Bodymovin extension, we’ll verify our After Effects preferences, we’ll render an animation, then we’ll place it in an actual site. 

Let’s start with installation. If you’re into searching and navigating through a bunch of different pages, that’s fine. We’re looking for Bodymovin on the Adobe Exchange. We’re also including a link in the description. Install the extension, if you have any problems, there are some troubleshooting tips on the top of Adobe’s page here. That’s part one. 

Let’s move into part two. Open up After Effects, and check to make sure Bodymovin is listed under Window Extensions. If you don’t see it there, you might want to try quitting After Effects and starting it back up. Or, if you’re like us and have a bunch of different creative cloud subscriptions, check to make sure you’re logged in to the right one when you add the extension. But one of the most common issues people have when using Bodymovin is regarding file permissions. Let’s check out After Effects, preferences, on Windows this is Edit, Preferences, and we’ll look under Scripting & Expressions. Now, Adobe might change the location of this setting, it used to be under General, but what we’re looking for is Allow Scripts to Write Files and Access Network. We want to make sure that’s checked, and now we can move on to other things. That’s part two. 

Part three, let’s export a composition using Bodymovin. What we see here is a simple animation. To export it, or render this into a Lottie compatible JSON file, we’re going to do exactly what we did before. Window, Extensions, Bodymovin. A couple things here. First, you want to select this, and any other compositions that you want to render. And, you can check out the settings to go into more detail. An important note here, if you have JPG content, or PNG content, if you have any rasterized images in your composition, you’ll probably want to use compression. And you can embed, you can include those files, in the JSON itself. We’re not going to do that since this animation has none of those things, but it’s definitely worth noting. Finally, check your destination folder. This is also where you can name the JSON file that’s about to export. And, when everything is ready, press render. The file renders, and if everything went okay, you should have a JSON file sitting in the destination folder. 

And that leads us to our last step, placing it in an actual site. Now, we’ll use Webflow for this but the concept is the same if you’re hand coding this or using another platform. And, we’ll drag the animation into our custom layout. And that’s it. If we publish, or export our site, or if we preview, it’s there. The animation plays automatically. That’s it. 

Now, we cover a bunch of other use cases, which tie After Effects and Lottie animations to different interactions, based on click, or scroll, or mouse move. All of that’s free, so check those out on Webflow University if you haven’t already. Also, check out Airbnb’s Lottie site, their documentation includes a list of currently supported After Effects features. This is helpful when you’re planning a new composition. But, that’s an overview of the Bodymovin extension for Adobe After Effects 


Lottie overview

Create animations in After Effects, export them as Lottie JSON files with the bodymovin plugin, and animate them in your Webflow site.

Learn more

Transcript

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. 


Click based animations

Animate an After Effects animation when people click on a given element.

Learn more

Transcript

Animate when in view

Animate an After Effects animation when the Lottie file scrolls into view.

Learn more

Transcript

This is tiny cardboard box. We animated it in After Effects. It has its own theme song. But, we’ll make it animate on the web, so the box opens when it scrolls into view and closes when the box scrolls out of view. To do this, we’ll bring the animation into the page, we’ll set up the trigger, then we’ll animate that box based on when it scrolls into view. 

For the Lottie animation, we have that right here in our Assets panel. We exported this using Bodymovin. This example project has two sections. Let’s place this Lottie animation between each of them. Now, each section is the height of our viewport so we can make this cardboard box small. Really small. Smaller. Even smaller. That’s the first part. Let’s set up the trigger. Over in Interactions, this is where we can add that trigger. And we’re going to be setting this up on the element itself. This animation should be triggered when the selected element, which is our Lottie animation, when that scrolls into view. So we’ll select that option. 

Final part, animation. How do we want this to work? Well, when our selected element scrolls into view, we want the action to be this, we want the Lottie animation to begin. So if we scroll to the top of the page, and go over to preview this, when the cardboard box scrolls into view it animates open, just like we’d expect. But, if we scroll back up, and then down again, it’s still open. That’s expected. But what if we go out of preview mode? What if we control our Lottie animation, our Lottie playback, to occur when the element scrolls back out of view. We can even reverse it, so the box animates back to being closed. And in case someone might miss it, we can add offset. What happens if we add 10 percent offset when it’s scrolled into view, and what if we do the same thing when it’s scrolled out of view? Let’s preview so we can see exactly what’s going on, starting at the top. If we scroll a tiny bit, the box is closed. It’s not until it hits that ten percent mark, that it animates open. And, if we scroll back to where it’s out of view, when it’s ten percent away from being out of view, the animation will play in reverse, just like we told it to. So, we added a Lottie animation, selected our scroll-based trigger, and set up two animations, one when it scrolls into view, and another when it scrolls out of view. That’s tiny cardboard box. 


Animate while scrolling

Animate an After Effects animation as the page scrolls.

Learn more

Transcript

Sometimes the page is really, really long. And a lot of times we want something to animate only as that something is in view, in other words, we only want this animation to animate while we can see it. So in this example, we’re going to have three sections. The first and last sections will take up 300 percent of the viewport height, they’re set to 300 VH. Why such a ridiculously long number? Because we want to simulate a really long page. And the middle section, it’s set to only 100 percent of the viewport height. So we’ll cover this in three parts. We’ll drag in our Lottie asset, we’ll set up the scroll-based trigger, and finally we’ll configure the animation.

Let’s start with the asset. First things first, from our Assets panel, let’s drag in the animation, and we’ll place it in our middle section, the second of the three sections. Okay, that’s part one. 

Part two is setting up the trigger. Over in interactions, let’s make sure our animation is selected, and our goal is to have this animation happen as we scroll while the element is in view. So, we’ll select that option. That’s part two. 

Part three is where we turn this thing into a reality. Let’s add an animation. And, in that animation, let’s add our first action. This is like a keyframe, and when the animation is 0 percent scrolled into view, we want to hold right at the beginning of the Lottie animation. 0 percent is where the animation begins, but at a hundred percent, by the time the Lottie animation has scrolled past our screen, out of view, this is where we want the animation to reach the end. And, once we’ve done that, we can turn on live preview, or go over to preview mode, and the animation progresses as it’s scrolling in view. 

Now, the pattern here with After Effects and Lottie is pretty straightforward: drop in the Lottie asset, set up your trigger, and configure the animation. But that’s a scroll-based Lottie animation in the Webflow designer. 


Page loader animation

Show an After Effects animation as a placeholder before the website loads.

Learn more

Transcript

With a fast enough connection, page load animations should look like this. That according to Grimur, was a single frame. The animation was made in After Effects, we exported it using the Bodymovin plug-in. Now we’re going to add it to our project so it shows up on the screen and disappears once the page has finished loading. Let’s cover this now, and we'll do it in three parts. We’ll add the Lottie animation to our project, we’ll set up a trigger for when the page finishes loading, and finally we’ll make it disappear. 

Okay, adding the animation. We’ve added this JSON file, this Lottie animation asset to the assets panel. We can drag it in anywhere, let’s put ours right at the top of the page. We can also choose loop, which will play the animation over and over. Let’s close out of the settings, and for now we’ll control its position, its position on the screen, by making it fixed. That means it's fixed to the browsers viewport. If we scroll up and down, the animation doesn’t care. And let’s size it to 100 percent width, this is 100 percent of the viewport, and 100 percent height as well. Just in case, let’s also set the z-index, the stacking order, to an obscenely high number. This way it stacks on top of other content and parts of the page won’t start appearing on top of the animation. We can also go in and add a background color. When a Lottie asset like this has a transparent background, we can change the background color right here in the Style panel. If we preview it right now, it works. 

Now, how long will this go on for? Well, we tested it, and our theory is, it’ll go on forever. So, this is part two. How can we set up a trigger to hide the animation when the page finishes loading? Let’s head over to Add an Interaction. This is going to be a page trigger, on page load, when it finishes loading, we want our animation to go away. When the page finishes loading, we want to start an animation. What kind of animation? The one we’re creating right now. On any of these kinds of interactions, once we create a new animation we can name it to keep things organized. So, once the page finishes loading, we want this thing to hide. We’ll make sure the page load animation is selected, and we’ll simply set it to hide. We’re going to set it’s display, its display setting, to none. If we preview now, it’s maybe a bit too fast. Now if we were on a slower connection it might look something like this, but, just in case, let’s add opacity to this. We want it to fade down to 0 percent. This means we can fade out the animation over a particular duration, let’s say 1.5 seconds. Even though the animation is set to 0 percent opacity, it’s still there. So right after it becomes 0 percent opacity, we want to set it’s display setting to none. Display none doesn’t just mean its invisible, it won't even take up space on the page, completely gone. That’s what we want after the page finishes loading. 

There’s no right or wrong way to do this. Some might feel 1.5 seconds is too long. Do we need a fade out? Not necessarily. But we can tweak our values and adjust the animation to get it just right for the page we’re designing. Now, one thing to note, it might be frustrating to edit your content, to edit the rest of the page, if this animation is floating on top. One thing we could do is set the elements display to none by default. But, if we preview that it's completely blank. The animation never shows up. So, if that’s what we’re going to do, let's go back into that interaction, back into our page load controls, and add one more thing. At the beginning, let’s set the display to block. This is the default display setting the element came with, and let’s set that as the initial state. This means if we’re back in the Style panel, we can still edit our page content, remember a moment ago we set its display to none, but when the page loads, the interaction kicks in and shows its initial state. This way we can still edit everything on the page without it being in the way. 

But, that’s it. We added our Lottie asset, we set up a page load trigger when the page finishes loading, and the elements display setting switches to none so it hides after the page load. 


Animate a video on scroll

Animate a video from After Effects as you scroll down the page.

Learn more

Transcript

If we hit play on a video, what happens? Exactly what we’d expect, it starts with the first frame, plays all the frames in order, same old story. But we’ll link this example up a little differently, we’ll tie this video, this sequence of images to the scroll position on a page. And we’ll do it like this: we’ll set up our image sequence, we’ll configure it in After Effects, we’ll export using the Bodymovin extension, we’ll import it into Webflow and set up the layout, we’ll set up a scroll-based trigger, and we’ll link that trigger to the image sequence. It sounds like a lot, but we’ll move fairly quickly and cover each and every step involved. 

So, the first part. Our goal is to have an image sequence, one image per frame, in order. For this example, we’ll start with a single video we want to import. This video was exported from, it was rendered in Cinema 4D, but for this to work as an image sequence we have to first make it an image sequence. So we’ll fire up Adobe Media Encoder, and you can drag most common video types right into the queue here. And there are two things we’re looking for, well three if you care about where the images end up. The first is the format. We want the format to be JPG. Now, can you do an image sequence using PNG files? Maybe you want transparency support, you can, but in this case we’re using a JPG sequence. The preset, we said we cared about before, there’s only one preset in the dropdown. But if you’re looking to make specific changes you can click on the preset name and access more advanced options. Finally, we want to make sure the output destination and file name is set. And when we’re ready to start our queue, we’ll press the tiny play button. And just like that our single video file has been turned into an image sequence. If we open that up, we have the file name we chose and appended to each JPG is the frame number. This is our image sequence. That’s the first part.

The second part is putting this in After Effects. Let’s drag our entire image sequence into our project bin. Traditionally we’d create a new composition, but without doing that let’s drag all our selected images right into the layers area and let go of the mouse. And this is the important part, in addition to all the other important parts, we want a single composition. Since the dimensions on each image are the same we’ll leave the next part as is, but we want to make sure each still lasts one frame. Each image, each still, is valued at one frame. And, finally, we want to sequence our layers. We want them loading in order without any overlap, no overlap. When we hit okay, our image sequence is loaded right in After Effects into its own composition. Each layer, each frame, represents one image in our image sequence. That’s step two.

Step three, let’s export this using Bodymovin. Window, Extensions, Bodymovin. Let’s make sure this composition is selected for render, and this is really important. We want to go into our settings and take a look under Assets. Two things here. We want to enable compression. How much compression? You can test this out to see what looks right, but our goal is to keep the file size down while maintaining good quality. So for this, let’s try it out at 60. And the second thing here, let’s include the images inside the JSON, the file we’re going to export. Save changes, let’s set our destination folder, where we want to export the JSON file, and once we’ve gotten everything configured let’s render. Now, this part can take some time, so we reached out to the creators of Jeopardy to see if we can use their theme song while we wait for the render to finish. We have yet to hear back. Once the render is finished, let’s import our file into Webflow from the Assets panel, we’ll upload our file. We’re just selecting the JSON we exported from After Effects. And, once that’s been brought in, we can drop it right onto the canvas. And, just like any other HTML element on the planet, we can set dimensions. Let’s set a width constraint here, we can simply type in a width, and hit enter. And that’s step four.

For the last two we’re going to use Interactions. To set a trigger, let’s go over to our Interactions and add a page trigger. We want the animation to be triggered as we’re scrolling through the page, so we’ll select that option. That’s step five.

For the last part, let’s bring it to life. On scroll, we want to play a scroll animation. We’re creating a new animation here. And 0 percent scroll when we’re at the top of the page, we want our Lottie animation to be at the beginning. We’re simply selecting the Lottie animation and adding an action, a keyframe, at 0 percent. And at 100 percent when we’re at the bottom of the page we want the animation to be at the end. Now, image sequences can be a bit tricky since they’re located at exact frames. So you might have to adjust, you can play around with the value here until its just right. Now, if we’re done with that, we can go to preview mode, we can try and scroll and nothing. Why is that? No idea. Except here’s why. In order for the animation to animate as the page scrolls, the page needs to be able to scroll. Right now, there’s nothing else on the page. So there’s no ability to scroll. So, let’s go out of preview mode, and set a height on the body element of 200 VH. This means 200 percent of the viewport height. If we do that, and we preview, now we can start to see something happening. Our animation is animating based on our scroll position. Let’s leave preview mode because we should figure this out. What if we set our animation to fixed? What if we set the Lottie animation’s position to a fixed position? If we do that, and we go back to preview mode, we can see the Lottie animation animates based on scroll, and it stays fixed in the viewport exactly where we told it to go. Now, the animation behaves just like any other HTML element. So, we’ve included an example project that uses this rose animation inside the context of a real layout. So check that out on Webflow university if you haven’t already.

But, that’s it. We prepped our image sequence, imported and configured it in After Effects, exported the JSON, wrote to the producers of Jeopardy, brought the JSON into Webflow, set up a trigger, set up the animation, and summarized everything we learned right before Grimur cut to black before this sentence even fin-


Cinema 4D in Webflow

Create a 3D animation in Cinema 4D and import it into your website.

Learn more

Transcript

With the advent of modern web technologies, and recent advancements in time travel, not only can we model this galaxy in Cinema 4D, but we can use After Effects and Webflow to make it respond to our lateral mouse position right inside a web page. And, we’ll cover this from the very beginning, so if you never explored cinema 4D, or if you’re building skills in Adobe After Effects, or if you’re just getting started designing and developing for the web, we’ll make sure to go through every step of the process. And, we’ll do this in five parts: we’ll create the animation in Cinema 4D, we’ll render it as an image sequence in After Effects, we’ll use the bodymovin extension for After Effects to export it, we’ll drop that exported file into Webflow, and we’ll set up an interaction so it responds to our mouse. 

It sounds like a lot, and it is, but we’ll go through all this fairly quickly. Takes too long, Grimur might choose to edit out parts that seem to go on…

That’s why Star Trek first contact reimagined the zombie genre. As for After Effects, the fact that comes with Cinema 4D Light, means we can build really complex scenes and render them using Adobe Media Encoder that gets us our image sequence. And, that’s they key. We’ll use that sequence to create our Lottie animation. Airbnb created Lottie to integrate After Effects animations right into the web. That’s what we’ll be doing in this video.

Okay, Cinema 4D: this is our first step. And, we can start in After Effects. Just file, new, Cinema 4D. Let’s give this a name, Galaxy. Hit enter. Now, while this is loading, it’s a good time to mention -- and it’s already loaded. This is Cinema 4D, and before we get started, let’s change some render settings. We’ll go into edit render settings, and let’s change our width to 1,000 pixels, and a height of 400 pixels. Now, your viewport may be different. It may have a different aspect ratio, you might see if it’s sized differently, you might see darker bars on the bottom and top, right here. We’ve just resized our so it corresponds to that aspect ratio, that 1,000 x 400 aspect ratio, that 10:4 5:2 aspect ratio. 

Okay, time to get started. We’re not going to use any primitives for this; instead, we’ll just use a light. So we’re going to add one light, and if we render right now, by default, this is how our light shows up. We have the general settings here. If we render right now, by pressing render view, what do we see? Nothing. And, that’s expected, because while there’s a light there, there’s nothing for that light to illuminate. For instance, if we add a cube, let’s add a cube here, and let’s move it back, you can see the light is affecting that cube. As we move the cube around, we can see the light affecting our cube. Now, we’ll remove that cube, and we have our light again, again if we render, let’s hit command R on  Mac, or control R on a windows as a shortcut, and you can see there’s nothing there, that’s expected. Let’s change that. And there are a few ways to have visible light in Cinema 4D. One way is to use volumetric light. So with our light selected, you can change visible light, this is under General, change the visible light to volumetric. If you render now, you can see the light,  but the really impressive part is if we put some type of primitive there, let’s do a cube again, move this cube to the side, it should cast shadows. So, when that light hits that cube, that cube is casting shadows. That’s volumetric light, and it’s pretty interesting to work with, but it’s not what we’re using here. So we’ll select our light, change visible light to none, and instead click lens. And, what lens lets us do is it lets us add lens effects, or lens flares, and we can do that by switching glow to any of these presets, like wide angle, or high eight. In this case, we’ll use star two. And if we render now, command R, or control R on Windows, that’s what we can see. We have a visible light. This is a good starting point. 

Now, we can change the way this light looks. For instance, if we go into settings here, if we click edit, we have what they call glow editor. And the glow editor let’s us modify each element inside this lens flare, inside this lens effect. So, element number one, this looks pretty good. We might want to change it to something a little cooler, like a blue. That looks good. And go into each element, maybe this is okay as-is, element three, and change this to something warmer, like a red or orange. That looks pretty good. Let’s hit okay, and render, that’s a pretty good looking star. 

And we can also affect other things, like scale. Let’s change the scale down to 5 percent because there’s going to be a ton of stars. Let’s also look at this option right here, glow distance scale. Let’s make sure that’s checked. That means if something’s farther away or scaled differently, it’s brightness, it’s glow, will be decreased. So, with all these options enabled let’s hit render. That’s one star. Not very galactic. We can make it galactic. And here’s how we can do that. Let’s use an array. The array option is right up here, we’ll click that. And what happens when we render now? Still nothing. We still have the tiny star. We have to make that light a child of the array. So let’s grab the light, click and drag, and drag it into the array. And now, that array is duplicating, it’s setting up copies for our light. So now we have seven copies, that means in addition to our original, we have eight total stars. Still not enough for a galaxy. Let’s do something much higher like seven hundred. And, that looks pretty good. If we render as-is, will it look like a galaxy? Not so much. Looks a little more like a portal, but this is a good start, because in a galaxy the stars are randomized. It’s not a perfect ring. Instead, there’s randomization. So what we can do is right-click our array, we can convert the current state, this current state, everything we see here, to an object. And that object is going to also be called array. And if we open that up, we see individual instances for every single star. Let’s turn off, let’s uncheck the original array and collapse that. And this we’ll call Galaxy. Okay, let’s randomize our stars. Let’s select the top one, and then scroll all the way down, hold down shift, select the bottom one, now all 700, 701 of our stars are selected. And we can randomize their position, and we can randomize their scale. Let’s go into tools, arrange objects, randomize. And, we can move them, this’ll be the range in which something will move. So we can say, one hundred fifty centimeters along our x-axis. Let’s value the first one as x, the second one as y, the third one as z. X-axis is our left and right axis, so if we hit enter, we’ll see everythings been randomized, but only one way, only in one direction, along the x-axis, or, two directions along the x-axis. Let’s do the same thing along the y, but let’s make it a little bit less, let’s do 30 centimeters so we get a little variation along the y-axis, that’s up and down. Looking a little better. Maybe 50 centimeters for that one. That looks pretty good. And another 150 for the z-axis. This is our depth axis. And, that looks a lot better. If we render this as-is right now, if we render, it doesn’t quite look right, though. Let’s affect scale, because in a galaxy, not every point is identical. Points tend to cluster, there tend to be different sizes of stars, different brightness levels. So, let’s do that. Let’s change our scale to 200, 200, 200. Render now. That’s looking a lot better. 

Now, there are still some changes. For instance, we can go to mode, and object, and take that 5 percent scale maybe down to 3 percent, that might be a  good base scale. That’s looking a lot better. Okay, now let’s put one giant star in the middle so it looks like a center to our galaxy. And we can grab any of our lights, let’s say number 701, copy, command C, paste, command V, and now we have an extra star. Let’s move that star. By the way that star is no longer in this null, it’s no longer in this galaxy grouping, that’s this one right here, we can say, Center of Galaxy. And, we can make this one instead of a scale of 3, let’s do 100. And see what that looks like. Let’s render it as-is, and right now that’s positioned over here, we’ll want to move that to the center. So we’re going to set our x position to 0, we’ll set our y position to 0, and we’ll set our z position to 0. Now if we render, we can see that star right at the center. In fact, let’s affect that scaling, maybe a little larger, maybe 200 percent. Let’s see what that looks like. That looks pretty good. 150 might be a nice compromise. There it is. Now, one more thing we can do to add a little more granularity, some realism to this galaxy, we can take our first galaxy object, copy and paste it, and then randomize yet again. Let’s grab our top one, and grab our bottom while we’re holding down shift to select all of these, that’s looking good, the selection has been made, let’s go into randomize. We can click this shortcut right here or just go back up to tools, we’ll do it this way, and let’s randomize it again. Let’s move it even farther. Let’s do 400, here we can keep it at 50, 400. And scale, we can reset those to 100. 

And what we’re going to do here is a little different, we’re going to make these a lot smaller. And, to do that, let’s go into our mode, let’s go into object, and change the initial scale, the starting scale, to only 1 percent. Now if we render we should see a bunch of smaller stars in the distance, this gives us extra depth, extra realism, and it looks pretty good. Now, that galaxy we’ll call that Smaller Stars, collapse that, now we have two big objects, we have Galaxy and Smaller Stars. You can zoom out and see what this looks like in different views. That looks pretty good, but zoomed out we lose a little bit of of that realism. Let’s create a camera object. Create a camera object, you can zoom out and actually take a look at the camera object we just created. That’s the camera. To see what the camera sees, we’ll select this little target icon, this little crosshair. Click that, now we’re looking at what the camera sees. And, with the camera selected, let’s go in and zoom a little more. Let’s go in a little bit closer. And, we’ll decrease our focal length, so right now it’s a 36 millimeter lense, let’s change that to 24, so we have a little bit of a winder field of view. Let’s render. That’s looking pretty good. 

So, let’s rotate this. Let’s animate our stars. Let’s animate our galaxy. So, our smaller stars, so we can animate them at the same time, let’s drag those smaller stars to be a child of Galaxy. And collapse Galaxy. Now, if we move our playhead, nothing happens. We want this to animate as we go from frame 0 to frame 90. So at frame 0, let’s create a keyframe, with Galaxy selected, let’s click right here to record active objects. We’ll create our first keyframe, then we’ll move all the way to the end, frame 90. We’ll use our rotate tool right here, and we'll just rotate. Let’s rotate about 90 degrees maybe, maybe 50 degrees is enough, and we’ll create a keyframe. If we click and drag the playhead, our galaxy rotates. If we render any of these frames, it looks pretty good. Now, we might want the center of the galaxy to be a little closer to the center of the camera. We can do that with our camera selected, we can move up that angle, that downward angle from -18 to maybe -12, or -13. Render that, and now the center of the galaxy is closer to the center of the shot. Maybe -14. That’s looking pretty good. So, as our galaxy rotates, the camera remains pointed to the center of the project. That’ s looking pretty good. Last step before we move on, let’s go to file, and we’ll save our project. That’s part one in Cinema 4D. 

And, what we’ll do here is use After Effects to render this out. And this part is pretty quick. And, it’s the interesting thing about the integration between After Effects and Cinema 4D, because now that we’ve saved, we can just switch over to After Effects, and our galaxy appears right there. We can drag that galaxy in to create a new composition right down here, let go, and we have a new composition with the exact number of frames, and as we rotate it’s kind of not the right view. We can see something, but it's not quite right. What we’re looking at is a preview, the position of each of the stars, but what we want is to change our renderer from software to standard. This is final. And when we do that, we’ll see our stars. 

Now, what happens if we want to make a change? What happens if we want to change for instance the color on these lens effects. Well, we can switch over to Cinema 4D, we can open our galaxy, we can select all of our major lights, these are all the lights inside this group that are not the smaller stars, and let’s go in and hit edit, and we change that color. For instance, we might want to make it less teal and a little bluer, let’s do that. Hit okay. Hit okay. Save. And, when we switch over to After Effects, that change is updated almost immediately. Maybe the color on the major light, this is the big light at the center, the center of the galaxy, maybe we want to change that too. Let’s go to edit, and affect its color, let's do the same thing over here, and let's warm up element 3. This was the red center, we can make it a little warmer,  little redder, hit okay. Okay. And save. If we take a look after switching to After Effects, we can see we have that warmer center which loads right up. 

So, how do we turn this into an image sequence? Well it’s fairly straightforward, we go to composition, add to Adobe Media Encoder Q, and when that loads up, we’re looking for three different things. The first thing is that it’s a JPG sequence, so the format option we’ll want to choose JPG. We’ll want to make sure it’s JPG sequence here, but for now we’re going to ignore the second part and go with the basic settings that are included. And then we’ll want to select our output file, this is where each of the JPGs, each JPG of the sequence, will be saved. Let’s create a new folder called Galaxy JPG Sequence, and we’ll hit enter again, and render. So that’s the image sequence .

How do we use it? More importantly, how do we use bodymovin on an image sequence? Well let’s switch back over to After Effects and let’s save our project. Let’s go to file, save, save as, and we’ll call it Example Galaxy. Let’s close this composition, because we’re going to create a new one in just a moment. And here’s how. Let’s grab our Example Galaxy folder, we’ll go into that JPG sequence we created just a moment ago, command A on Mac or control A on Windows to select all, and let’s just drag our image sequence, all 91 images, right in here, into our project bin. They load right up, and with that, we can just drag them right down to this blank area here, the layers area. And let go. Now, this is what's interesting. We can create a single composition using the dimensions from any of these, since they’re all the same size, and we’ll create a still duration of one frame, just one at the end, all other values are 0. This means each frame, each JPG will take up one frame. And, we’re going to sequence the layers with no overlap. Let’s hit okay. That image sequence is laid out right here. So, how do we use bodymovin? We just use bodymovin. Let’s go to window, extensions, bodymovin. Now, it might not show up right away. Sometimes this takes a moment, but when it does, there it is, we can hit selected, we’ll make sure to select this for render, we’ll go into the settings, and in the settings there are a couple things to look at. Assets, let’s open that up. We want to enable compression. Let’s do something like 40 for right now, but we can tweak this and render it later if we want to increase that image quality or decrease the image quality based on the result. We’re wanting to manage, we’re wanting to find that perfect balance between image size, file size, and image quality. So, let’s also include in JSON, we’re going to include these JPGs, these compressed JPGs in the JSON file. Hit save, confirm the destination, galaxy, and render. 

Okay, now we’ve exported the file. Let’s place it inside our web page. And to do that, we’ll go over to assets, and we’ll upload what we just did. We saved it as Galaxy, not JSON, we’ll hit open, and that’s going to configure and when it’s done we can just hover over it and preview that Lottie animation. And, we’ll just drag it right into our project, right into animation placeholder. Now if we go to preview right now, you’ll see the animation plays exactly as expected, but there’s about five pixels at the bottom of empty space. Depending on how Lottie interprets this animation, we may need to select our Lottie animation and add some negative margin, let’s do -5 pixels. If we render again, things look pretty good. Now, let’s go out of preview mode because that’s going to get placed inside our webpage. 

Now let’s move onto the final step, where we set up the interaction itself. And we can do that from over in interactions. And we’ll create a page trigger. When the mouse moves in the viewport, we want this animation to progress. So let’s choose this option right here. And we’re going to play a mouse animation, on mouse move, we’re going to play this mouse animation. We’ll create a new one right now, and we’ll call it Galaxy Rotate. And there are two ways the mouse moves, there’s the y-axis which is up and down, and then there's the x which is left and right. The x is what we’re looking to control. We’re just going to add a new action here, we’re going to make sure that nothing else is selected, we don’t want the paragraph, the heading, just the Lottie animation. We’ll create a new action right here, click the little plus, and go down to Lottie. When the mouse is all the way to the left, we want our animation to be at frame 0. When the mouse is all the way to the right, at 100 percent, we want it to be at the end. Now, sometimes if we go too far to the end, it can get a bit finicky, so we’ll pull that back down to 99. That looks pretty good. And if we turn on live preview, just enable live preview, we can see it rotates exactly as expected. 

Now, what we’re getting is an inverted effect. As we move to the left, the galaxy rotates counterclockwise. When we move to the right it rotates clockwise. We could flip that. We could just drag our animations to the opposite sides, we’re just clicking and dragging the first one to 100 and the last one to 0. We’re just flipping those. And, if we enable live preview now, it works exactly as expected. So, let’s go to preview mode, and that’s it. As we move to the left, as we move to the right, the galaxy follows. Now, we can go back out of preview mode and affect smoothing or damping, and that value is at 50 percent, but we could switch to 85 percent or so, which means as we move our mouse, it’s going to catch up. The animation will smoothly approach the current mouse position. But that’s it. Now, how does this contrast with other ways of using 3D for the web? Because with modern web technologies, there are technologies like WebGL that can render primitives and shadows, and textures, in real-time, in many cases with small file sizes. But, when we get into more advanced lens effects, physically accurate renders, shading, advanced depth of field, thats where prerendering works great. It’s where an image sequence can ensure things look consistent on all devices. It’s also great if you’re making something that can’t be represented in 3D space, like if you’re converting an existing video to an image sequence. But, for us, in this example, we just created something in Cinema 4D from scratch, and we made it into an image sequence, exported that using bodymovin, imported that into Webflow, and we set up the interaction to respond based on the position of our mouse. And that’s using a mouse-based trigger to control an image sequence, or video, with After Effects and Webflow. 


3D phone rotation on scroll

Learn more

Transcript

Requirements

Related courses

Related courses

Notes:

  • The main video will get replaced with javascript after the site loads either from the browser's url if there's a videoUrl there, otherwise from the first video in the nav
  • We should pick some default video so people who have javascript turned off load some webflow video instead of wistia example currently there. do that in the embed with the iframe ^
  • The embed at the bottom of the page has some configurable options at the top of that code block. eg: you can tweak what the urls look like, but once this launches don't change them
  • Right now the classes used in the side nav can be edited by adding an element there with those classes. If you'd rather edit the css for those directly in the code you can add a css block in a new html embed at the top of this page for that, if doing that consider changing their names to not conflict with classes edited in the designer