Jump to content
Search Community

Horizontal progress by section native scroll behaviour

Dennyno test
Moderator Tag

Recommended Posts

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

Link to comment
Share on other sites

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!

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.
×
×
  • Create New...