Try this Multi-Path SVG Scroll Animation Technique

-- Today, I'm going to show you how to create a really cool SVG path animation, affected by scroll position. We'll use JavaScript to grab all of the paths, and animate said paths by scroll.

Codepen demo:

0:00 - Intro
0:52 - Creating the SVG
1:14 - HTML
3:10 - CSS
4:59 - JavaScript
11:55 - Final Result
12:11 - Outro

Let's get started!

#frontend #css #svg

- - - - - - - - - - - - - - - - - - - - - -

Subscribe for NEW VIDEOS!

^-Chat with me and others

- - - - - - - - - - - - - - - - - - - - - -

Come to my discord server or add me on social media and say Hi!

[DesignCourse]

More SVG content to come! I love this stuff.

[CarlMahnke]

Love how simple the code behind this is!

[PaulMcCannWebBuilder]

Appreciation for the vanilla stuff.
To add:
If the scrollPercentage == 1, transition in a fillOpacity (from 0, set in the CSS, to 1, set in the JS) so it fills in at the end.

To stop the initial transition when the page loads, you can add a .preload * { transition: none !important;} and a preload class to the body and remove that class on the window load.

[sklikizos]

Nice tutorial! Loving the simplicity of percentage mapping for animation. You can do lots of cool stuff with that concept. Also, neue is German for new, pronounced "noya".

[fersahahmet]

this is a very smart hack of the stroke dash property of svg. i loved it

[dsdcorp]

Brilliant idea. Thanx.
In browsers with "elastic scroll" ability, the scroll percentage may go out of range, like below zero and above 1. And it causes flickering when you reach the maximum scroll point. So after calculation the scrollPercentage value it should be trimmed like that:
if (scrollPercentage<0.0) scrollPercentage=0.0;
if (scrollPercentage>1.0) scrollPercentage=1.0;

[psychotrout]

For not doing any web development myself I found this very instructive and well explained.

[CodeDreamer]

You are very good at teaching, and thank you for zooming in.

[dave_thebrave]

this is pretty cool. i think i can't wait for the watch.

[ClarkGoodram]

Great tutorial. I tend to use Vivus and also Vivus instant for general animated svgs but this is great especially as its used with vanilla JS, css and scroll percentages. Great job.

[krishtamboli]

Please do negative space really waiting for it Love from India 🇮🇳 ❤️

[mohamedlabarre]

Hi sir
this a very insteresting video and you are a great teacher


thanks

[cjwebdev]

I love messing around with the SVG's to do some creative designs with. I have an extension that I use with VS Code called Svg Preview. When you have a svg file in VS Code the screen will split and show you the image. The image will update in real-time when making changes.
👍

[theman]

You, Sir.. are AMAZING!!! Thanks for using vanilla JS. :D

[mikr]

What tool he used to zoom & highlight in like that at around 1:53?

Great video btw!

[chrisodillman]

It is so much fun to do stuff like this.

[rodrigodanielss]

The result went very creative and professional.
I am a free software adept, Gimp SVG conversion is messed, what are the great recommendations for download?

[jp]

Learned something new, thanks!

Small nitpick btw, if you removed the style definition inside the SVG, might as well as remove the *cls-1* class of the *<paths>* :D

[alubhau]

this really helps me because I was thinking of making this sort of handwriting letter reveal and I cant just do a simple reveal from left to right...I have to make sure the letters are written like they would be written in hand and this multi-path svg scroll technique will be used..just without the scroll

[paradiseofcreativity]

Thank you for the great content as always.