79570394
The closest thing to a provided description could be understood as the animation of an object that should move along the path
and also if the ScrollTrigger is involved here, it means the object has to be animated as the scrolling happens.
In any case, an animation should be playing only if it's visible inside the viewport, otherwise who would see that animation if it's out of view. (although that behavior could be achieved it is strongly advised against it).
MotionPath
If you want to move an element along an SVG path and also synchronize the motion with the user's scrolling activity, there's possibility to create a tween as paused and then update it as the scrolling would progress.
Use paused:true in your MotionPath tween.
let tweenPausedMotionPath = gsap.to(objectToMoveAlongThePath, {
paused: true,
ease: 'none',
motionPath: {
path: pathToFollow,
align: pathToFollow,
alignOrigin: [0.5, 0.5],
},
};
Here you might not need to use any ease function yet, later we'll discuss its usefulness more practically.
For now just set it to a linear using ease:'none'. (If you omit to specify ease: then default 'power1.out' would be used as the easing function, so set it to 'none' explicitly to prevent that).
ScrollTrigger
The example of using timeline with configured scrollTrigger object is fine, though documentation said it is common use case, docs also said it is for basic usage. If you really want to unlock advanced functionality like controlling callbacks, you have to use ScrollTrigger.create to create a standalone ScrollTrigger instance.
ScrollTrigger.create({
trigger: container,
start: "top center",
end: "bottom center",
// other ScrollTrigger config options
onUpdate: (self) => {
const scrollProgress = self.progress.toFixed(2);
tweenPausedMotionPath.progress(scrollProgress);
}
});
Most important thing here is that we're using onUpdate callback to get scroll progress
(essentially progress is the value between 0 and 1 - where 0 is when we're yet to start scrolling the trigger element and 1 means we've finished scrolling it out of the viewport)
and use it to update our paused MotionPath tween created earlier.
.progress() method is a setter/getter for tween's progress.
Centering object vertically in the viewport
Now, to center object at the begging and at the ending of the scrolling is straightforward.
You could achieve that in two ways at least.
- Adjust ScrollTriger
start:andend:config options.
for examplestart: top centerwould mean the animation will start when the trigger element'stopgets to thecenterof the viewport, andend: bottom centerwould mean the animation will stop when the element'sbottomarrives there.
Refer to info video about ScrollTrigger options - https://youtu.be/X7IBa7vZjmo?t=310 - Add two space-filler elements with
height: 50vhCSS property before and after SVG element inside scroll trigger container.
This approach also increases scroll length of the container so decide on these both options by experimenting with them, it may give you desired effect.
Centering in the viewport en route
Haven't you noticed the logical problem that arises here? Your scroll trigger element has fixed height of one certain amount. But your path's length could be longer than that, and during the scrolling, the path length that object needs to travel is different depending how complex is the path itself.
In other words scrolling moves by straight line from top to bottom, your path does not. That's when you need your custom made easing function. Gsap allows you to use CustomEase.create with yours made easing function to adjust that difference and to position animated object exactly as it needs to be during the scrolling progress. How to create such a function is left to you to figure that one out.
Refer to the documentation to learn more - https://gsap.com/docs/v3/Eases
Room for improvement
This animation will break each time a user is resizing the screen or scaling the viewport.
To address this problem, you have to recreate gsap MotionPath tween and reapply preserved progress to it on resize handler.
window.addEventListener("resize", () => {
const previousProgress = tweenPausedMotionPath.progress();
tweenPausedMotionPath =
gsap.to(objectToMoveAlongThePath,
{/**... rest of the same config as before */}
);
tweenPausedMotionPath.progress(previousProgress);
});
To get you an idea here's the CodePen prototype -
https://codepen.io/ajishiguma/pen/raNXMve
Bonus:
There is a really nice online tool to create and edit SVG paths. Easily add or change d attribute commands - https://yqnn.github.io/svg-path-editor/
- Blacklisted phrase (1): youtu.be
- Long answer (-1):
- Has code block (-0.5):
- Contains question mark (0.5):
- Low reputation (0.5):
