Stefanp

Hey there! I was going through the stagger docs and I'm confused about advanced stagger easing. Why is the advanced stagger easing the opposite of a regular easing outside of an advanced stagger object? When I apply a power3.easeInOut inside a normal tween, the expected behavior is: Slow (start) - Fast (middle) - Slow (end). gsap.to(".box", { ease: "power3.inOut", }); But when this easing is applied to the stagger object I see the reverse and the stagger behavior as Fast (start) - Slow (middle) - Fast (end). stagger:{ ease: "power3.inOut", } At first, I thought it was my code, but the same behavior is visible in the greensock stagger documentation when you turn on the "power3.InOut" in the interactive example. Could someone explain why this is the case and how I could potentially reverse this? Thanks!

Nice solution. However, in my case, I'm actually tweening an array of objects. So I won't be able to utilize the nth-child css method. But at least now I know i need to fiddle around with constructing a filter for the selector

Hi, The default behavior of a stagger is that it will tween the objects one by one (like shown in the codepen). Is it also possible to use a single tween to stagger in pairs of N. For example, tween the first two elements together, then the next two elements etc. etc. I have a thousand elements and I want to move them in little groups around the screen. Thanks!

That worked! Thanks a million. Can you briefly explain why I should be targeting the attributes and what the difference is with targeting the y property? I'm also curious how you could then set up your tween to let the bars return to their individual original y position.

What i'm trying to achieve is that all the <rect> elements in the svg move to position y:250. I thought it would be as straightforward as gsap.to(".bars" { y:250}). But this applies the tween to the bars as a group. I'm probably being very stupid here, but I couldn't find anything to put me on the right track. Can't I use a class selector for this and do I need individual tweens for each bar??

Thanks for fixing the codepen and clearing things up! I see where you're getting at with the logic issue. My first thought would be to disable scrolling until the animation has finished. Need to fiddle around a bit to see if I can make it work... Thanks again for the help

Hi all, New here and I've absolutely loving Gsap and the scrolltrigger plugIn. However I'm struggling to combine a regular animation followed by a scrubbed animation in the same timeline, pinned to the same trigger. The desired outcome is to scrub the red square to the right, after the (non scrubbed) orange square animation is finished. I'm unsure what the 'start' value should be. I tried: start: () => tl.scrollTrigger.end, // function-based value But that didn't work... Can anyone tell me what I'm missing? Thank you!