MotionPath alignment issue using ScrollTrigger and React

[AllanWalker 2 Likes (Newbie)]

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) 

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

[OSUblake 18,475 Likes (Superhero)]

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

 

[AllanWalker 2 Likes (Newbie)]

Ooh, thank you. 
 

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

Edited February 3, 2022 by AllanWalker
I initially misunderstood the fix.

[AllanWalker 2 Likes (Newbie)]

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