Search the Community
Showing results for tags 'staggers'.
Found 4 results
-
As an exercise I've been attempting to modify this tween that creates an infinite loop of images fading in with the first image showing on initial render and then will animate out after a delay. The change I'm trying to make is I want to translate AND fade images in while overlapping the previous image. The sequence I'm looking for is: After initial delay on first image Move old image up AND out right after starting to move the new image up and in on top of the previous image Rinse and repeat I'm having trouble with the timing of the stagger. I'm wondering if a label between the first and the last tween segment would help. I'm also struggling with overlapping image 1 over image 3 when the loop starts all over again. I'm sure adding a z-index somewhere would help but I don't know where. I think I could do a lot of cool stuff if I can master this pattern. In many ways this expected behavior is very similar to @Carl 's stagger example in the "GSAP: Beyond the Basic course" Greensock Staggers with Seamless Loops but The only difference I'm trying to merge the logic to have the first item visible on load and starts animating after a delay. Any help would be so so appreciated
-
I'd like to rewrite my image cycle animation using GSAP's latest code. It's cleaner, plus I want to attach it to the new ScrollTrigger, and fire the animation when it reaches a certain point on screen, and pause when its not in the viewport. However, I'm having a difficult time getting it to work. I've found examples using the deprecated cycler, and others using some nifty staggers. I got close with my code, but I just can't get rid of the fade (I'd like the active image to just appear without a transition, and have it stay visible for a fraction of a second). Bonus kudos if someone can help the cycle accelerate until a maximum. @swampthang and @OSUblake both seemed to get this to work by adding a timeScale fromTo tween on the timeline itself https://codepen.io/swampthang/pen/dpqyzO and https://codepen.io/osublake/pen/epLjrG. But, is that possible to do if the animation is going to be triggered by the ScrollTrigger?
-
Hi, In the old syntax, you could pass a function to the cycle property of a stagger. Now that cycle has been replaced with gsap.utils.wrap, I am unclear as to how to achieve the same effect. The comments in the pen explain what i am trying to achieve. Thanks in advance for any help
-
GSAP 3.1 has landed with some exciting new features and various bug fixes. We highly recommend updating at your earliest convenience. Here are a few highlights: Random staggers GSAP’s staggers get even more powerful. Use the new from: “random” option to randomize how the staggers get applied. See the Pen GSAP from: "random" stagger by GreenSock (@GreenSock) on CodePen. Learn more about the advanced staggering options available in GSAP 3 below. See the Pen GSAP 3.0 Stagger demo by GreenSock (@GreenSock) on CodePen. shuffle() any Array The new shuffle() utility method randomly shuffles the contents of any Array (in place). var array = [1, 2, 3, 4, 5]; gsap.utils.shuffle(array); // returns the same array, but shuffled like [2, 5, 3, 1, 4] Timelines can now repeatRefresh Now timelines support repeatRefresh which makes all child tweens invalidate() and get refreshed when the timeline repeats, meaning their start and end values get re-calculated. It’s most useful for relative, random, or function-based values. For example, if a tween has a value like x: “random(-100, 100)”, each time the timeline repeats x would go to a new random value. See the Pen GSAP repeatRefresh on Timelines by GreenSock (@GreenSock) on CodePen. repeatRefresh skips yoyo’s It seemed a little odd to refresh the values when going in reverse, so now repeatRefresh won’t get triggered for the yoyo phase of the animation. See the Pen GSAP repeatRefresh with yoyo demo by GreenSock (@GreenSock) on CodePen. Smooth handling of complex borderRadius, borderWidth, margin, and padding values GSAP 3.1 accommodates not only simple values like borderRadius: “50%” but also more complex ones like borderRadius: “20px 50% 40px 15px” or borderRadius: “50% 20%” and it animates between them smoothly. The same goes for borderWidth, margin, and padding which can have complex values (top, right, bottom, and left). It will also return complex values correctly via gsap.getProperty(). Plus GSAP works around a Firefox bug that mis-reports certain values like borderRadius. Download today! There are many ways to get GSAP 3.1 - see the Installation page for all the options (download, NPM, zip, etc.) Resources GSAP 3.1.0 full release notes on Github Full documentation Getting started with GSAP Learning resources Community forums Happy tweening!
