Jump to content


Horizontal progress by section native scroll behaviour

Moderator Tag

Recommended Posts


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.


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

Link to comment
Share on other sites

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? 

Link to comment
Share on other sites



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!

Link to comment
Share on other sites


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

  • Like 2
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.