[Architecting multiple animations - best practice]

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.  

[Architecting multiple animations - best practice]

Hello,

 

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?