Jump to content


MotionPath alignment issue using ScrollTrigger and React

Recommended Posts

Hi Team!

I'm trying to setup a simple animation with a boat moving along a path as the user scrolls down the page. 

I had the boat moving along the path correctly, but then I added the next step which was to pin the whole map so you could actually see the full animation before it scrolls off-screen - and this proved kinda tricky! I went through a few different iterations of path-mismatch, and now the boat does appear to be moving along a line of motion, but it's as if the path is rotated 90 degrees and the boat goes bouncing around towards the left instead of going down the map along the dotted line. 

I must be calling the motionPath before the asset has loaded or something, right? Any other suggestions where I am going wrong will be massively appreciated!

Codepen here (brown box in place of the boat) 

Screen Shot 2022-02-03 at 11.54.28 AM.png

See the Pen jOarMaO by Allanw (@Allanw) on CodePen

Link to comment
Share on other sites

Welcome to the forums @AllanWalker


The best way to debug your animations is to not use ScrollTrigger. If you remove ScrollTrigger from the equation, you will see that your animation is fine and that you are just making a common ScrollTrigger mistake, using nested ScrollTriggers in a timeline.


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


Link to comment
Share on other sites

Ooh, thank you. 

That makes a lot of sense. Thanks for the explanation and the tip to remove scrollTriggers to debug. Very helpful. 

Edited by AllanWalker
I initially misunderstood the fix.
Link to comment
Share on other sites

For anyone having the same trouble I did with getting a motionPath working inside a pinned element - this is the solution.


I added the pinning inside the main timeline scrollTrigger instead of using a separate tween to do it

See the Pen rNYLgov by Allanw (@Allanw) on CodePen

  • Like 2
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.