Leaderboard

Hi flim! You just need to add invalidateOnRefresh: true to your ScrollTrigger, and put the calculation inside the start function. ScrollTrigger will fire that function on refresh so you don't have to add resize listeners. GSAP ScrollTrigger.resize() (codepen.io)

I fiddled around with it a bit and found it worked best to tween on / set the groups instead of the paths - just had to make sure every group inside the #bounce had a background rect - as i found it worked this way, I didn't look further if there was a better solution - but it works and looks quite easy. https://codepen.io/akapowl/pen/a3134b964c569b9fffead620eb78cec7

Hey @dr.Pxl Try adding invalidateOnRefresh: true to your ScrollTrigger - that should do the trick. From the ScrollTrigger documentation: invalidateOnRefresh Boolean - If true, the animation associated with the ScrollTrigger will have its invalidate() method called whenever a refresh() occurs (typically on resize). This flushes out any internally-recorded starting values. https://codepen.io/akapowl/pen/2827a530689a5a53049cc37b058956ab

Wow amazing! That was it. You awesome @akapowl

Hi there! I assume you're using the latest version - since GSAP 3, ModifiersPlugin is included automatically, so you just need to load GSAP's core. https://greensock.com/docs/v3/Installation

Woow thanks a lot for your reply. I thought i used auto in the .to() but maybe not I tried percentage instead. Thanks that's very useful !!

Hello @chintan w3nuts - welcome to the forums. I am not sure I understand what exactly it is you are asking about, but you might want to take a look at the smoothScroll() example in the .scrollerProxy() docs - it is a bit newer than the approach above and takes care of some more things, like trouble-free pinning. Hope it helps. https://codepen.io/GreenSock/pen/gOgWELo

Welcome to the forums @fede I couldn't even get your demo to scroll to begin with, so there is no animation. I noticed that you are using a lot of older GSAP syntax, and would recommend checking out our Migration Guide. And for working with Lottie, I would recommend checking out our Lottie helper function. https://greensock.com/docs/v3/HelperFunctions#lottie Perhaps you can fork this demo and show your issue since we know this one works. https://codepen.io/GreenSock/pen/QWdjEbx

I see, just learned the animation property from your codepen. Thanks!

Hello again! I took the updated code you provided and forked a new pen. I made a few tweaks for timing to get the background color transitions closer to what I am aiming for and it is looking way closer to what I wanted. I'm going to keep tweaking until I get the timing a bit smoother, but this is pretty close to what I was attempting to achieve. https://codepen.io/cssgirl/pen/ExvKzvB Many, many thanks @Cassie!

Hello @flim Is there any particular reason you need the tween to be in the onEnter callback? If you need to stick to the .create() method (vs adding a scrollTrigger to that tween itself - the commented out part in below example) you could just hook up a tweeen or timeline via ScrollTrigger's animation property. https://codepen.io/akapowl/pen/00ec094aec7abe63df27789734f88186

Hello @flim That's quite testable - short answer: it does aso work on scrollTrigger inside a gsap.to() Click the body to change the height of the .bg in this following example and see how the markers adjust because of the .refresh() that is being called. https://codepen.io/akapowl/pen/16cfd8e6cedfd6ef69c32da5664e1895

Hi there CSSgirl - could you make this pen public so we can fork it? In the interim I might do something like this? I'll check and simplify it down when I can fork your pen. ScrollTrigger.defaults({ toggleActions: "play none none reverse" }); gsap.registerPlugin(ScrollTrigger, ScrollToPlugin); const verticalSections = gsap.utils.toArray("[data-bg-color].content"); const horizontalSections = gsap.utils.toArray("[data-bg-color].panel"); // Horizontal Scroll Section let scrollTween = gsap.to(horizontalSections, { xPercent: -100 * (horizontalSections.length - 1), ease: "none", immediateRender: false, scrollTrigger: { trigger: ".container", pin: true, start: "top top", scrub: 1 } }); horizontalSections.forEach((section, i) => { gsap.to("body", { duration: 1, backgroundColor: section.getAttribute("data-bg-color"), scrollTrigger: { trigger: section, containerAnimation: scrollTween, // magic! start: "left center", end: "right center", markers: true, } }); }); verticalSections.forEach((section, i) => { gsap.to("body", { duration: 1, backgroundColor: section.getAttribute("data-bg-color"), scrollTrigger: { trigger: section, start: "top center", end: "bottom center", markers: true, } }); }); More on containerAnimation here - Thanks!

Hello @AnimatiCSS Unfortunately, ScrollTrigger's pinning will not work with sections that have locomotive-scroll's data-scroll-section attribute, as when using that data-attribute, locomotive-scroll will work its translates for the smooth-scrolling on those sections and thus will inevitably tell those sections to keep on moving/translating, so there will be conflicting behaviour between locomotive-scroll and ScrollTrigger, that ScrollTrigger can not do much about.