Trigger DrawSVG on scroll

[Beamish7]

I'm creating a series of icons to animate, but I need to trigger the animation when they come into view (they occur near the footer of the page). I've tried a variety of solutions, including ScrollMagic based upon a solution offered in this forum, but without success. Any suggestions? Are already discussions on this topic?

Thanks

See the Pen Jjdopmp?editors=1111 by McKern (@McKern) on CodePen

[mikel]

Hey @beamish,

 

Welcome to the GreenSock Forum.

 

You could use the intersectionObserver. Here is a crisp tutorial.

 

In this example the container is observed.
With a threshold of 0.5:   If 50% of the container is visible in the viewport, the animation is triggered.

 

See the Pen LYVEJWp by mikeK (@mikeK) on CodePen

 

And you could use the new gsap 3!

 

Happy tweening ...

Mikel

[yeisonvelez11]

I think it is not the best place to ask this question,  but could you please explain to me what this line does? end: "+ = 50%", it is supposed to receive 2 values ... I understand that the "+" indicates that it will execute "after", but in this case I am not sure (I refeer this codepen

See the Pen b5f16030823680f5c5e57b33a5cf86c6 by GreenSock (@GreenSock) on CodePen

)

[ZachSaucier]

@yeisonvelez11 That means that the end position is 50% of the trigger's height after the start point. Perhaps the ScrollTrigger explanation video listed in the docs will be of more help in terms of your understanding.