Search the Community
Showing results for tags 'best practice'.
Hi guys, I was just looking for a bit of advice/a bit of a discussion about the pro's and con's, and the way you guys handle classes when it comes to animating essential page elements. For example, if you're using GSAP to have a modal window speed in from the left, a full-screen overlay grey's out the background. At this point the first animation ends, as the user needs to do something (input an e-mail address, for example). After which the modal window zooms off, and the full-screen overlay is removed, and the page is usable again, which is a separate animation. In this example there were three states; the Initial State, the Interactive State, and the End State (I just made those up), and at each of these points, different classes need to be applied to each of the elements involved (the background overlay, the modal box, etc.). Baring that in mind, is it best to animate the classes, using ClassName, or to use the standard inline-styles, and maybe apply the new classes/remove old ones at the end of the animation with a set/onComplete? Are there sometimes benefits to doing one over the other? This is more a question about best-practice I guess, rather than a specific use-case. I've just been learning about BEM recently, and it's got me thinking a lot about how to most efficiently and develop maintainable projects. I'd really appreciate any opinions/takes on this matter, as I really love both the BEM style of development as well as the GSAP suite. Thanks guys.
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?