Jump to content
Search Community

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

Hockless test
Moderator Tag

Go to solution Solved by Cassie,

Recommended Posts

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

Link to comment
Share on other sites

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: 


Link to comment
Share on other sites

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.

Link to comment
Share on other sites

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.

Link to comment
Share on other sites

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 account

Sign in

Already have an account? Sign in here.

Sign In Now
  • Recently Browsing   0 members

    • No registered users viewing this page.
  • Create New...