mjray

Thanks for all the help @Carl that makes sense! I think i'll just disable snapping and should be okay with scrub at true for now.

Thanks @Carl - sorry for the confusion. I would like to use the set() function and not have any scrolling when clicking a link, but when simply scrolling down the page (especially fast scrolling) I want animations to catch up so they don't animate and go by too fast, which I was doing by setting the scrub to 1.5. I updated the demo and removed the duration and ease properties of the set() function but it's not working consistently, sometimes it immediately scrolls to the bottom of the page. If you scroll to the top of the page a few times and click the link you should see it happen. Thanks again! Really appreciate it! https://codepen.io/mjray/pen/wvpzBav

Hey thanks so much @Carl! Really appreciate the help. I'm guessing it's not possible to do this with scrub enabled? I was able to get this working, but it created a new weird issue where the scroll position unexpectedly scrolls to the wrong position for longer pages with lots of sections. It happens intermittently, so you may need to reload a few times to see it, but basically if you click the link to Section 5 from the top of the page in codepen below you'll see that it goes to section 5 and then scrolls to the bottom of the page. It seems to work when the section is close by, but if it needs to skip a few sections it gets wonky. Any ideas what could be going on? https://codepen.io/mjray/pen/wvpzBav

Hey All - I'm using GSAP timeline to animate between some fixed sections on a site and i'm trying to do anchor linking to sections but I don't want to see every other section go by when clicking on a link - is there any way to do this? Thanks! MJ

Thanks @GreenSock I'll check that out!

Alright was able to figure it out! The big issue for me was that I was using different durations in the gsap.to function which was causing all sorts of weird issues - I assumed the duration was the duration of scrolling time but it looks like it changes the scroll position value so it must work differently - not sure why but setting it to 1 does the trick. $('.nav-link').click(function() { var st = timeline.scrollTrigger; var pos = st.start + (st.end - st.start) * (timeline.labels['section'] / timeline.duration()); gsap.to(window, {scrollTo: pos, duration: 1}); });

Hey All - I've been combing through forums for a while but haven't found a way to do this. Is it possible to scroll to a timeline label with GSAP Timeline and ScrollTrigger and the ScrollTo plugin? The way I have my animations setup are as fixed position elements all on top of each other and the ScrollTo plugin doesn't seem to work with this setup. I'm hoping I can find a way to scrollto labels in the timeline as a solution. Thanks so much, MJ

Awesome, that did the trick!

Awesome, thanks for this info @GreenSock - that's really helpful. I have a related question about ScrollTrigger - I was wondering if it's possible to add smoothing to scroll animations using ScrollTrigger - for example if a users scrolls really quickly to have the animation catch up in a smooth way. Is there a way to do that for Lottie and for regular timeline events with ScrollTrigger? Maybe smoothing isn't the right word, hopefully that makes sense.

Hey All - I'm using ScrollMagic and Timeline and Lottie and I cannot for the life of me figure out how to reverse this animation - anyone know how this would be done? The below animation works to animate the SVG forwards, but cannot figure out the reverse. var controller = new ScrollMagic.Controller(); var home_section_1 = new TimelineMax(); var animation = bodymovin.loadAnimation({ container: document.getElementById('home-welcome-lottie'), path: 'https://uploads-ssl.webflow.com/61967dbb50eec57a4e7fde97/61c24a15adb4d67e7bc1acb8_Homepage%20Hum%202.json', renderer: 'svg', loop: false, autoplay: true, name: "Hum", }); home_section_1.to({frame:0}, 1, { frame: animation.totalFrames-1, onUpdate:function(){ animation.goToAndStop((Math.round(this.progress() * 150)), true) }, ease: Linear.easeNone }); new ScrollMagic.Scene({ triggerElement: '.home-welcome-content', triggerHook: 'onLeave', duration: 1000, offset: 0 }).setPin(".home-welcome-content").addTo(controller) .setTween(home_section_1);