Element to be centred during Horizontal scroll animation until the last slide where it stops.

[Hockless]

I need the red square (to eventually represent a vehicle) to be in the centre of the screen near the bottom (which will eventually be a road) until it gets to the second to last slide and stops in its tracks. The user can keep on scrolling to the last slide without the square moving. If the user scrolls back toward the previous slides, the red square will go back to the centre of the screen. 

 

How is this possible?

See the Pen KKLozKp by Hockless (@Hockless) on CodePen

[GreenSock]

Hm, I read that a few times and I'm still kinda fuzzy. So you want the red box to be centered HORIZONTALLY in the viewport, but also at the bottom vertically? It starts there too, and just stays still while the slides pass by right-to-left? What do you mean by "stops in its tracks" on the second to last slide? And how are you measuring that? When the left edge of that slide hits the center of the screen or something? 

 

You'll probably want to look at the containerAnimation feature: 

https://gsap.com/docs/v3/Plugins/ScrollTrigger/?page=1#containerAnimation

[Hockless]

Hi Jack, thanks for the reply.

 

Sure, let me clarify:

Yes, the red box should be centered horizontally and near the bottom vertically. It starts there and stays in place while the slides move right-to-left. By "stops in its tracks" on the second-to-last slide, I mean the red box should stay fixed in that position once you reach the second-to-last slide, and it won't move even if you continue scrolling to the last slide. The stopping point is when the second-to-last slide's left edge reaches the center of the screen.

[Rodrigo]

HI,

 

Maybe something like this:

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

 

Hopefully this helps.

Happy Tweening!

[Hockless]

Hi Rodrigo,

 

This is very close. The only issue is the square needs to stop completely. It looks like it is doing that but there seems to be a parallax effect on it which is causing it to move slightly when it is stopped as I scroll.

[Cassie]

Hey there, there's no parallax effect on it. It's not moving at all.

The only time it moves is when it moves off screen, I've added a rotation to that tween, that's the ONLY time the box has any animation applied to it. 

See the Pen WNBzpRY?editors=0010 by GreenSock (@GreenSock) on CodePen

[Hockless]

Thanks for your help