ScrollTrigger - trying to animate when element leaves the screen

[theodieu]

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

[theodieu]

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

[ZachSaucier]

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.

[theodieu]

Thanks!

[ZachSaucier]

There's a couple of main issues at play here:

1. Your end position for the first ScrollTrigger is after the start of your second ScrollTrigger. Thus they conflict and there's a jump. 
2. 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.

[theodieu]

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?

[ZachSaucier]

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. 

[theodieu]

Yes, it makes sense now. Thank you!