[MotionPath alignment issue using ScrollTrigger and React]

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

[MotionPath alignment issue using ScrollTrigger and React]

Ooh, thank you. 
 

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

[MotionPath alignment issue using ScrollTrigger and React]

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