Animate paths between multiple containers dynamically

[ti-sign]

Hey there!

 

For a change I don't directly have a question but an input if anybody ever tries something similar (or if somebody has any optimisations in mind we could use).

 

For our website we needed to be able to connect different containers with an svg line and animate it on scroll to reveal. Of course, the svg line and animation have to be adjusted for screen sizes and resizes. I'm pretty happy with the solution we came up with, even if it probably isn't the most optimised one. But it was an unusual challenge and maybe somebody can profit from this.

See the Pen oNaRMge?editors=1010 by tisign (@tisign) on CodePen

[Rodrigo]

Hi @ti-sign,

 

Great work, looks really nice!

 

Thanks for sharing your work with the community! 💚

 

Happy Tweening!

[GreenSock]

This might also be helpful: 

There's a special ease you can apply that'll help keep the path sorta centered as you scroll. 

See the Pen bGOvaJR?editors=0010 by GreenSock (@GreenSock) on CodePen

 

Thanks for sharing!