Jump to content
Search Community

Timeline + FullPage ScrollTrigger + Scrub + Repeat

kcarp test
Moderator Tag

Recommended Posts

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

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
});

 

  • Like 1
Link to comment
Share on other sites

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

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

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.

 

image.png

 

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.

 

 

 

  • Like 1
Link to comment
Share on other sites

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 account

Sign in

Already have an account? Sign in here.

Sign In Now
  • Recently Browsing   0 members

    • No registered users viewing this page.
×
×
  • Create New...