Overview of After Effects and Lottie in Webflow

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

We’re transitioning to a new UI, and are in the process of updating our Webflow University content.

In this lesson:

  1. Set up the composition in After Effects
  2. Build an orbital animation
  3. Export
  4. Bring the animation into Webflow
  5. Configure an interaction trigger

Set up the composition in After Effects

New composition button highlighted on the After effects set up a composition section.

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:

  1. Open After Effects
  2. Click New Composition
  3. Enter 1000px for the Width
  4. Enter 1000px for the Height
  5. Enter 60 for the Frame rate
  6. Enter 5 seconds for the Duration
  7. Set Background color to white


Composition settings dialog box


Note: make sure Lock Aspect Ratio to 1:1 (1.00) is unchecked to create a custom dimension

If you want to go back and make a change, right-click your composition and access the settings.

Build an orbital animation

Step two is where things get really interesting. Let's start by adding a new shape layer to your composition. 

Add a shape layer:

  1. Right click in the layers panel
  2. Hover over New
  3. Select 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.

Shape layer content settings. Add feature is highlighted.


Add a stroke and increase the size so your ellipse is visible:

  1. Click Add on your shape layer
  2. Select Stroke
  3. Change stroke color to grey, or something different from your background color
  4. Change the stroke width to 1px
  5. Click the dropdown arrow of the Ellipse path
  6. Enter 900 for the Size

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.

Orbital Path layer name is highlighted as a uncollapsed layer.


Add a fill and choose the color:

  1. Click the Add button within the layer
  2. Select Fill
  3. Change the Fill color to black
  4. Reduce the opacity in the Fill settings to 3%

Copy, paste, and change the size for the second ellipse:

  1. Select the Orbital path layer 
  2. Press Command + C (on Mac) or Control + C (on Windows)
  3. Press Command + V (on Mac) or Control + V (on Windows)
  4. Click the dropdown arrow of the layer (e.g., Orbital path 2)
  5. Click the dropdown arrow of Contents in the copied ellipse
  6. Click the dropdown arrow of Ellipse Path in the copied ellipse
  7. Change the Size from 900 to 700


Note: we're adjusting the Size on the ellipse path itself instead of going into transform — if we transformed, the stroke would also scale down. For this example, we want a consistent stroke, so we're using the ellipse path Size property. 

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:

  1. Select the recently copied layer 
  2. Press Command+ C (on Mac) or Control + C (on Windows)
  3. Then press Command + V (on Mac) or Control + V (on Windows)
  4. Press the arrow of the copied ellipse
  5. Press the arrow of the Ellipse Path within the copied ellipse
  6. Reduce the Size by 100 (e.g., changing from 700 to 600)
  7. And, repeat the above steps four more times

Note: you can vary the Size difference of your copied ellipses to make the paths look more natural instead of reducing each by 100

Great! You now have seven orbital paths. That means you’ll have seven different planets. 

After effects ui dashboard with all the layers selected.


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:

  1. Select the recently copied layer (e.g., Orbital path 7)
  2. Press Command + C (on Mac) or Control + C (on Windows)
  3. Then press Command + V (on Mac) or Control + V (on Windows)
  4. Click the dropdown arrow of the copied layer
  5. Click the dropdown arrow of the Ellipse Path within the copied ellipse layer
  6. Reduce the Size to 40
  7. Click on the label (e.g., Orbital path 8) and press the return key
  8. Then, enter a name (e.g., 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%. 

The color and opacity feature layers are highlighted.


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:

  1. Copy and paste the Star laye
  2. Name the copied layer (e.g., Planet) 
  3. Within the Contents > Ellipse path of the copied layer: change the Size (e.g. change from 40 to 15) 
  4. Within the Contents > Ellipse path of the copied layer: click and hold the first Position input (i.e. the x-axis) and drag the value until the Planet rests on the stroke of the first orbital path

Let’s create 6 more planets using your first planet as a template.

Creating more planets:

  1. Copy and paste the recently copied planet. 
  2. Within the Contents of the copied layer: click and hold the first Position input (i.e. the x-axis) and drag the value until the Planet rests on the stroke of the next orbital path

Note: you can vary the Size difference of your copied ellipses to make the paths look more natural instead of reducing each by 100

A captured still of the planets mid orbit.

Now that everything's placed correctly, you can adjust the rotation of your planets. 

Adjust the rotation of the planet:

  1. Click the arrow of a planet layer to open the settings
  2. Within the Transform dropdown, click the stopwatch icon next to Rotation to place the first keyframe (making sure that you are at the beginning of the timeline at frame 0)
The rotation feature layer is highlighted. The first keyframe on the timeline is also highlighted.
  1. Then, drag the timeline to the end
  2. Next, click the stopwatch next to Rotation icon to place the last keyframe  (making sure that you are at the end of the timeline)
  3. Lastly, change the value of the Rotation. Entering a value in the first input sets the number of rotations, and entering a value in the second input sets the degrees within the rotation. (e.g. 1x70.0° will rotate 1 full rotation and 70 degrees)


Note: you can change the starting and ending Rotation values to what best suits your animation

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.

Export

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.

The window menu is selected and expanded.


To export, make sure your composition is selected, set a destination folder where the export will save the file, and press render.

Bring the animation into Webflow

Now to import your exported file. 

Import your After Effects animation into Webflow:

  1. Access your Webflow project in the Designer
  2. Click the Assets icon, or press J on your keyboard, to open the Assets panel
  3. Click the Upload button and select your After Effects animation, or drag your After Effects JSON file into the Assets panel
  4. Drag your animation into the canvas of your project

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.

Configure an interaction trigger

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

The lottie playback action is highlighted in the dropdown menu of the select an option menu.

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.

Table of contents

Continue learning

Hmm…we couldn’t find any results for “search query”. Try a different search term or check out our community forum.

Search the forumReset the filter
Load more

Filter

Reset
Thank you! Your submission has been received!
Oops! Something went wrong while submitting the form.
Topics
Thank you! Your submission has been received!
Oops! Something went wrong while submitting the form.
Back to top