Awesome Scrolling SVG Line Drawing - How they did it!

designcourse.com/css - Join my Interactive CSS Course!
hbit.ly/3Vg2JGz - Learn UI/UX Interactively (Coupon "LAUNCH" for $15 Off)
-- Today, we're going to take a look at an example of a modern layout that integrates a very interesting SVG animation that's controlled by the scroll. We'll design our own from scratch, and then code it up with HTML, CSS and JavaScript!
The source of inspiration for this effect:
crustac.fr/en/home/
Tutorials referenced:
css-tricks.com/svg-line-anima...
css-tricks.com/a-trick-that-m...
0:00 - Introduction
1:17 - Learn CSS & UI/UX
2:00 - Drawing the SVG Path in Figma
8:58 - HTML
11:24 - CSS
14:47 - JavaScript
18:20 - Parallax
20:58 - Final Thoughts
Let's get started!
#svg #animation #frontend
- - - - - - - - - - - - - - - - - - - - - -
Subscribe for NEW VIDEOS!
Learn UI/UX: designcourse.com
My personal FB account: logodesigner
Coursetro FB: coursetro
Coursetro's Twitter: / designcoursecom
Join my Discord! / discord
^-Chat with me and others
- - - - - - - - - - - - - - - - - - - - - -
Who is Gary Simon? Well, I'm a full stack developer with 2+ decades experience and I teach people how to design and code. I've created around 100+ courses for big brands like LinkedIn, Lynda.com, Pluralsight and Envato Network.
Now, I focus all of my time and energy on this channel and my website Designcourse.com.
Come to my discord server or add me on social media and say Hi!

[@DesignCourse]

What other cool frontend techniques would you like to see this year?

[@scrapmaster890]

This is amazing.

[@tikka6554]

Like this videos 👍

[@sumitkkundu]

Micro interaction in UI

[@ImadGhoummaid]

Thank you for all this information I would like to know how to design a website that supports Arabic or right-to-left languages. We always struggle with font shapes and sizes, as well as how to choose the right graphics for a website. Thanks

[@Aalok464]

Claymorphism and Aurora UI

[@halilunes7007]

17:00 var scrollPercentage = (document.documentElement.scrollTop + document.body.scrollTop) / (document.documentElement.scrollHeight - document.documentElement.clientHeight); var drawLength = pathLength * scrollPercentage; path.style.strokeDashoffset = pathLength - drawLength;

[@djapstar]

thanks!

[@devdex.]

thanks for this but I want to implement it after a certain height, for say: after 100vh, any idea on how to do that?

[@Robert-gr1cl]

@@devdex. add everything in an if with pageYoffset i think

[@tandaramandaraba]

thank you, this guy is very stupid he not even put the code somewhere :S very bad youtuber

[@HEYROCKME]

Great stuff Gary! There are a few "bugs" in that parallax snippet: 1. The "data-ratex" and "data-ratey" properties are not defined in the markup(HTML) and since they do not exist they return NaN (not a number) and will render anything you multiply with it 0 or undefined. So there is no need to transform "0" to "0". 2. not a bug, but Translate3d() can in this case be simplified into translateY, since we only use one axxis... 😄So the code could simply be refactored here to: target.forEach( (elem) => { let pos = window.scrollY * elem.dataset.rate if (elem.dataset.direction === 'vertical') { return (elem.style.transform = `translateY(${pos}px)`) })

[@serveshchaturvedi2034]

I'm feeling so pumped after seeing this. Really awesome content man 🤩🎉

[@vladimirpetroski7089]

This was awesome Gary, more of this, for sure! Thanks!

[@ashfaqulislam1701]

Love this tutorial.❤ want more like this.

[@fyvii]

thank you so much for giving us so much content. love what you do!

[@bwustinbweem]

Just wanted to do this and remembered seeing you posting this easier today haha perfect timing

[@latelotus]

This is awesome. attempting to integrate this into my fav front end framework. Working out the kinks now

[@Sintax_]

This "omg scroll" section really got me XD Was waiting for someone to do a video about this effect, thanks man!

[@flolegend6402]

Absolutely loved it. You got a new fan

[@deliriumcode]

It was very interesting, spun up a new creativity container in my bran and bring a lot of ideas, thanks for the share!

[@pw.70]

Your content, as always, is fantastic.

[@murtuzamakda1952]

amazing and very detailed video about svg thank you sir

[@widizeiga3120]

You are a legend, you helped a lot and you explained it really great!

[@johnrallison1876]

That is pretty awesome. I can see how that could be used to increase the storytelling progression of a web page.

[@Morphexe]

Yu can probably offset the "offset" by a percentage to get that effect so instead of having a linear interpolation (which is whats on the video) you can have a custom interpolation based on a function of scroll, or any other really.

[@jaimebula2061]

Scrollytelling 😁

[@johnrallison1876]

@@jaimebula2061 I like it!

[@theman7050]

I was looking for it thank uuuuu, Gary

[@billybob7177]

I love it!! Just a few fun tips for people working on making similar on-scroll animations on their websites: 1. Using a scroll event listener is a simple solution for on-scroll effects, but noticeably slows down performance and often user experience as a result. Using this to execute major animations is not recommended for performance - Instead try to find solutions using the javascript intersection observer, which allows for things to happen when certain elements reach certain positions in relation to either the viewport or another element. Though these solutions are more difficult, these are much more performance-friendly! 2. Similar idea as above: parallax is annoying to do without a scroll event listener. Unfortunately, from above we know scroll listeners slow the experience, but there are alternate ways to create parallax using 3d perspectives with solely CSS! I still love this video though, not pooping on it at all because the scroll listener is a solution which can be made in much less time and is more easily understood. Just bringing up some extra points if people want to go above and beyond!

[@charlielove5808]

This is why you would use denounce and throttle function to limit how much the event listener is called.

[@billybob7177]

@@charlielove5808 Wow. Thanks for introducing me to that Charlie! For some reason I had never thought to throttle that, super great tip! I still think using Intersection observers are much more elegant for executing animations at certain points while scrolling down the page, but for things like parallax this can fix most of the performance issues!

[@lovor01]

If scroll event is throttled through the requestAnimationFrame and it is used solely for drawing SVG, there should not be noticeable performance penalties. Also, scroll event is continuous, while observers are to be used for discrete events, when something intersects or appears on page. Css parallax is limited (you have to have adequate HTML, and also it must be bound to body element to work on scroll, so you cannot do parallax for objects nested in page. For certain page designs, you cannot use it at all.

[@AdamLeis]

@@lovor01 I was also thinking of rAF. When that runs, it checks some "state" object, and the state is updated during scroll. That way, state could update 100x but the rAF will only use the state at that snapshot of time. Not sure how that affects perf. 🤷‍♂

[@kerrykreiter445]

Thanks Gary! Great content!!

[@codeityt]

Really needed this 🤩

[@marcomastrorilli4668]

Const target should be moved outside event listener function to avoid cpu consumption since you know already all the the elements with scroll class and it is not needed to compute them every listener callback.. btw nice effect bro

[@johanmorin7062]

Really nice video, thanks for taking the time to explain the technique. On a side note, the right use of const and let would be a plus (though using let is not wrong even without any reassignment). And var can disappear ;)

[@yavuzerkal2551]

awesome video, awesome explanations. Thanks!

[@milododds1]

Great video!! Thank you Gary !!

[@nghbrhood6848]

Nice I like that you did it without an animation library. Pretty neat

[@bySterling]

That first site was insane!!

[@elsapakopoulou2465]

I love it! Thank you so much

[@Neudo92]

Amazing, this is exaclty what I have to do !!! Thx

[@gwcpp]

It's really awesome video. Love it!

[@sta.josefaagusandelsur6878]

TNice tutorials the best tutorial I've ever watched! Super informatic and love the softow in wNice tutorialch you taught everytNice tutorialng. Thanks a lot

[@robimuhammad95]

Thank you, great tutorial

[@vollmerama]

Great! just what i needed.

[@t20sgrunt36]

Great Video Garry. Such a cool way to keep folks scrolling. Like leading a donkey with a carrot.

[@joergfrank]

thanks for this tutorial. Helps a lot :)

[@movienights4200]

I really like your background sir 👌👌

[@digwillhachi]

this is awesome thank you.

[@shreyaspatil7862]

Love yours tutorial sir please make more such tutorial

[@ajayimichael9788]

I LOVE YOU CODING TECHNIQUES... SENSEI PAI 😍✨

[@aimlezz8855]

Good stuff. Thanks

[@captain_rum_n_pear]

Thank you so much!!!

[@hassaneoutouaya]

Thank you Sir!

[@tarashrushovskyi6383]

EXACTLY when i needed it for my diploma project 🔥🔥🔥 Thank you for the knowledge!

[@jancanalis4103]

No way, same situation ;)

[@fennadknfuezibf1540]

2 years later, same situation:)

[@Nimb0s]

Hi! Thank you so much for the video, learned lots from it. I was wondering however where the commented code at 17:08 comes from? Can't seem to find it in any of the two tutorials you linked from CSS-tricks. Oh, and your own video that you referenced at 18:56, which one is that? Seems you forgot to link that as well. Thanks.

[@-qz1yr]

What the… you are a genius

[@przemysawkowalczyk3049]

Damn it, thanks dude!

[@kohelet910]

So cool !

[@utahouse151]

great job

[@dickyjiang]

Thank you 🤘

[@SavantSvant]

So cool!!!

[@thailonlucasart]

AMAZING

[@electricindro2236]

Thanks!

[@oetanswers]

soft. Thank you

[@MrJettann]

What's awesome!! Guys, how can we control the svg path by sections? Like in the example in this video? How to make this path stops at the end of a section for example?

[@vaibhavagrawal431]

WTF thanks man this aweome video it was so simple

[@gayoermelynv.2673]

I want to make Lo-Fi soft and today i started to soft soft tutorials. I see that you are teacNice tutorialng us very carefully and simple, i like that

[@webmetaverso]

Fantastic

[@elanges93]

thank you sir

[@theisoj]

Thanks 👍

[@AbhijitMhasagar]

lovely

[@emmyleke7049]

Love the hair!

[@xanderneal]

Great video! Is there a way for this to have a way to work no matter what device you’re on? Working on a site where is moves around text and we’re trying to figure out how to keep it the same when the text size/position adjusts for different screen sizes. Any advice would be great!

[@hanooooihanooooi1907]

Thanks Mr. Gary Simon 🙏 i have one question if i want to do this on wordpress is it possible??, Knowing that I am not a programmer. Thank you again

[@elevatetechai2024]

Hi man great tutorial, Question, how do you create the letter C with the ocean background that you show at the beginning of the video?

[@goljivines7356]

Please make a video on intersection observers in js

[@bw-dude]

Hi Gary, I'd love to play around with that. Is there a pen with the code or something? Cheers and thanks for the inspiration.

[@slake07]

Awesome video!!, At the beginning of the video elements appeared as the path was scrolling, could that be achieved with intersection observer api of js and css to delay the elements?

[@KenoAlordiah]

Absolutely, Intersection observer works perfectly well to reveal elements as they enter the viewport.

[@slake07]

@@KenoAlordiah always try to make the elements appear little by little from an svg while the section remains fixed until it is completed but observer api does not work much to make the svg complete and the elements appear at different points

[@nikhil182]

That's is very cool! Also if possible please make a tutorial on 'How to create Mouse Trail on websites', there are no tutorial videos for this. Thank you so much!:)

[@level4499]

Did you think to coer some e-commerce best practices from a Front End developer view? Nice content.

[@gurkirat7035]

tNice tutorialngs

[@Unleashed75]

This is cool. I would of liked to of seen, how to animate more than 2nd Path, having them start or finish at different times. Even adding more, a 3rd, 4th etc, all starting and ending at a different time. How to reversing directions of each one, having a extra object like a circle following the tip of the Path, adding a offset with the circle etc. The fluff of the image and text moving could of been left out for another video but it does help showcase everything. GG and thanks :)

[@studybeats7784]

🐶🐶🐶 This means to see the matching SVG shape path (drawn dog) at the right correct dog section (and not cat section), the path length must always be adjusted to the mockup length. 🖥💻📱 With responsive displays, this implies at least 3 different mockups (desktop, tablet, mobile) with at least 3 different SVG shapes / paths. Am I right?

[@kevinhe8188]

awesome course. I'd like to apply in my project :) and I'm interested in the video background. the letter C. how to draw it? it's different with SVC strike drawing.I can't figure it yet.

[@masheen_]

Could you have made two different overlapping copies with different 'paths' to further draw out the image?

[@Michael-ls7lu]

I think I noticed that the one in the example website works slightly differently. It seems have the end of the svg line centered in the screen at all times, and when it gets to parts like that first shrimp it draws it really fast so as not to skip past it before it draws, then continues down afterwards. Curious how they got it to work based on window scroll position or something like that.

[@bolskify]

Break the svgs into sections where the line becomes straight again. So they all line up and look like it's drawing the same line. So it would draw complex objects and simple objects in the same time. Have each section has to draw itself in some consistent unit. The (window height) or the (height of the section) if all sections are the same height. To fix it, just put them all in a div and transform it up with the scroll pos (until end).

[@skylerockspecial]

An involved way of achieving this with one svg could be by creating a custom function that takes scroll percentage and generates a non-linear percentage based on how fast you want each section to draw.

[@InternetKilledTV21]

@@bolskify Reading through the rendered page this seems like how they did it. Lots of IDs along the lines of "svg-line[number]" in the background divs for each section.

[@GigiofGigi]

its bc its a much longer site i think

[@pranaykrmajee1432]

But how to use this awesome effect while not making the svg fixed ?

[@juanpasten6077]

Really nice. I try it with Nextjs 13 but it doesn't work. I really hope this example in that framework. Thanks for all!

[@tlontheparkplaceprince4053]

How would one confine this to a specific location somewhere down below the fold? I followed the video and have create the effect, but now I would like to move it down the page within a specific location. I am messing around but have gotten stuck. I am new to front end and I assume it is something with the position: fixed but idk as my thoughts and tries haven't played out. Any help from the community would be much appreciated!

[@devdex.]

stuck with same problem, did you find a solution for that?

[@tlontheparkplaceprince4053]

@@devdex. unfortunately I just gave up lol.

[@freemancharles2491]

Awesome tutorial but, how do I implement this on a particular div?

[@thedesignguy1241]

I love it, and I'd like to use this on a client site I'm currently working on. Do you or anyone else know how I could put this in a site mock-up that I'm doing? My partner does the code, so I'm hoping to just build the site out in XD and include this in said prototype. I have access to the full adobe suite if another tool combined with XD would get the job done. Thoughts?

[@theman7050]

Gary, would love to know how to detect intersection of this 'expanding' svg path with html elements to add a class on them on intersection.

[@InternetKilledTV21]

I think the simplest way would be to break up the single SVG into multiple sections such that any intersection has the end and start of a new SVG. When the SVG before the intersection is finished, you'll know the line is intersecting with the relevant element and can trigger an action. Another way would be to do some math with scrollTop on the element with bounding boxes of the SVG (this seems significantly more complicated than it needs to be, probably not the way to go)

[@maggpie286]

Super cool would love to see this in reactjs and framer motion 🙂

[@WilliamShrek]

Oh man I love your hair.

[@eduardoanaconajuan1991]

I appreciate your hard work dude , you probably would've worked day and night to produce this masterpiece

[@kissgergo5202]

I feel like this could've been condensed into 2 minutes

[@aubisoka]

Nah. Its good to explain and entertain....

[@shivakarthik6056]

I am not able to find the links you referred in video or source code. Please someone help.

[@thematrix29]

KZbin title should be "Awesome Scrolling SVG Line Drawing - How I THINK they did it!"!

[@gursagarsingh1328]

can i use it only in one section and different path on another section

[@Trazynn]

Would be cool to let the line fill in behind a blur box.

[@diamondmaterial110]

nice but how can we achieve a dot following the path just as it gets filled? I'm trying so hard to get the position of linecap on scroll. Please Help!!!!

[@agnesmaria3309]

TERIMAKASSIH

[@tyralcrowe5984]

How would I set the scroll to have a picture appear and inlarge.

[@victorpaulo4342]

in the details. when you get stuck, roll back to the beginning and start over. The other weay is to focus entirely on one set of commands

[@vanshgupta7008]

the doesn't seem to work for me it just shows the svg and nothing else happens can you please help or provide the code pen

[@WiLDeveD]

Cool Stuff. Thanks a lot... Could we make a Logo or brand name Typography as well ?

[@sherefahmed7216]

Hey, is it possible to make this animation without writing code?

[@filetmignon9978]

Idk if you have much familiarity with webflow, but would something like this be possible w it's custom code features?

[@vinceofscandal]

Absolutely, you can use custom code or make your own svg with Ai or XD or whatever and use animation on scroll in webflow

[@chunmengchan5871]

Is it possible to have mutiple SVG line?

[@tharakakarunarathne2420]

Can you put that scroll JavaScript on a codepen please?

[@eirlysinthedark]

How can I make my svg fill all screen (width and height)? :)

[@vibilkrishnan]

👌👌👌

[@coolsamird]

How can we use in framer website?