Jump to content
GreenSock

Vihaan2707

Scrolltrigger with motionpath for svg moving along with scroll

Go to solution Solved by elegantseagulls,

Recommended Posts

Hi, I am a new user of gsap, I just removed the end property and edited the other properties according to my requirements in my next.js project. The above codepen is the same as the documentation example with its end property removed. I am facing the same problem as that codepen, sometimes the car or tractor goes out of the screen while scrolling, I noticed the further the end, the slower the car moves and vice-versa. Could someone please suggest what I should do to fix this, I tried modifying start and end properties but that becomes unresponsive on different sizes.

In simple words it is not responsive for all sizes.

 

In my next.js project this is the code for the animation

 

gsap.to("#motionSVG", {
      scrollTrigger: {
        trigger: ".section.hiw",
        start: "300px 20% ",
 
        scrub: 1,
        markers: true,
        onUpdate: (self) => {
          gsap.to("#tractor", {
            rotation: () => (self.direction === 1 ? 0 : -180),
            overwrite: "auto",
          });
        },
      },
      duration: 10,
      ease: "none",
      immediateRender: true,
      motionPath: {
        path: "#motionPath",
        align: "#motionPath",
        alignOrigin: [0.5, 0.5],
        autoRotate: 90,
      },
    });

See the Pen VwrZQNq by vverma_27 (@vverma_27) on CodePen

Link to comment
Share on other sites

To prevent the tractor from going off screen, try scrub: true,

 

48 minutes ago, Vihaan2707 said:

I noticed the further the end, the slower the car moves and vice-versa

I'm not sure what you mean by this.

Link to comment
Share on other sites

I do have scrub:1; should I change it to scrub:true.

I meant by that if for example, I set end property to +="2000px", then the car moves very fast and disappears under the screen, but if it is "+=5000px" it moves slower and disappears above the screen

Link to comment
Share on other sites

  • Solution
42 minutes ago, Vihaan2707 said:

I do have scrub:1; should I change it to scrub:true.

scrub: 1, adds a 1s smoothing-effect to the animation, so It'll dip off the screen if you're moving fast. scrub: true, or scrub: 0, will tie it directly to your scroll position. https://greensock.com/docs/v3/Plugins/ScrollTrigger

  • Like 2
Link to comment
Share on other sites

Hi, thanks a lot for your help. That worked as well, but that made the animation a little choppy so I just saw my code again and I was setting the wrong element as triggerelement. 

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