Search the Community
Showing results for tags 'best practice'.
Found 4 results
-
How do I avoid undesired effects when creating multiple animations?
chrisandrew posted a topic in GSAP
Hi! First-time poster, please let me know if I can do anything to improve future questions. In the attached pen, I'm tweening the card title to follow the cursor on mouseover. In isolation, it works as I would expect. However, the behaviour changes dramatically when any arbitrary tween is applied to the card containing the title. I often encounter similar difficulty to avoid undesired effects, as well as issues with things like stacking context. I think I'm missing something critical about where, when and how to create and use multiple tweens correctly. Any guidance would be much appreciated. -
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?
-
Hi. With using sprite sheets I wanted to just set the width, height and background-position properties in CSS and set the rest in javascript with TimelineLite or TimelineMax. Is there a best practice for this? I want to do something like in the following example: I set all the images to hidden to start then animate with fromTo as needed. I made an example here with 3 different colored boxes, which works great on all browsers. http://codepen.io/anon/pen/jbKWJg The issue I am having is that on a DoubleClick banner example using the same technique I am having problems when I restart the timeline just in IE10. When I call tl.restart, any of the fromTo images with immediateRender:false are visible from the beginning instead of having autoAlpha:0. Thanks in advance, Kurt
