GSAP vs Bodymovin/Lottie

[Daniel Hult]

Hey,

Just going to say first that I am super satisfied with gsap and the whole club greensock platform, and not going to stop using gsap in any way. I just wanted to hear your opinion on pros and cons of using gsap vs something like lottie for web when animating svg's e.g.

Complex animations can be very tricky to make on the web, and to my eyes it seems like using bodymovin for after effect to export an animation and make it come to life on the web with lottie library is very easy. People in my team are eager to use this as the main tools for animating svg.

Would there be any downside to this vs gsap? I know it's not very easy to give a straight answer, but I just wanted to hear the thoughts from people in this forum  

[OSUblake]

It's uses a bunch of pre-generated data, so you can't change it at runtime, meaning it can't be dynamic. 

[OSUblake]

Also, SVG performance is very meh. Yes, I know there is a canvas option, but I've had trouble getting it to render correctly for complicated stuff.

[ZachSaucier]

Hey Daniel,

 

It depends mostly on 1) the nature of the animation and 2) how comfortable your people are using After Effects vs animating more  in code.

 

As Blake said, Lottie exports are pre-generated so harder to make interactive with or change more dynamically. They also can't make use of all of the features of the web like GSAP can - you're restricted to what Lottie can export. GSAP also does a lot of work solving cross-browser bugs for SVG that I'm unsure if Lottie does (it very well may do just as good of a job with the animations it exports, I don't know, but I kind of doubt it is as cross-platform friendly as GSAP is). 

 

Secondly, if your team is used to working more with code than After Effects learning AE can take some time. If they're already familiar with it then that's great. 

 

Blakes point about the restrictions of SVG itself is also a valid point. Some animations simply perform too badly with SVG, so that's a factor as well. I've also had trouble with Lottie's canvas rendering but I haven't used it in a while.

[OSUblake]

12 minutes ago, OSUblake said:

It's uses a bunch of pre-generated data, so you can't change it at runtime, meaning it can't be dynamic. 

 

In some cases, it would be better to just use a video.

[Daniel Hult]

Thank you for the replies! Will take this into account when choosing what to use next time  

[GreenSock]

For the record, nobody [that I know of] here is "anti-Lottie". In fact, I've seen some very slick animations done with it, many of which were used along with GSAP. There are definitely effects that are only feasible with a tool like After Effects. As with all tools there are pros and cons to weigh.

 

And to Blake's comment about sometimes video being better, I think that's entirely true when the artwork is very complex (SVGs can be rough on the browser rendering-wise because it must  fabricate every pixel dynamically on each tick whereas video codecs can be much easier to decode and scale) or if it's being scaled up to a point where it's too hard on the browser to fabricate all the pixels from vectors. Or occasionally the file size can actually be smaller with a video, but that's probably not the case with most of the animations I've seen. 

 

Anyway, Lottie can be great for certain animations. I have zero experience with it personally, but I wanted to make sure we weren't giving the impression that it's "bad" or that GreenSock people are opposed to it. 👍

[Visual-Q]

Yeah, you don't have to look at it in terms of vs GSAP.

Lottie/Bodymovin plays nice with using gsap as a control structure. The one instance i had to use it was when I had a bunch of stock vector icon animations in AE and used BodyMovin to export them for the web, and gsap timelines to control them together with scrollMagic. With the new ScrollTrigger in gsap they should pair up even better. So you can have the best of both worlds. There are several examples on copepen of using them together.