Pin area too long / too much scrolling after finishing the animations

[mihi]

We tried to achieve something like this https://www.ueberbild.de/leistungen in the middle of the page

 

 

Our timeline consists of two tweens that should take place simultaneously:
1. change the clip path of the images
2. change texts

The problem is that after the animations are finished, it can be scrolled much longer.

We would like the scrolling to stop after the animation. It seems that the pin area is too long.

We have already played around with the end values, but this only changes the speed of the animations

I think we have a small misunderstanding here and would be very grateful for help

 

See the Pen OJGRmwY by meeheee (@meeheee) on CodePen

[mvaneijgen]

Hi @mihi welcome to the forum!

 

There seems to be some logic issue in your tween here. I've disabled ScrollTrigger and installed GSDevTools and as you can see at the mid point of the animation nothing happens anymore (around the 4 second mark). 

 

See the Pen NWmRgJg?editors=0010 by mvaneijgen (@mvaneijgen) on CodePen

 

I see you're using a lot of forLoops and if statement which is great, but I see a lot of people making this mistake (and I also do it often) and this is why I've written the following post. When this happens to me I like to take a step back and make it simple, just write out the animation you want to happen by hand and see if the logic is correct with your loops, doing this will probably help you fix your own issue. 

 

I've looked at your code and I can't see anything obvious which is going wrong, so I hope the post helps you debug and also just start console.log() values to make sure they are what you think they are. 

 

 

Hope it helps and happy tweening! 

 

Edit: I'd looked some more at your code and indeed the logic with if statements and loops is not correct which is throwing everything off. We kinda have sort of forLoops built in GSAP in the form of staggers, see https://gsap.com/docs/v3/GSAP/Tween?_highlight=stagger#staggers 

 

And to get a better understanding of them and what probably also helps for the effect you're going for check out this amazing tutorial by our own @Carl

 

 

 

I was wondering, so I restructured some of the code. I still highly recommend checking all the resources I've shared, I really think it will help you understand how things works under the hood which will allow you to making another animation in the future so much easier, but If you want a hint check out this. 

 

Again hope it helps and happy tweening!

[GreenSock]

Yep, it looks to me like logic issues in your code, most likely this: 

`-=${images.length * 0.475}`

Not sure what you're trying to do there, but it's causing overlaps as well as negative startTime values which must get converted (you can't have tweens in a timeline that start BEFORE the start of the timeline, so they simply get adjusted forward along with anything else in the timeline at that time so that no children start before 0).