Scrolltrigger with motionpath for svg moving along with scroll

[Vihaan2707]

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

[elegantseagulls]

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.

[Vihaan2707]

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

[elegantseagulls]

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

[Vihaan2707]

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.