Create animations in After Effects, export them as Lottie JSON files with the bodymovin plugin, and animate them in your Webflow site.
In this lesson:
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, timing, or frame rate. For this example, let's create a 1000px wide by 1000px tall composition using 60 frames per second.
Create a composition in After Effects:
If you want to go back and make a change, right-click your composition and access the settings.
Step two is where things get really interesting. Let's start by adding a new shape layer to your composition.
Add a shape layer:
Now you can create any shape you want. Open the settings of your shape by clicking the dropdown arrow of your Shape layer > Add > Ellipse. And now you have an ellipse.
Add a stroke and increase the size so your ellipse is visible:
So now you have an outer orbital path. And if you click on the layer and press the return key on your keyboard — you can enter a name (e.g., Orbital path) to keep things organized.
Add a fill and choose the color:
Copy, paste, and change the size for the second ellipse:
Copy and paste multiple times, to reduce the size by 100 for each new path, and create a total of seven orbital paths.
Create five more orbital paths:
Great! You now have seven orbital paths. That means you’ll have seven different planets.
Next, press Command + A (on Mac) or Control + A (on Windows) to select all, and then we can just hit the dropdown arrow next to a layer to collapse all of them. This helps organize our paths for this example.
Now for the star. Rather than doing this from scratch, you can use one of the copied orbital paths you created (e.g., Orbital path 7) as a template.
Create a star:
You’ll use the same stroke color, but you want the fill to be a little bit different.
Let's go in and choose a color of white, with an opacity of 100%.
You'll use the same type of design for your planets, but there's a little bit of a difference with the planet.
Create a planet:
Let’s create 6 more planets using your first planet as a template.
Creating more planets:
Note: you can vary the Size difference of your copied ellipses to make the paths look more natural instead of reducing each by 100
Now that everything's placed correctly, you can adjust the rotation of your planets.
Adjust the rotation of the planet:
Now you can create rotation animations for the other 6 planets by repeating the above steps. Once all of the planets have had keyframes and rotations added, pressing the space bar from the first frame will let you preview the animation.
You’ve built your animation, now you can export it.
You’ll use a plugin called Bodymovin (learn how to nstall the Bodymovin extension) to take your After Effects composition and turn it into a single JSON file. If the Bodymovin extension is already installed, you can find that extension in your After Effects menu by clicking Window, hovering over Extensions, and selecting Bodymovin.
To export, make sure your composition is selected, set a destination folder where the export will save the file, and press render.
Now to import your exported file.
Import your After Effects animation into Webflow:
When you preview the project by clicking on the Toggle Preview icon (the eye icon), you’ll notice that the animation begins playing automatically. Next, you can create an on-click trigger to begin the animation when it is clicked.
This is the big part. We're going to set up an on-click trigger. Learn more about triggers and animations.
To set up the trigger:
Select the animation element in the Navigator
Click the Interactions icon, or press H on your keyboard, to open the Interactions panel
Click the plus sign (+) and select the Mouse click (tap) option
Within the On 1st click dropdown: select the Lottie playback option
Exit out of the interaction, and publish your project to test your animation
Now, there are trillions of things you can do with this. So, feel free to learn more about After Effects, triggers, and animations to bring your project to life.
Something went wrong while submitting the form. Please contact email@example.com