ScrollTrigger | Pinned parent - expand childrens' end value

[ThomasKL]

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?

See the Pen PoXRRqB by Thomassos (@Thomassos) on CodePen

[mvaneijgen]

Hi @ThomasKL welcome to the forum!

 

Do you maybe have a version of your pen with the issue you're facing? Right now there is no animation happening.

 

I have to say these are a lot of ScrollTriggers (I see four!), I've found that you hardly need more than one ScrollTrigger to get the desired effect, so if we can see what you're trying to to there is probably an easy solution. 

[ThomasKL]

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.

[Rodrigo]

Hi,

 

Are you looking for something like this? (better seen in full page):

See the Pen gOzywPd by GreenSock (@GreenSock) on CodePen

 

Hopefully this helps.

Happy Tweening!

[ThomasKL]

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).

See the Pen jOXeJZa by Thomassos (@Thomassos) on CodePen

[Rodrigo]

Hi,

 

One of the issues is that your start and end points are triggering at the same time:

 

Also your example doesn't have any height animations whatsoever so is really hard to have a good idea of what you're trying to do.

 

I strongly recommend you to remove ScrollTrigger completely and focus on getting the animation working as expected first and then add ScrollTrigger to the mix as @Cassie shows in this video:

 

Hopefully this helps.

Happy Tweening!

[ThomasKL]

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). 

[Rodrigo]

Hi,

 

Maybe something like this:

See the Pen rNoQgrW by GreenSock (@GreenSock) on CodePen

 

Keep in mind that the start and end points strings are two different text elements (could be letters or numbers) separated by a single space. Your setup has an extra space:

start: 'top +=' + (cumulativeHeight) + ' 10%',
end: 'bottom +=' + (cumulativeHeight + slide.clientHeight) + ' 10%',

See how you have top[space]+=cumulativeHeight[space]10%? It should be top+=cumulativeHeight[space]10%. Most likely that extra space was causing this.

 

Hopefully this helps.

Happy Tweening!

[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.