Aligning Element to SVG Path with GSAP

[VMS]

 

Hello GSAP community,

I'm new to GSAP and struggling with making an element follow an SVG path while scrolling. The element isn't properly aligned and the animation feels off during scrolling.

Any quick tips on getting it to align correctly with the path and ensuring smooth scrolling animation?

Your guidance is much appreciated!

 

See the Pen NWoxvEd by VAIBHAV-MARKANDEYA-SINGH (@VAIBHAV-MARKANDEYA-SINGH) on CodePen

[mvaneijgen]

You can indeed feed an element to the motionPath plugin, but it is also an object if you want to define more properties. Check out the docs ( https://gsap.com/docs/v3/Plugins/MotionPathPlugin/), it is always a good idea to start copying the code from there in your own project and modify your needs from there, until you have a firm grasp on how the syntax works and you start to dream about it.

 

Also every tween in GSAP has a default ease of `ease: "power1.out" (see https://gsap.com/docs/v3/Eases/), this will start fast and gets slower near the end. When working with scrub ScrollTriggers this can 'feel' off, because the visitor is in control of the animation, then a `ease: "none"` will 'feel' more correct. Keep in mind that the ease property is part of the tween and not of the motionPath: {} object!

 

Hope it helps and happy tweening! 

 

See the Pen JjxGrRQ?editors=0010 by mvaneijgen (@mvaneijgen) on CodePen