Jump to content
GreenSock

mrsam

Scrolltrigger > MotionPath + DrawSVG path reveal?

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

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

  • Like 2
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

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"},"<")

 

  • Like 2
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.
×