aaronmeder

@GreenSock that is amazing - exactly what I wanted to achieve! Thank you for showing up a good way to solve this ?? Let me add this compliment to you and all other users: when I was searching for solutions yesterday and was looking through this forum there were so many posts that showed people helping others very generously and hands-on like this one. This is a fantastic community here! I hope to dig deeper and also be of help in the future

Hi there! Thanks a lot first for creating this library! I am only starting to using it more often but love how easy it can make powerful, performant transitions. This is my first time using ScrollTrigger however and I am unsure how to use it in a good way for my use case. I've spent a few hours on trying to put this together but did not get it fully working and hope that some of you can guide me in the right direction. What I am trying to achieve Once Section Two ('section .two') reaches the middle of the viewport it should be pinned. After that the text elements on the right of Section Two ('.stepped-animation .single-step') should fade in / out one after another when I scroll further. There should be a "direct" transition to the next text element, meaning for example it shouldn't stop during animation at opacity 0.5 of a text element (I tried to achieve this using snap). The last one should stay visible when I scroll on. After the last text element is shown and the user scrolls further the Section Two should be unpinned and it should scroll on further to the next section (no need to snap to the next section, just go on). What I could do so far As you can see in the codepen I've somehow got it to work, but: I've manually added the transitions for the text elements and durations (see stepsTimeline) which is not a plausible way The number of text elements can vary. Somehow the whole Section Two now also snaps in place, which is not really what I intend. It should just normaly scroll into place until it is pinned without the snapping. Less important, maybe a second question: I would like to get rid of the white space above / below the pinned section but also do not want the following content to go under the pinned section (what happens when I disable pinSpacing). A few thoughts on how I tried to achieve the solution Two scroll triggers: - one that pins / unpins the Section Two - one that goes through the text elements and shows / hides then when the time is right I feel like there is probably a better way on how to setup the whole thing and maybe use ScrollTrigger it in another way combined with timeline - but I cannot see it ? Thanks for any help! Aaron