Horizontal scroll and toggleActions

[Omnia]

Hi,

I'm new to gsap so I'm not sure what's causing the animation to play only once in this demo despite of (toggleActions: "restart pause resume reset")

The horizontal scroll trick here is having 2 containers and rottating the inner container so it scroll horizontally. *I hopw you see what I mean in the codepen

any suggestions? 

See the Pen gOrMBLL?editors=0110 by Omnia- (@Omnia-) on CodePen

Edited August 18, 2020 by Omnia
mistake in codepen

[ZachSaucier]

Hey Omnia and welcome to the GreenSock forums. I think you're a little confused about how ScrollTrigger works.

 

Your first ScrollTrigger (created by the ScrollTrigger.create() method) is doing absolutely nothing in your pen other than creating some markers that don't actually affect anything. Then you're creating a new tween with another ScrollTrigger that is based on the vertical scroll position.

 

What I think you're trying to do is combine the two into one ScrollTrigger so that the animation plays when the container is scrolled horizontally, correct? However, your transforms make doing this a lot more complicated - why are you setting things up this way? 

 

Here's how I'd set it up:

See the Pen xxVOMZB?editors=0100 by GreenSock (@GreenSock) on CodePen

[Omnia]

It worked perfectly but with a horizontal scroll movement, so I add the function (gsap.utils.toArray) to fix it. The problem is that now I can scroll horizontally but the color animation is not working anymore

Thanks a lot for your reply

See the Pen vYGXYxe by Omnia- (@Omnia-) on CodePen

[ZachSaucier]

If you're going to fake the horizontal scroll then you can't use horizontal: true. You instead need to use the actual offset position of your element:

See the Pen gOrwOjd?editors=0010 by GreenSock (@GreenSock) on CodePen

[Omnia]

You're a wonderful human being. Thank you !