Progressing a trigger across sections

[Trynix]

Hi everyone!

 

I'm progressing a value across sections using scroll triggers (first section value range is 1 to 2, second section value range is 2 to 3, etc) as it will tie up with another webgl animation.

 

I have two questions I would greatly appreciate thoughts on:

- What would be a best practice for this approach? I have attached a codepen example to show my current approach.

- Is there a way to manage the distribution of the scrolltrigger progress? For example, for the first section, I'd like the scrolltrigger progress value to go from 1 to 1.5 in 33% of the scroll, then stays at 1.5 for 33% of the scroll, and then go from 1.5 to 2 in the last 33% of the scroll (so basically speeds up between 1 to 1.5 and between 1.5 to 2, but spends more time on 1.5 exactly). Will I need to create multiple scrolltriggers with different start/end values per section to have this effect, or is there a smarter approach?

 

Thank you very much

See the Pen mdqoMRR by mazayadigital (@mazayadigital) on CodePen

[mikel]

Hey @Trynix,

 

I'm not sure what it's supposed to be in the end.
You can define clear conditions.
And GSAP mapRange() will help you:
Maps a number's relative placement within one range to the equivalent position in another range.

 

Hopefully it helps.

Happy tweening ...

Mikel