gdbjohnson

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.

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?