Resuming ScrollTo animation after some manual scrolling

[joeworkman]

If you have a look at https://www.foundationstacks.com, there is a "Loved by Users" section that scrolls horizontally using GSAP. If you hover over it, it will pause. You can then also manually scroll horizontally at your leisure. When you mouse-out, I would like to restart the animation at the current position. How can I set the timeline to restart at a defined position, instead of seek to a point in the timeline before I resume the animation?

 

const tl = gsap.timeline({
    repeat: -1,
    repeatDelay: this.options.delay,
    paused: true,
    scrollTrigger: {
        trigger: this.container,
        onEnter: () => tl.play(),
        onEnterBack: () => tl.resume(),
        onLeave: () => tl.pause(),
        onLeaveBack: () => tl.pause(),
    }
});
const easing = this.gsapEasingFunction(this.options.easeFunc,this.options.easeCurve);
tl.to(this.container, {duration: this.options.timing, scrollTo:{y:0, x:"max"}, ease:easing});
tl.to(this.container, {duration: this.options.timingBack, delay: this.options.delay, scrollTo:{y:0, x:0}, ease:easing});

// hover pause
this.container.addEventListener("touchstart", () => tl.pause());
this.container.addEventListener("mouseenter", () => tl.pause());
this.container.addEventListener("mouseleave", () => tl.resume());

 

[joeworkman]

This got me really close but perfect. I am open to better solutions. I replaced the event listeners with the following... 

 

// loop + hover pause
this.container.addEventListener("touchstart", () => {
    tl.pause();
    this.scrollState = this.container.scrollLeft;
});
this.container.addEventListener("mouseenter", () => {
    tl.pause();
    this.scrollState = this.container.scrollLeft;
});
this.container.addEventListener("mouseleave", () => {
    if (this.scrollState != this.container.scrollLeft) {
        const progress = (this.container.scrollLeft/(this.container.scrollWidth-this.container.offsetWidth))/2;
        tl.progress(progress);
    }
    tl.resume();
});

 

[OSUblake]

Hi @joeworkman

 

Setting the progress like you have is probably the best solution, although I'm a little unsure about your calculations. Not saying they're wrong. Just that I can't tell without looking at a demo.

 

Any reason you need it to be scrollable? Whenever I see something like that, I expect it to be draggable. When using a mouse wheel, it's hard to tell that you can scroll it because you would need to hold shift.

 

 

[joeworkman]

If you are on a trackpad or touch, it works like a charm. I never thought about mouse users to be honest. I have not used a mouse for probably 12 years. 

 

I published the new version just a few mins ago. The calculations are pretty decent. Sometimes, it stutters a pixel or two when it restarts. I assume that is round errors between GSAP and my calculation. I am not sure why they are exact. I am pretty happy with it though.