Відео

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

Anyway to add this effect to youtube header?

A great tutorial, thank you! And of course: "Cube!" :)

Really great. Easy to follow. Works like a charm... but what if you wanted more than one video like this on a page?

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.

I discovered your videos today! They are amazing!!!

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

Thank you! This was super helpful!!!!

Thanks for the video, would love to know what font is it at the beginning of the video, thx!!

where to download superhi editor

Thanks so much! Had been procrastinating adding on-scroll animations to my html/css website because I thought it would take longer to learn, but you made this sooo simple for me to learn and implement! ty ty

how to create that slider

How can we add a toggle button for users to switch between light and dark modes manually, instead of relying on their system preferences?

What are the reasons that you use <a> tag for the handle?

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

This was fantastic thanks!

Hi! Thanks for the tutorial but I'm having some issues when it comes to upload images on the web editor. I think it's not working propertly uploading documents :S

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

What about multi-panel resizing (3 or more)

Thank you!

Such an underated channel you deserve way more subscribers, I will always love the way you explain these complex matter into easy to understand concepts. keep doing what ur doing its awesome!

I wish you would’ve shown if it was responsive...

i tried, this i works, love it, but how to make it smoot, the video playing is kind of choppy :(

Thank you very much

Very helpful video. Thanks a lot

learned a lot from this tutorial, thank you!

Very nice. Thanks

hey so i have an issue when there is a border-radius applied on the shapes. They appear huge on the site. Do you know any fix for this?

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 video! How would you go about having the animation "bounce" the end of the stroke when the user stops scrolling?

cube🧊

cube!

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

thanks been scratching my head for hours to implement a design 🥴🥴

Thank you so much!!! This help a lot

i dont think they did it with svg on their website

Nice video, however it does not look good on mobile viewport

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

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!

This is amazing, exactly what I was trying to learn to do, really good explanations too, will subscribe

Thank you so so so so so so so so so so so so so so so much!!!!

Super helpful video, thanks!

this is amazing, there are not alot of videos on youtube that covers creative coding ideas as like urs so thank you sm for this!! can i ask if i wanted to replace the panels by purely images in divs that can be draggable, resize and stackable, is it possible to approach this idea in reference to your video? thanks in advance:)

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.

Thank you so much! Simple but powerful JS and CSS techniques

I love your videos. Do you mind sharing the tool/tools you use to record your screen for the video?

@SuperHi I tried that and it did make it endless, but between each repeating section, there was an ugly space between them. How do you fix it?

thank you man

Can I have a look at the source code in the instructional video? Thank you very much