Jump to content
Search Community

Trigger some animation after SVG draw completes

Martin Kozhuharov test
Moderator Tag

Go to solution Solved by Sam Tremblay,

Recommended Posts

I have an SVG animation that draws a curve and uses Scroll Trigger. I would like after the SVG draw completes, to animate a border-color change of the div.box after the SVG element. I guess I need another scroll trigger that uses the div.box as a selector, but I'm not sure how to add that to the current code. Scroll down in the code pen below.

See the Pen QWrEbao by Martin_Kz (@Martin_Kz) on CodePen

Link to comment
Share on other sites

  • Solution

Hi Martin!

You have multiples ways to do that.

First, you can simply add an "onComplete" function to trigger when your SVG is completely draw.

.from(".path-1", {drawSVG: 0, onComplete: () => {
}}, 0)

In an other hand, you can done your scrolltrigger inner a timeline and call your border-color change after like you do now, but like that:

main.from(".path-1", {drawSVG: 0}, 0)
main.to(".path-1", {stroke: '#ff0000'});

(For the example I change the stroke color of your SVG, but feel free to change it for do your stuff with the .box)



Or, in your actual scrolltrigger code, you can use onLeave, onEnterBack function.



Best regards!

  • Like 4
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...