Trigger some animation after SVG draw completes

[Martin Kozhuharov]

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

[Sam Tremblay]

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: () => {
  console.log('Completed');
}}, 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!
Sam

[Martin Kozhuharov]

Great, thanks for those ideas!