ThomasKL

Hello @Rodrigo, That was it! Now each slide behave as I expect it to behave on scroll. Thank you very much for your time and support.

Hello @Rodrigo, thank you very much for your answer. I just realized that I must have formulated my initial issue description wrong becasue this conversation is going in the wrong direction (that is not a criticism, just honest observation). English language is not my native language, so I think what make perfect sense to me in my head doesn't translate that well on the paper ? ? ? and I'm trully sorry for that. The animations are working fine for me, they are not the issue. I also now understand better your initial solution to my problem - I am not trying to change nor animate the physical height of the slides' (in the initial example: 'slide-0', 'slide-1', 'slide-2'). What I'm having trouble with is adjusting the (what I call) scroll height without changing the physical height of the DOM element (attached image shows the desired behaviour). I would like to 'push' the end trigger and start trigger for next slide further down, so it would be, let's say, 125% of the slide's actual height. And updating the 'bottom' parameter for the slides messes up the whole structure for me (as seen in my first post's codepen).

Hello @Rodrigo, thank you for your answer and sorry for coming back to you so late. I tried to implement your solution to my problem but I still wasn't able to make it work. The height of each slide is still the same (and I need to be able to expand its "scrolling height", as I did that with the parent pinned slider - where I changed the 'bottom' value). https://codepen.io/Thomassos/pen/jOXeJZa

Hello @mvaneijgen, I have cut out most of the code from my project to have the small and clean example, but there are some custom animations happening for each of the slides. The codepen example is actually the problem I have. As you can see in it, right now, the markers for slides are starting one after another - which is not the behaviour I want. The expected behavior you can see once you modify the 'end' parameter in the forEach loop from '+=125%' to 'bottom'. I want the second slide's start marker to be aligned with first slide's end marker, same logic for other slides too. I cannot use 'bottom' value, becasue I need the scrolling "to take" much longer than the content of each slide. That's why I modify the value of the 'end' parameter.

Hello, I have a small issue that I wasn't able to figure out with examples available on greensock page. I'm using gsap library with ScrollTrigger and in my project I am trying to expand the scroll height of slides (blue boxes in the codepen) with "end: +=125%" but I would like to have the start/end triggers to be in the same chronological position just like when the value for "end" is set to "bottom" (Meaning: second slide's start position is in the same place as end of first slide. And right now the start positions are happening one after another). Is that behaviour possible with my current structure?