mihi Posted March 14 Share Posted March 14 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 Link to comment Share on other sites More sharing options...
mvaneijgen Posted March 14 Share Posted March 14 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! 1 Link to comment Share on other sites More sharing options...
GreenSock Posted March 14 Share Posted March 14 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). Link to comment Share on other sites More sharing options...
Recommended Posts
Create an account or sign in to comment
You need to be a member in order to leave a comment
Create an account
Sign up for a new account in our community. It's easy!
Register a new accountSign in
Already have an account? Sign in here.
Sign In Now