Jump to content


Architecting multiple animations - best practice

Warning: Please note

This thread was started before GSAP 3 was released. Some information, especially the syntax, may be out of date for GSAP 3. Please see the GSAP 3 migration guide and release notes for more information about how to update the code to GSAP 3's syntax. 

Recommended Posts



I am very new to GSAP, and relatively new to front-end web development in general.  I am always trying to optimize my workflows and organize my code such that it is readable, extensible, DRY and all the other fun acronyms associated with best practice.


I recently worked on a vanity project where I coordinated multiple animations with a single event (a click), and I came across two problems that might possibly cost me a rewrite:


1) GSAP animates using element-level styling, overriding my CSS

2) Coordinating multiple animations in a single event is non-trivial


Has anyone posted a best-practice of using GSAP responsibly?  I'm looking for something similar to how Hugo described the 7-1 pattern for SCSS (https://github.com/HugoGiraudel/sass-boilerplate).  I know that with trial and error, I can figure this out, but with all the experience in the forum, what do others do?  


For a solution to (1) that I am considering:  Try to always use ClearProps at the end of an animation, and replace the destination of the animation with a CSS class.  Is this a pattern that makes sense, assuming the animation is a transition?


For (2): I am a bit stuck.  I have two components that I have built to be plug and play for re-usability.  However, I want these animation components to now coordinate with each other.  Are there general patterns to follow on how to achieve this?


Link to comment
Share on other sites

Has anyone posted a best-practice of using GSAP responsibly?


This made me laugh. I'm trying to imagine how one might use GSAP irresponsibly.  :lol:


It's really hard to say what best practices would be as that's all going to depend on what you're doing. GSAP is non-opinionated. There is no "GSAP" way of doing things.


The workflow for somebody designing banner ads is going to be vastly different from somebody designing an action game. Best practices are also going to vary by the type of renderer you're using... if you're even using one. Working with HTML and SVG requires a complete different workflow than one used for canvas or WebGL. And best practices are also going to vary by any libraries or frameworks you might be using. A particular animation workflow in Angular is probably not going to work the same as one for React.


Probably not the answer you were looking for. It would really help if we knew more about what you're trying to do. Can you provide a demo to illustrate the problem? I'm pretty sure that if we had more context about what you're trying to do that we could figure something out. 





  • Like 2
Link to comment
Share on other sites

 This made me laugh. I'm trying to imagine how one might use GSAP irresponsibly.  :lol:


Using it alongside CSS transitions? :blink:

  • Like 1
Link to comment
Share on other sites

Welcome to the forums, @gdbjohnson.


Blake said it well - GSAP is meant to be extremely flexible and it doesn't impose a particular way of working on you the way that many frameworks do. Sprinkle it wherever you want. There's not an official "GSAP way" of doing everything - just feed it the object and properties you want to animate and it works it magic. Done. 


1) Yes, GSAP sets CSS styles inline - that's very intentional and it accomplishes two things: First, it's FAST. We put a huge priority on performance since animations is the most performance-sensitive aspect of UX. Second, it ensures that cascading issues don't cause all sorts of problems. If you want to animate the actual CSS rules themselves, you can do so with the CSSRulePlugin


2) I think you'll find that GSAP makes it insanely easy to coordinate all sorts of different animations. Check out TimelineLite and TimelineMax which are like containers for your tweens. They allow you to schedule them in any sequence you want (with overlaps or gaps or whatever you want). See http://greensock.com/sequence-video and http://greensock.com/position-parameter for more details. 


And yes, like Dipscom suggested, don't use GSAP and CSS transitions together on the same element - they'd fight for control. :)


As Blake suggested, if you're having a particular problem with coordinating multiple animations, please whip together a codepen reduced test case so we can see it in context and offer some suggestions. 


Happy tweening!

Link to comment
Share on other sites

Thanks Blake.  Your answer makes sense... there are probably different patterns depending on how GSAP is being used.  I'm going to spend some more time on my animation / transition to understand it better before posting more here.  

Link to comment
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.