Complex Lottie Animations From After Effects Always Failed Until I Tried This

preview_player
Показать описание
Most effects within after effects are not compatible when exporting a Lottie animation, things just break and simply don’t work. However using PNG sequences we can get any animation using any effect to work perfectly with Lottie, every single time.

Let's dive in.

👇 Subscribe for the latest MUX👇

Youtube: @MotionUX
  1. Motion UX
  2. applemotion
  3. designchallenge
  4. designfeedback
  5. designinteraction
  6. designprompt
Рекомендации по теме
Complex Lottie Animations 0:05:41

Complex Lottie Animations From After Effects Always Failed Until I Tried This

Creating Complex Web 0:01:51

Creating Complex Web Animations with Lottie

Creating Lottie animations 0:06:45

Creating Lottie animations in Figma

Create Lottie Animations 0:07:35

Create Lottie Animations For Web & Apps in After Effects

Figma to Lottie 0:07:13

Figma to Lottie Animations!

Complex Animation with 0:07:52

Complex Animation with Lottie (Web)

Easy Lottie Animation 0:12:08

Easy Lottie Animation with Figma & Lottielab - Complete Step-by-Step Tutorial

Lottie Animation Island 0:18:05

Lottie Animation Island - Web Animations with After Effects

Lottie Animation - 0:09:04

Lottie Animation - Get Started Creating for the web with After Effects

How To Animate 0:10:27

How To Animate Like After Effects in Figma

How to animate 0:02:04

How to animate an element while scrolling — After Effects & Lottie in Webflow

Create Lottie Animations 0:39:34

Create Lottie Animations in After Effects - The Ultimate Guide!

Create, test, ship, 0:01:31

Create, test, ship, and implement Lottie animations with LottieFiles

#3 Export & 0:11:39

#3 Export & hand off Lottie animations with LottieFiles for After Effects | Saptarshi's Gui...

How to Create 0:14:00

How to Create Lottie Animation without Adobe After Effects?

Creating Lottie Files 0:17:01

Creating Lottie Files Using Illustrator & After Effects for Webflow Projects

#2 Tools to 0:03:06

#2 Tools to create Lottie animations | Saptarshi's Guide to Lottie and LottieFiles

A Quick LottieFiles 0:02:02

A Quick LottieFiles for After Effects Plugin Walkthrough

Lottie Animation #4 0:00:05

Lottie Animation #4

You Can FINALLY 0:11:20

You Can FINALLY Export Figma Animations To Lottie! – LottieFiles Features + Tutorial

After Effects Tips 0:10:30

After Effects Tips and Tricks for Lottie Animations!

Create After Effects-Like 0:16:34

Create After Effects-Like Animations in Figma?!

Complex X Symbol 0:00:03

Complex X Symbol logo Lottie JSON animation by graphicsgenisys

Create Lottie Animation 0:18:59

Create Lottie Animation in After Effects | Write-On

Комментарии
Автор

Another awesome tutorial! thanks! question...why do you use the bodymovin vs lottie plugin? thanks again!

jz
Автор

goddd you're a lifesaver, thanks a ton

captainess
Автор

Are you able to use this technique for a Lottie file on Webflow? We are having trouble linking the images and it's driving me bananas lol

lucylewis
Автор

I had to work on a very complex flag animation for my product some 2 years ago and it wasn't working. I made it into a GIF and split everything frame by frame, exported the PNG and stringed it together in AE. 😂 The file was super heavy but our mobile guy was able to make it work.

This is a much more efficient method!

david_jay
Автор

I always seem to have an issue with colours remaining the same after export. Just tends to revert back to the original colour, and tips for said?

christrim
Автор

why i cant see my png sequence on the json?

nartz
Автор

Hmm interesting, I think I have 2 options to get scalable animations with Figma files

1. Importing the figma files into Adobe Illustrator, converting the ai file in ae to shape layers and render with bodymovin
2. Export figma file as .svg and import it in lottiecreator browser, making the animation there but with many limitations and some extra costs

Both have their advantages and disadvantages.
Advantages for the first one are I can possibly use more effects and do some more complex animations but with the disadvantage that it won't handle gradients and blurs.
Advantages for the second are I can handle the gradients and blurs but I can't animate everything as detailed as in AE

Sadly that AE doesn't support svg files yet 😭 it could be way better lmao

katume
Автор

IMG sequences aren't rendering.. how did you do it?

andyrenton