kcarp

Thanks for that, i've added some bottom padding to the homepage to remedy the scroll issue. One other issue I am seeing is extra padding being applied to the bottom of pages which are using locomotive scroll / gsap: https://verhaal.netlify.app/about/ useEffect(() => { import("locomotive-scroll").then((locomotiveModule) => { new locomotiveModule.default({ el: document.querySelector("[data-scroll-container]"), smooth: true, markers: false, invalidateOnRefresh: true }); }); }, []) <div className="row align-items-center" data-scroll-container> <div className="col-6"> <h1 className="heading text-center"><span className="animate-heading">{heading}</span></h1> <p className="short-description text-center">{shortDescription}</p> <div className="divider" /> </div> <div className="col col-feature-image" ref={imageRef}> <div className="container-scroll-overflow" ref={scrollRef} > <div data-scroll data-scroll-speed="-1.3"> <GatsbyImage image={featureImage.asset.gatsbyImageData} alt={featureImage.alt} loading="eager" objectFit="cover" className="feature-image" /> </div> </div> </div>

Thanks for the tips, Blake. It still doesn't seem to scrub without setting markers to true. Here is a better example on the current development link: https://verhaal.netlify.app/ For full context, I am trying to mimic the behavior on this site: https://fuzzco.com/ if (typeof window !== `undefined` && location) { gsap.registerPlugin(ScrollTrigger); ScrollTrigger.refresh(); useEffect(() => { var direction = -1 var mod = gsap.utils.wrap(0, window.innerHeight); gsap.set('.container-marquee',{yPercent:100}) var anim = gsap.to('.container-marquee', { yPercent: (100 * direction), ease: 'linear', overwrite: true, duration: 20, repeat:-1, }) function infiniteReverse() { tl.totalTime(tl.rawTime() + tl.duration() + tl.repeatDelay()); } var tl = gsap.timeline({ pause: false, repeatDelay:0.5, onReverseComplete: infiniteReverse, scrollTrigger: { trigger: document.body, start: "top top", // When the top of the trigger reaches the top of the viewport end: "bottom top", // When the bottom of the trigger reaches the top of the scroller markers: false, scrub: true, toggleActions:"restart complete reverse reset play", onUpdate: self => { direction = self.direction gsap.to(anim, { overwrite: true, timeScale: self.getVelocity() / 5, yPercent: (100 * direction), }); }, }, }); }, []) }

Hey everyone, This is my first time working with gsap all together so apologies if something is obviously missing in my setup in advance. I am trying to create an infinite full-page scrolling timeline that is scrubbable. I can't seem to get the timeline to scrub without turning markers on. The CodePen isn't exactly demonstrating this issue properly, however I'm hoping it is obvious from my markup what the issue is. Any guidance on the matter would be greatly appreciated! I am developing inside of React / Gatsby. if (typeof window !== `undefined` && location) { gsap.registerPlugin(ScrollTrigger); ScrollTrigger.refresh(); useEffect(() => { var direction = -1 var mod = gsap.utils.wrap(0, window.innerHeight); gsap.set('.container-marquee',{yPercent:100}) var anim = gsap.to('.container-marquee', { yPercent: (100 * direction), ease: 'linear', duration: 20, repeat:-1, }) var tl = gsap.timeline({ scrollTrigger: { trigger: document.body, start: "top top", // When the top of the trigger reaches the top of the viewport end: "bottom top", // When the bottom of the trigger reaches the top of the scroller markers: true, scrub: true, toggleActions:"restart complete reverse reset play", onUpdate: self => { direction = self.direction anim.timeScale(self.getVelocity() / 5); }, invalidateOnRefresh: true, refreshPriority: 1, }, pause: false, }); }, []) }