Jump to content
GreenSock

Search In
  • More options...
Find results that contain...
Find results in...
nonoumasy

GSAP is AfterEffects using Code?

Recommended Posts

Hi, 

Just getting into GSAP for many different use cases. One of which is I would like to make some animations you would normally do in After Effects but with code. Is that a fair comparison? Basically, can I make an animation like this in GSAP? Or would it make more sense to use a couple of tools like AE with GSAP. The reason why I was thinking of using GSAP is for:

  • file size,
  • mobile responsiveness since its part of the DOM, 
  • I can make it interactive later on which you can't really do using AE.

 

N

Edited by nonoumasy
more details
Link to post
Share on other sites

Hello nonoumasy,

 

Welcome to the forums!

 

I wouldn't say GSAP is After Effects but with code. I will be pendantic here a bit just for the sake of being... :P

 

After Effects has its own scripting language so, it has code. ;)

 

GSAP is only a tweening engine (with some extra plugins for some extra magical feel) so, it is not comparable with After Effects.

 

Now, if you rephrase your question to: "Can I use web technologies to create the animation like this using GSAP as the tweening engine"?

 

The answer is: Definitely.

 

It will be a mamoth task, no dobut. But is totally possible. You will need to use a fair few different tools and APIs to achieve that. SVG, JavaScript, Web-audio API...

 

So, yeah, jump off the cliff and create an amazing animation for the world to see. We'll be here to assist you with any GSAP related question you might have.

  • Like 6
Link to post
Share on other sites

Thanks for the clarification. It helps put it in context. 'tweening engine' is a good mental model. I assume thats its core feature or do the other plugins offer different tooling that make it interactive , etc.

It's good to know it can be done albeit with a different workflow and toolset.
cheers

  • Like 1
Link to post
Share on other sites

One thing to keep in mind when creating complex scenes and animations like the one that you show is performance. A video can render infinitely complex things so long as you do the proper processing because the complexity is done during the rendering/file creation process not the playback process. When you're trying to animate live things on a webpage you're much more limited in what you can do because you usually have less than 16ms to not only process all that needs to be changed but also update the visual state. That's not to say you can't do complex animations, but you might try to limit the complexity to what's essential for the animation that you want and make sure to make the animation as performant as possible.

  • Like 3
Link to post
Share on other sites

My days are pretty much a 50/50 split between AE and GSAP and this is only my two cent opinion, but I would definitely do that in AE. As much as I love GSAP, the complexity of all those elements would be a nightmare. Adding interactivity on top of that would also take it up a level. Performance would be an issue as @ZachSaucier mentioned. If you do opt for the code/GSAP route, I'd say if it doesn't move, make it a static image.

 

In AE, that whole thing would be pretty easy. All the walk cycles could be handled with Limber or DUIK. The rest of it is just a bit of vector work and adjusting things in the graph editor.

 

Again, just my two cents. YMMV.

 

Happy tweening.

:)

 

  • Like 4
Link to post
Share on other sites

thanks. good to know.
I might just do smaller animations like these at first.
coke.gif

Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now

  • Recently Browsing   0 members

    No registered users viewing this page.

×