Scroll animations! How to add a flowing path like the Lusion site with SVG and Javascript

As seen on the new Lusion site, scroll animations such as a path that grows as you scroll down a path are effective web design techniques. In this tutorial, Rik shows you how to add your own SVG paths that fill in as you scroll!
00:00 Intro
00:50 HTML and CSS
04:28 Image to SVG
07:06 Javascript
20:11 Outro
Reminder that if you're wanting a more structured approach to learning creative skills, check out our courses over at www.superhi.com/
Links:
lusion.co/
Demo:
superhi-videos.s3.amazonaws.c...
Download:
superhi-videos.s3.amazonaws.c...
Photos by Shauna Summers on Death to Stock:
app.deathtothestockphoto.com/...

[@MrAbbo11]

you are an excellent teacher and clearly a very smart man as you distill things in a way that is easily accessible. Thank you!

[@riklomas]

I had Covid when I filmed this so go easy on me, my voice was a bit fried!

[@televisie456]

I didn't even notice! But the sympathy likes are in!

[@mikefrancis9424]

This was awesome - thank you! I had a lot of fun repurposing this for a remix app!

[@SarahSCampos]

Thank you so much, that was exactly what I needed!

[@roguegoblin2407]

Some time ago I was asked if I could replicate something similar for a friend's website, and I had no clue back then, now I know hehe
great video!

[@SuperHi]

Thank you! Yeh it's a non-obvious way to do it, I don't think most people would instantly think to go for a dashed path in SVG!

[@Tony.Nguyen137]

I love animations, but i am so bad at it, pls more videos like this 😊❤

[@Pusheennyangi]

Thanks for sharing the amazing tutorial and hope you at least got better now! 😢

[@SuperHi]

Thank you! I'm feeling better now, still positive currently but back to normal

[@jukasole]

hope you got better😊😊 i cant find a way to display my jpgs anyone had the same problem? what should i replace* in 'repeat(3,1fr*);' with?

[@MillerThriller]

Can this be replicated into wix studio? I’ve been trying to figure this out forever! Any help is greatly appreciated and compensated if needed.

[@krist3nnxo]

SuperHi forever!!!

[@SuperHi]

And ever and ever and ever

[@ricksanchez-c-137]

I tried to make this but in horizontal scrolling section and it doesnt work with all changes i tried. Someone have any ideas to solution ? :D

[@sarahmatos7777]

Great tutorial, thank you Rik, thank you SuperHi team, you're the best!
I have a question! How can we set the svg height so it covers the whole page? When I try to make it bigger, like 500vw, it starts far from the top, so when I get to this point, the javascript had been activated already and I can not see the animation, just the image already 'loaded'.
So I thought about having 2 svgs, and when the first one finishes, the second one starts. If it finishes at the right side, the other one starts from it too.
Problem is, the second svg must be top: 210vw, so I need to start its javascript at 220vw pixels from the top.
I thought I could use something like:
window.onscroll = function() {scrollFunction()};
function scrollFunction() {
if (document.body.scrollTop == 210vw) {
scroll2()
window.addEventListener("scroll", scroll2);
}
}
Any ideas or suggestions?
Thank you!

[@SuperHi]

Hey Sarah, I just realized I never posted my reply to you! I had it ready but didn't send!
For the SVG, you should look up the preserveAspectRatio attribute - you may want something like preserveAspectRatio="xMidYMid slice" so that some of the paths are off the page, similar to how background-size cover looks.
Another potential way is to have a few different aspect SVG and then use a loop to animate them all, but then use CSS to show based on a rough aspect ratio based on a media query. You prob don't need to change the JS too much to get it working!

[@sarahmatos7777]

@@SuperHi hey Rik, I'm sorry, I haven't got any notifications about your answer.
Thank you so much for the all the tips, I'll follow your suggestions :-)

[@jbent-nextwave145]

Well done sir. I never comment.

[@Strix_sqli]

i dont think they did it with svg on their website

[@CyberRings-NEET]

Hope you get better soon :

[@SuperHi]

Thank you! I'm getting better now, still positive right now, but feeling fine!