Dennyno Posted October 24, 2022 Share Posted October 24, 2022 Hi, 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 More sharing options...
Solution mvaneijgen Posted October 24, 2022 Solution Share Posted October 24, 2022 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 4 Link to comment Share on other sites More sharing options...
Dennyno Posted October 24, 2022 Author Share Posted October 24, 2022 OH god! As usual lost myself in a drop of water! Thanks @mvaneijgen 2 1 Link to comment Share on other sites More sharing options...
Dennyno Posted October 25, 2022 Author Share Posted October 25, 2022 (edited) @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 October 25, 2022 by Dennyno added codepen link Link to comment Share on other sites More sharing options...
mvaneijgen Posted October 25, 2022 Share Posted October 25, 2022 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 2 1 Link to comment Share on other sites More sharing options...
Dennyno Posted October 28, 2022 Author Share Posted October 28, 2022 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 More sharing options...
mvaneijgen Posted October 28, 2022 Share Posted October 28, 2022 @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 More sharing options...
Dennyno Posted October 28, 2022 Author Share Posted October 28, 2022 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 More sharing options...
Recommended Posts
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 accountSign in
Already have an account? Sign in here.
Sign In Now