Scrolltrigger > MotionPath + DrawSVG path reveal?

[mrsam 3 Likes (Newbie)]

I'm trying to have a circle follow a SVG path with MotionPath and ScrollTrigger. This is working fine.

 

At the same time of this happening, I want to reveal the path "with the circle", so drawSVG into the mix of ScrollTrigger + MotionPath.

 

Do I need multiple ScrollTrigger events or should I be able to handle it all with just one? And somehow split up the drawSVG animation in a timeline of it's own? Or how would could I make it work?

See the Pen YzvYZKq by mrsgs (@mrsgs) on CodePen

[Trapti 211 Likes (Specialist)]

Hi, 

No you don't need multiple scrollTrigger. In this pen I dded a timeline and added another tween for drawing. Just make the path reverse and it will be fine.

 

Blog explains reversing: https://www.motiontricks.com/adobe-illustrator-path-direction-quick-tip/

See the Pen NWzXgdb?editors=1010 by tripti1410 (@tripti1410) on CodePen

 

you can checkout this ex as well: 

See the Pen GRyBxeZ by tripti1410 (@tripti1410) on CodePen

[Carl 11,325 Likes (Superhero)]

Here's another one from the GreenSock team that may help

 

See the Pen KKmZYGy by snorkltv (@snorkltv) on CodePen

 

I have a bonus video that goes over the basic setup in my free GSAP beginner's course as  bonus lesson.

[mrsam 3 Likes (Newbie)]

Cheers @Trapti + @Carl . Seems I need to dive deeper into how to effectively use these tools

 

Trapti > Is there some smart way for me "sync" moving the circle with the draw effect?

 

I changed your drawSVG to ".to" which now makes it go left to right. However the Draw is much faster / outruns the circle.

 

Updated codepen here:

See the Pen dyKJebo by mrsgs (@mrsgs) on CodePen

[Carl 11,325 Likes (Superhero)]

your second tween is using the default ease of power1.out.

 

add an ease:"none" to the second tween and it should line up nicely.

 

.to ("#motionDraw", {drawSVG: "0%", ease:"none"},"<")