Object ALong Motion path with rotation ANimation

[precisegaurav]

Hi ,

i want to slow down the speed of truck . i have tried  ease : "slow" , ease:"steps(900)" , ease:"none" etc. 

they are not slow down the speed of truck

See the Pen GRoXzYj by GreenSock (@GreenSock) on CodePen

[Cassie]

Hey there @precisegaurav

Easing isn't going to affect the speed. Easing controls how the animation progress is spread out over time. Some easing curves will play a lot of frames at the beginning and less at the end, some like 'none' will make the animation progress evenly over the duration of the animation. None of them will affect the overall duration.

In most animations you can just change the overall duration

 

gsap.to(elem, {
 duration: 2, // like this
 rotate: 360,
})

however this animation's progress is tied to the scroll progress.
 

gsap.to("#motionSVG", {
  scrollTrigger: {
    trigger: "#motionPath",
    start: "top 20%", // start when the top of the graphic is 20% down from the top of the viewport
    end: "bottom 20%", // end when the bottom of the graphic is 20% down from the top of the viewport
    scrub: 1, // tied to the scroll progress
  }
});

Currently the speed = the time it takes you to scroll from the top of the graphic to the bottom.

If you scroll slower it will take longer to complete - if you scroll faster it will complete faster.

If you move the end marker there will be more distance to scroll - so it will take longer to complete, but then the graphic length won't be equal to the scroll length, so the car movement and the scroll won't be in synch... You'll just scroll right past the animation. Like this....

 

See the Pen GRoXzYj?editors=0010 by GreenSock (@GreenSock) on CodePen

The only solution I can see is to make the scroll distance longer whilst also animating the position of the graphic itself to keep it in view?

 

See the Pen dyVdqxP?editors=1011 by GreenSock (@GreenSock) on CodePen

 

Not entirely sure the best calculation for this though so maybe you can try and take it from here?

[Cassie]

This pen may help too. 

See the Pen qBqEeMj by mikeK (@mikeK) on CodePen