Jump to content


Sections progress by each height

Go to solution Solved by mvaneijgen,

Recommended Posts


how to achieve sections' height to handle each relative progress bar with scrolltrigger?

I did added each progress element its own class, to make things easier, and avoiding a foreach(or for of)... but even this way I cant found a solution actually.

Thanks for any help

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

Link to comment
Share on other sites

  • Solution

The progress element has a standard value of 0 to 1. You have set your value to 100, which makes it start at 1 and move to 100, but 1 is already 100% . I've updated your value from 100 to 1 and this fixes the logic, but you could also update you min and max values in the data-attr of the elements if you want to use values from 0 to 100.


See the MDN docs for more info about the progress bar element https://developer.mozilla.org/en-US/docs/Web/HTML/Element/progress


See the Pen jOKNebd?editors=1000 by mvaneijgen (@mvaneijgen) on CodePen


Edit: You can make your code even easier if you scope your elements to the container they are in. Then you just need one loop to control all the sections.


See the Pen vYrBVXe?editors=1010 by mvaneijgen (@mvaneijgen) on CodePen

  • Like 4
Link to comment
Share on other sites

@mvaneijgen sorry again,  how to let the progress count also another gsap animation inside any of the containers loop?

In my case I added a before/after image for testing, as u can see the progress goes to its way without calculating the pinned animation below, which obviously makes the section higher.

Thanks again

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

Edited by Dennyno
added codepen link
Link to comment
Share on other sites

The order of your Javascript matters, because your second ScrollTrigger manipulates the height it will throw off the calculations of the frist ScrollTrigger because it was already done calculating. 


Or you can call .refresh() on all your ScrollTriggers when you know they are done calculating. https://greensock.com/docs/v3/Plugins/ScrollTrigger/refresh()


See the Pen rNKNmBg?editors=0010 by mvaneijgen (@mvaneijgen) on CodePen

  • Like 2
  • Thanks 1
Link to comment
Share on other sites

Sorry for opening again this thread.

Whats the logic to achieve the same progress, but horizontally?

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

I tried also with using "horizontal:true" with no result.

I used a progress element, so as u said needs to go to value 1 - but horizontally by item css scrolling / snapping (and it's not working).

But also using a basic span element that should scaleX seems not working.

Thanks @mvaneijgen

Link to comment
Share on other sites

@Dennyno because this is a new question and this topic is already marked as solved, I would start a new topic, but your progress bar is working right? 


I have the feeling you want to move .sez_che_scrolla to the right horizontally and at the same time grow the progress bar? I'm no pro at ScrollTrigger and snapping, But I do know ScrollTrigger is just animating something on scroll, so the best thing to do with ScrollTrigger is to remove it! This seems counter intuitive, but ScrollTrigger is just animating something on scroll, so just focus on the animation at first and only when you're happy with the animation add ScrollTrigger back in.


See the Pen dyKoZEe?editors=0110 by mvaneijgen (@mvaneijgen) on CodePen

Link to comment
Share on other sites

Hi, thanks!

I was trying to increase the progress while scrolling between items using basically overflow-x:scroll and the CSS native scroll..
gonna open a new thread so... thanks meanwhile :)

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.