Try this Multi-Path SVG Scroll Animation Technique

[@DesignCourse]

More SVG content to come! I love this stuff.

[@ojasshukla1501]

Please do svg text smear and stretch having some bezeir

[@theman7050]

Yesss please continue on the svg path :)

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

[@paulkanja]

ah yes, !important my old nemesis

[@psychotrout]

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

[@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 (scrollPercentage1.0) scrollPercentage=1.0;

[@gknt7234]

Tell me if I'm wrong but JS parses 0.0 as 0, and 1.0 as 1 because the right side is equal to 0. So there is no need to add .0 to any integer.

[@dsdcorp]

@@gknt7234 ​ You right. My style is dictated by other scripting languages where there is some difference between integer and float types. It guarantees correct parsing in any case.

[@fersahahmet9597]

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

[@CodeDreamer68]

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

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

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

[@krishtamboli7909]

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

[@DesignCourse]

I'll be doing it this week.

[@krishtamboli7909]

@@DesignCourse 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. 👍

[@chrisodillman3355]

It is so much fun to do stuff like this.

[@historynerd6630]

very elegant and simple 👍 (If I had approached the same problem i would have done it way to complicated)

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

[@craigiswayne]

SVG is such an underrated tool

[@rychei5393]

WOW... thanks, this is super cool!

[@jp0678]

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 ** :D

[@mohamedlabarre166]

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

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

[@yingzhaozhou4319]

❤incredibly smart. Thanks 👍

[@theman7050]

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

[@outpost31737]

Nice one Gaz. I've created something similar for my own website. Looks super cool.

[@josbouma7924]

Im typing this at the video intro, im curious to see if you can prevent repaints without something like greensocks, cuz that's what you use it for.

[@DuneNobleman]

Thx for the lesson sir.

[@mikr13]

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

[@TwoTeaTee]

NGL, Cool & Easy!

[@unl0ck998]

that was really cool!

[@paradiseofcreativity]

Thank you for the great content as always.

[@lexxguru]

awesome dude!

[@paski702]

Very good content!! 😊

[@mohamedlabarre166]

just a suggestion can make a video about svgomg video tutorial for beginner?

[@ΒινςΜοργκαν]

Please Gary can you tell me your theme settings?

[@utsavkataria96]

Hey man, Great tutorial as always. If we animate the svg in after effects and upload it as bg video, would that get us the same result ?

[@getRekt1234]

No

[@andrezz2312]

I was wondering if you could share the whole formula to get the scroll percentage, because it got cut on frame, great video nonetheless!

[@MatsEngstrom]

let scrollPercentage = (document.documentElement.scrollTop + document.body.scrollTop) / (document.documentElement.scrollHeight - document.documentElement.clientHeight);

[@blasterchampions1801]

nice video 👍

[@Teng-t8p]

Why my console didn't show the length of the paths??

[@jomsies]

coding is hard .-. good thing people still hire front front front end designers. haha

[@mohamedlabarre166]

what about if I have one path on my svg ?

[@Geoffrey_Dnx]

Hello, when i launch the page, drawing is complete before i scroll, i search something to change this :( Thanks for all :)

[@Geoffrey_Dnx]

I've found the solution by myself, opacity:0 in CSS, and this small line of javascript: path.style.opacity = 1;

[@Franbua]

What about Figma? Is it possible to create this design by Figma?

[@DesignCourse]

Yes, the SVG elements.

[@Franbua]

@@DesignCourse It would be great to see a tutorial video of this

[@DesignCourse]

@@Franbua it's not needed. Just use the pen tool in Figma to do the same thing I did in illustrator

[@DesignCourse]

Just so we're clear, you can't create this type of animation in Figma. You can only complete the initial part of this tutorial in Figma (creating the svg shapes)

[@Franbua]

@@DesignCourse That's actually what I was trying to find out. Thank you so much :)

[@cmilkau]

I wish people would spend less time on making scrolling look good and more time on getting rid of scrolling.

[@milanche7395]

When I saw the thumbnail of this video, I thought it was a girl on it. You could start wearing makeup too. LOL

[@alexhartan]

Love this but hard to not think how much easier this would be done in Webflow... You can do it in under a minute

[@kuriasjoy]

U looks brad pitt

[@mantisory]

Dude, time for a haircut :)

[@DesignCourse]

absolutely........ not!

[@mantisory]

Haha. Had to try :)

[@ephrin-ligand]

man. vanilla JS is not what you think :) stop using this words)

[@josbouma7924]

Don't use this unless you want to drain mobile device batteries

[@electrolyteorb]

You are featured on @Fireship 🤯