Awesome Scrolling SVG Line Drawing - How they did it!

Подписаться 1,1 млн

Просмотров 248 тыс.

50% 1

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!

Хобби

Опубликовано:

1 июн 2024

Ссылка:

Скачать:

Готовим ссылку...

Добавить в:

Мой плейлист

Посмотреть позже

Комментарии : 209

@DesignCourse 2 года назад

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

@scrapmaster890 2 года назад

This is amazing.

@tikka6554 2 года назад

Like this videos 👍

@sumitkkundu 2 года назад

Micro interaction in UI

@ImadGhoummaid 2 года назад

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 2 года назад

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 2 месяца назад

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

@HEYROCKME 2 года назад

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 2 года назад

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

@vladimirpetroski7089 2 года назад

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

@ashfaqulislam1701 2 года назад

Love this tutorial.❤ want more like this.

@fyvii 2 года назад

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

@bwustinbweem 2 года назад

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

@latelotus 2 года назад

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

@Sintax_ 2 года назад

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

@flolegend6402 2 года назад

Absolutely loved it. You got a new fan

@deliriumcode 2 года назад

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 2 года назад

Your content, as always, is fantastic.

@murtuzamakda1952 9 месяцев назад

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 2 года назад

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

@Morphexe 2 года назад

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 2 года назад

Scrollytelling 😁

@johnrallison1876 2 года назад

@@jaimebula2061 I like it!

@theman7050 2 года назад

I was looking for it thank uuuuu, Gary

@billybob7177 2 года назад

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 2 года назад

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

@billybob7177 2 года назад

@@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 2 года назад

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 7 месяцев назад

@@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 4 месяца назад

Thanks Gary! Great content!!

@codeityt 2 года назад

Really needed this 🤩

@marcomastrorilli4668 2 года назад

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 2 года назад

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 7 месяцев назад

awesome video, awesome explanations. Thanks!

@milododds1 Год назад

Great video!! Thank you Gary !!

@nghbrhood6848 2 года назад

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

@bySterling Год назад

That first site was insane!!

@elsapakopoulou2465 2 года назад

I love it! Thank you so much

@Neudo92 Год назад

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

@gwcpp 2 года назад

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 2 года назад

Thank you, great tutorial

@vollmerama 2 года назад

Great! just what i needed.

@t20sgrunt36 2 года назад

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

@joergfrank 2 года назад

thanks for this tutorial. Helps a lot :)

@movienights4200 6 дней назад

I really like your background sir 👌👌

@digwillhachi 2 года назад

this is awesome thank you.

@shreyaspatil7862 2 года назад

Love yours tutorial sir please make more such tutorial

@ajayimichael9788 Год назад

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

@aimlezz8855 2 года назад

Good stuff. Thanks

@captain_rum_n_pear 2 года назад

Thank you so much!!!

@hassaneoutouaya 2 года назад

Thank you Sir!

@tarashrushovskyi6383 2 года назад

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

@jancanalis4103 2 года назад

No way, same situation ;)

@fennadknfuezibf1540 2 дня назад

2 years later, same situation:)

@Nimb0s 2 года назад

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 6 месяцев назад

What the… you are a genius

@przemysawkowalczyk3049 10 месяцев назад

Damn it, thanks dude!

@kohelet910 2 года назад

So cool !

@utahouse151 2 года назад

great job

@dickyjiang 2 года назад

Thank you 🤘

@SavantSvant 2 года назад

So cool!!!

@thailonlucasart 2 года назад

AMAZING

@electricindro2236 2 года назад

Thanks!

@oetanswers Год назад

soft. Thank you

@MrJettann 2 года назад

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 2 года назад

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 2 года назад

thank you sir

@theisoj 2 года назад

Thanks 👍

@AbhijitMhasagar 2 года назад

lovely

@emmyleke7049 2 года назад

Love the hair!

@xanderneal 2 года назад

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 2 года назад

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 2 года назад

Please make a video on intersection observers in js

@bw-dude 2 года назад

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 2 года назад

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 2 года назад

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

@slake07 2 года назад

@@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 2 года назад

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 2 года назад

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

@gurkirat7035 Год назад

tNice tutorialngs

@Unleashed75 2 года назад

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 2 года назад

🐶🐶🐶 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_ 2 года назад

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

@Michael-ls7lu 2 года назад

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 2 года назад

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 2 года назад

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 2 года назад

@@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 2 года назад

its bc its a much longer site i think

@pranaykrmajee1432 2 года назад

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

@juanpasten6077 10 месяцев назад

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 2 года назад

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 2 года назад

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 2 года назад

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 2 года назад

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 2 года назад

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 2 года назад

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

@aubisoka Год назад

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

@shivakarthik6056 2 года назад

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

@thematrix29 9 месяцев назад

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

@gursagarsingh1328 2 года назад

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

@Trazynn 2 года назад

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