From After Effects to the Web: Bringing Professional Animations to a Site

After Effects is the go-to tool for motion designers who animate logos, illustrations and interfaces. The trouble starts when you want that animation on a website: export it as video? As a GIF? Rebuild it in code? There are several options, and choosing well makes a big difference.

Option 1: video

The most direct route: export and upload. It works well for long animations or ones full of visual effects, like smoke, particles or footage. The downside is that video is heavy, looks blurry when scaled up, and you can’t change its color or text without exporting again.

Option 2: Lottie

The star option for interface animations. An After Effects plugin called Bodymovin, created by Argentine developer Hernán Torrisi, turns the animation into a lightweight data file, and a library called Lottie, popularized by Airbnb, plays it back on the web and in apps. Since it’s vector shapes rather than images, it stays sharp at any size, weighs very little, and can even be recolored or driven by scrolling. Ideal for animated icons, illustrations and loading screens.

Option 3: rebuild it in code

For simple animations, like a bouncing button or a menu sliding open, the best move is sometimes to use After Effects as a reference and rebuild the motion with CSS or JavaScript. It’s the lightest and most interactive option, because the animation can react to the mouse or to scrolling.

How to choose

• Photographic effects or lots of texture? Video.
• A vector illustration or icon? Lottie.
• An interface detail that has to respond to the user? Code.

A tip for designers

If you know an animation will end up as Lottie, design it with that in mind: use vector shapes, avoid effects the format doesn’t support, and check the result in the browser early, not at the end. Working with the developer from the start saves a lot of headaches.