elegantseagulls

I call this the Nesting Doll Timeline Technique: https://codepen.io/ryan_labar/pen/PoWxveg

I'd check to make sure your kill function for ScrollTrigger is working as intended. If you turn markers on, you can usually see if they are being added/duplicated and not removed, otherwise, try to console.log the ScrollTrigger instance after kill it in your garbage cleanup. If this is the case, you may need to give your trigger an ID then kill it like: ScrollTrigger.getById("myID").kill();

This depends entirely on your setup.... A codepen demo would be very helpful for this: But if you are positioning the ball via a scrubbed ScrollTrigger tween, you could do something like scrub: 1, instead of scrub: true, on the delayed ball.

Everything looks pretty good to me! Personal preference: I break and indent the first .to in the tl.to: const tl = gsap.timeline(); ... tl .to(".plane", { duration: 1, autoAlpha: 1, }) .to(...); Note: this will not change anything from a performance standpoint, just readability. Happy tweening! You could also just do: gsap.timeline({...}) .to('.el', {...}) .to(...);

Hi @David Jumbo, Could you please set up a codepen or similar demo that shows the issue? It's nearly impossible to debug without seeing any of the code you're using.

Why not just use the img positioned as such that it replaces css background? That way you gain the benefit of potentially better seo and accessibility and responsive sizes. With object-fit, I find I rarely need to use background-image any more.

This is a great resource for those who are trying to break up with jQuery, or can't find a stackoverflow solution that doesn't include it: http://youmightnotneedjquery.com/

I'm not seeing the issue on my machine. What browser are you using?

This seems like it's a dev env issue due to hot reloading and not a gsap issue, and I can't imagine it'll show up in produciton. If you want the animation to start from the beginning, you'll likely want to make a function that plays the timeline/tween from 0, or kills and resets the tween on refresh. Otherwise, you can use .fromTo to avoid this.

I won't add it to a project, however if it's something that includes it by default, like Wordpress, I'll sometimes leverage it, but at this point I find it easier to read/follow vanilla JS. I've forgotten a lot of the utilities that jQuery uses, so it can take a bit to jog the memory for me, too.

For this, is there a specific reason you want to use a fromTo animation? If you just use .to, it works just fine. What's happening is, in your forEach, the entire animation up at once, so all of the initial y values in the from are set to 0. To avoid this you could measure them all and set them via index as you to in the to part of your animation.

Hi @Michael31, For your particular markup, you're missing: pinSpacing: false,

Hi @D.Cus, What they're doing for logic is using GSAP's quickSetter tool (more info on that here: https://greensock.com/docs/v3/GSAP/gsap.quickSetter()) to track the position of the 'ball' on its motionPath (instead of mouseposition like in the quicksetter example) and apply that to the background element to center it to the ball's location on a slight delay. It's a pretty clever approach, really. Another approach would be to fix your ball to the center of the viewport and just transform your background element along the motionPath (this element would contain your drawS

Hi @Michael31, You'll likely need another ScrollTrigger instance to tell GSAP when the section is leaving the viewport. Otherwise, you could set up your animation to scrub all the way to the end of your section, with this you'd want to shorten the duration of the initial bg-color animation and adding a blank tween to just finish the scrub, then run a 'back-to-normal' tween onLeave or onComplete

Another option would be just to duplicate your content and transform the whole container to -50% and just repeat that: https://codepen.io/ryan_labar/pen/RwoPbdb