Jump to content
Search Community

Scrolltrigger > MotionPath + DrawSVG path reveal?

mrsam test
Moderator Tag

Recommended Posts

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

Link to comment
Share on other sites


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

  • Like 3
Link to comment
Share on other sites

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

Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
  • Recently Browsing   0 members

    • No registered users viewing this page.
  • Create New...