Horizontal progress by section native scroll behaviour

[Dennyno 42 Likes (Newbie)]

Hi,

how to increase the progress value by the native horizontal scrolls snapping percentage?

Example 10 elements = 100%  and get progress width by the horizontal scrolling.

I tried also using "horizontal:true".. but I can't find a working solution.

Actually works by default vertical scrolling, while I need to get values from inner items.

Thanks
 

See the Pen jOKPwxN by DedaloD (@DedaloD) on CodePen

[GreenSock 18,586 Likes (Superhero)]

Sorry, but I don't understand your question. I read it at least 4 times and I'm still rather lost. Do you have a GSAP-specific question we can help with? 

[Rodrigo 5,415 Likes (Superhero)]

Hi,

 

Mixing vertical and horizontal scrolling and trying to create an animation using ScrollTrigger is not something I would recommend (I haven't even tried to be honest). Is far better to use a Container Animation with snapping, which will work if your horizontal elements have a percentage width. You just have to tinker with the math in order to find a reliable way to get the snapping values.

 

Horizontal Snapping:

See the Pen YzygYvM by GreenSock (@GreenSock) on CodePen

 

Another example:

See the Pen yLjdLgK by GreenSock (@GreenSock) on CodePen

 

Let us know if you have more questions.

 

Happy Tweening!

[akapowl 5,222 Likes (Superhero)]

 

Here is how you can set up a ScrollTrigger on a native horizontal-scrolling section, scrubbing the value of your progress element from 0 to 100, depending on scroll-progress of that horizontal-scrolling section - if that is what you were asking.

 

Most important besides a working setup and setting the ScrollTrigger to horizontal: true;

Don't forget to set the proper scroller and trigger elements.

 

See the Pen VwdLoMq by akapowl (@akapowl) on CodePen