theodieu Posted October 10, 2020 Share Posted October 10, 2020 Hello, I'm new with gsap/ScrollTrigger. I'm trying to animate the sections of a page when they enter the screen, and then when they leave the screen. It works well when they enter, but I don't get them to work when they leave... See the codepen it will speak by itself. What am I doing wrong? And another little detail : the section is "jumping" when the first ScrollTrigger reaches the end of the pin. Why? Thank you! See the Pen pobJoyq by theodieu (@theodieu) on CodePen Link to comment Share on other sites More sharing options...
theodieu Posted October 11, 2020 Author Share Posted October 11, 2020 To give more precision, the problem seems to be connected with having 2 animations for the same element: if I remove the first animation, then the second one works... See the Pen gOMpRVj by theodieu (@theodieu) on CodePen Link to comment Share on other sites More sharing options...
ZachSaucier Posted October 12, 2020 Share Posted October 12, 2020 Hey theodieu and welcome to the GreenSock forums. Sorry for the delayed response. I believe there's a bug in ScrollTrigger related to your y transform and pinning. We're investigating the issue and will get back to you. 1 Link to comment Share on other sites More sharing options...
theodieu Posted October 12, 2020 Author Share Posted October 12, 2020 Thanks! Link to comment Share on other sites More sharing options...
ZachSaucier Posted October 12, 2020 Share Posted October 12, 2020 There's a couple of main issues at play here: Your end position for the first ScrollTrigger is after the start of your second ScrollTrigger. Thus they conflict and there's a jump. Even if you fix 1, the code will still not work because your first ScrollTrigger's start position is before a scroll position of 0. To fix that, simply use a start of "top top" or add some space before the first ScrollTrigger. I did that with padding in the demo below but you could do it in a whole lot of ways. Here's how I'd set it up. In general it's a good idea to use a container element if you're going to use ScrollTriggers and y translations or transforms: See the Pen GRqpgVa?editors=0010 by GreenSock (@GreenSock) on CodePen Side notes: Avoid using top/left. They aren't performant to animate. Use y instead (which makes use of transforms). You don't really need jQuery for this sort of thing. 2 Link to comment Share on other sites More sharing options...
theodieu Posted October 13, 2020 Author Share Posted October 13, 2020 Great! Thank you so much for the detailed explanation, and the extra tips! It all works well now. If I understand well the issue 1 you mentioned (please correct me if I'm wrong) : animations of the same element should not overlap. If for any reason I want them to overlap, would using timeline solve the issue? Link to comment Share on other sites More sharing options...
ZachSaucier Posted October 13, 2020 Share Posted October 13, 2020 4 hours ago, theodieu said: animations of the same element should not overlap. If for any reason I want them to overlap, would using timeline solve the issue? Animations that affect the same properties of the same elements should not overlap. They are in direct conflict. Similarly ScrollTriggers who have tween that affect the same properties of the same elements should not overlap. No, using a timeline would not fix the issue (if you're saying that the overlap still exists) because it's a logical issue: things cannot be in two places at the same time. 1 Link to comment Share on other sites More sharing options...
theodieu Posted October 13, 2020 Author Share Posted October 13, 2020 Yes, it makes sense now. Thank you! 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