Jump to content
Search Community

MotionPath alignment issue using ScrollTrigger and React

AllanWalker test
Moderator Tag

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

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...