Introduction to After Effects and Lottie in Webflow


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.

46 Comments

Add a Comment

Your email address will not be published. Required fields are marked *