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?
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!
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!
@@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 :-)
![Megan Thee Stallion - Roc Steady (feat. Flo Milli) [Official Video]](http://i.ytimg.com/vi/HozPPyqW0dY/mqdefault.jpg)
I had Covid when I filmed this so go easy on me, my voice was a bit fried!
I didn't even notice! But the sympathy likes are in!
Thank you! This was super helpful!!!!
you are an excellent teacher and clearly a very smart man as you distill things in a way that is easily accessible. Thank you!
This was awesome - thank you! I had a lot of fun repurposing this for a remix app!
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!
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!
learned a lot from this tutorial, thank you!
Thank you so much, that was exactly what I needed!
SuperHi forever!!!
And ever and ever and ever
How do you achieve the gradient they have on Lusion using an SVG? Great video!
I love animations, but i am so bad at it, pls more videos like this 😊❤
Your portfolio is really amazing. Can you make a video on how you made it . Pls much requested
Great video! How would you go about having the animation "bounce" the end of the stroke when the user stops scrolling?
Thanks for sharing the amazing tutorial and hope you at least got better now! 😢
Thank you! I'm feeling better now, still positive currently but back to normal
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?
Thank you very much
How would you do this using the intersectionObserver API instead of scroll?
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?
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.
Cna anyone work on the section look like video effect section in lusion website?
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
Well done sir. I never comment.
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!
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!
@@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 :-)
i dont think they did it with svg on their website
Hope you get better soon :
Thank you! I'm getting better now, still positive right now, but feeling fine!