Awesome Scrolling SVG Line Drawing - How they did it!

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

Tutorials referenced:

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!

^-Chat with me and others

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

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?

[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)`)
})

[halilunes]

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

[serveshchaturvedi]

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

[Sintax_]

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

[vladimirpetroski]

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

[fyvii]

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

[ashfaqulislam]

Love this tutorial.❤ want more like this.

[bwustinbweem]

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

[flolegend]

Absolutely loved it. You got a new fan <3

[latelotus]

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

[deliriumcode]

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

[widizeiga]

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

[pw.]

Your content, as always, is fantastic.

[johanmorin]

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 ;)

[sta.josefaagusandelsur]

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 <3

[murtuzamakda]

amazing and very detailed video about svg thank you sir

[yavuzerkal]

awesome video, awesome explanations. Thanks!

[gwcpp]

It's really awesome video. Love it!

[marcomastrorilli]

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