[Stopping a repeating loop on hover]

Thanks @Trapti! Brilliant

[Stopping a repeating loop on hover]

Hey all!

 

Was hoping someone could tell me why tl.pause and tl.play on my button isn't affecting the repeating loop. 

 

Thanks!

See the Pen XWzByEN by theRemy79 (@theRemy79) on CodePen

[Vertical scroll for divs inside a container (with multiple containers on the same page)]

Yes Thanks @OSUblake!

[Vertical scroll for divs inside a container (with multiple containers on the same page)]

5 hours ago, OSUblake said:

A minimal demo would really help. And did you change it in both places, the from part and to part?

 

Ahh yes of course, thanks here's the demo that was a fork from above - 

See the Pen bGoQZKe by remy79 (@remy79) on CodePen

[Vertical scroll for divs inside a container (with multiple containers on the same page)]

8 minutes ago, OSUblake said:

Did you try the inverse? from 100 would be on the right, to -100 would go to the left, so switch the signs.

 

 

 

Sorta, I tried this:

 

xPercent: i ? -100 : 0

 

but for some reason only two of the panels scroll instead of the 5, but yeah its scrolling in the right direction now.

[Vertical scroll for divs inside a container (with multiple containers on the same page)]

@GreenSock

 

In your example above from codepen if you change the yPercent to xPercent you get the effect of right to left instead of down to up, then I assumed if you changed xPercent 1 ? 100 : 0 to xPercent 1 ? 0 : 100 but that doesn't seem to work.

 

panels.forEach((panel,i)=>{
      // first panel should start already in place, and last panel should end in the center. 
      tl.fromTo(panel, { 
        xPercent: i ? 100 : 0
      },{
        xPercent: i === panels.length - 1 ? 0 : -100,
        duration: i === 0 || i === panels.length - 1 ? 0.5 : 1,
        ease: "none",
      }, "-=0.5");
    });

[Vertical scroll for divs inside a container (with multiple containers on the same page)]

On 7/16/2021 at 1:00 AM, GreenSock said:

Nope. Please read this: https://greensock.com/docs/v3/Plugins/ScrollTrigger#scrub

 

All you need to do is change the "end" value. So if it's "+=100%" right now, just make that number bigger. You can use px if you want, like end: "+=3000px"

How would you reverse the animation from "right to left" to "left to right" instead?