kcarp Posted August 12, 2021 Share Posted August 12, 2021 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, }); }, []) } See the Pen vYmPYvr by FWC_Kevin (@FWC_Kevin) on CodePen Link to comment Share on other sites More sharing options...
OSUblake Posted August 12, 2021 Share Posted August 12, 2021 Hi @kcarp Welcome to forums! You're not missing anything obvious, you just stumbled upon a quirk when going backwards. This post gives an explanation and helper function for onReverseComplete. Also, for a smoother transition when changing direction, you can animate the timeScale. gsap.to(anim, { overwrite: true, timeScale: self.getVelocity() / 5 }); 1 Link to comment Share on other sites More sharing options...
kcarp Posted August 13, 2021 Author Share Posted August 13, 2021 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), }); }, }, }); }, []) } Link to comment Share on other sites More sharing options...
OSUblake Posted August 13, 2021 Share Posted August 13, 2021 5 hours ago, kcarp said: It still doesn't seem to scrub without setting markers to true. It's not going to scrub if there's nothing to scroll. You need some scrollbars. That site is listening to wheel and touch events to emulate scrolling. Link to comment Share on other sites More sharing options...
OSUblake Posted August 13, 2021 Share Posted August 13, 2021 And the infiniteReverse should be for your anim, not the scroll trigger. Link to comment Share on other sites More sharing options...
kcarp Posted August 14, 2021 Author Share Posted August 14, 2021 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> Link to comment Share on other sites More sharing options...
OSUblake Posted August 15, 2021 Share Posted August 15, 2021 14 hours ago, kcarp said: Thanks for that, i've added some bottom padding to the homepage to remedy the scroll issue. Just my opinion, but having a scrollbar that can barely scroll is going to confuse people. Be sure to see how it looks on Windows. Like I said, that fuzzco site isn't doing native scrolling. They are using wheel and touch events to emulate scrolling. 14 hours ago, kcarp said: One other issue I am seeing is extra padding being applied to the bottom of pages which are using locomotive scroll / gsap: Locomotive isn't a GSAP product so we can't offer support for it. And if you're using it with ScrollTrigger, you should probably hook it up to a scrollerProxy. 1 Link to comment Share on other sites More sharing options...
Recommended Posts
Create an account or sign in to comment
You need to be a member in order to leave a comment
Create an account
Sign up for a new account in our community. It's easy!
Register a new accountSign in
Already have an account? Sign in here.
Sign In Now