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

[@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!

[@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!

[@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!

[@mikefrancis9424]

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

[@clangsison]

learned a lot from this tutorial, thank you!

[@SarahSCampos]

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

[@monicaalyssa7195]

Thank you! This was super helpful!!!!

[@Tony.Nguyen137]

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

[@jesperandreassen120]

Great video! How would you go about having the animation "bounce" the end of the stroke when the user stops scrolling?

[@krist3nnxo]

SuperHi forever!!!

[@SuperHi]

And ever and ever and ever

[@Pywyoyuyp]

Thank you so much, I really enjoyed this tutorial. But I have a problem and that is when I scroll to the bottom of the page , when the line finishes drawing itself, it disappears. When I scroll a little up, it is again there, scrolling itself backways as it should. but i don't want it to disappear from my view. How to fix this?

[@SteveHart282]

How do you achieve the gradient they have on Lusion using an SVG? Great video!

[@playinhertz]

Your portfolio is really amazing. Can you make a video on how you made it . Pls much requested

[@aminemajdi1248]

Thank you very much

[@stevevoltmer2964]

What about responsiveness? If you have content on the page and resize the window the SVG resizes, but not the content. You end up with the path moving over important content.

[@stevevoltmer2964]

How would you do this using the intersectionObserver API instead of scroll?

[@tanppangi]

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.

[@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

[@maazahsan1800]

Cna anyone work on the section look like video effect section in lusion website?

[@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

[@InfiniteLightAura]

Hope you get better soon :

[@SuperHi]

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

[@klemenivanusic]

const svg = document.querySelector('svg.squiggle'); const path = svg.querySelector('path'); // Get the total length of the path const pathLength = path.getTotalLength(); // Initialize the path to be hidden path.style.strokeDasharray = `${pathLength}`; path.style.strokeDashoffset = `${pathLength}`; const scroll = () => { const distance = window.scrollY; const totalDistance = document.body.clientHeight - window.innerHeight; const percentage = distance / totalDistance; // Animate the strokeDashoffset to reveal the path path.style.strokeDashoffset = `${pathLength * (1 - percentage)}`; }; // Run the scroll function on page load to set initial values scroll(); // Add the scroll event listener window.addEventListener('scroll', scroll); This is the better version of the code. Try it. Path basically starts from 0 when page is loaded and it is not drawn yet, and when you reach the bottom of the page, the path reaches it's 100% length. It works even if you set it's boundaries to a specific container, just set the environment for the path in the totalDistance variable

[@thomas76ch]

Thanks, with you svg works really well. I try it only with a straight line. It is not as smooth as on your example... and the result is reverse! Is there any info how to solve this issue?