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
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)`) })
A bit of note: translate3d() is used to make the browser perform the translation on the hardware (or GPU), which results in better performance on most browsers.
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.
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 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!
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.
@@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. 🤷♂
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
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.
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?
17:20 was a bit frustrating. You can wrap the code for us to see next time. Also, please slow down a bit. I know we can pause but I really dislike pausing and rewinding. Free content so not complaining just would appreciate it in the future
There's a speed play setting feature in TH-cam you can slow things down. It near the video resolution settings. I wish TH-cam had a "rewind/fast-forward 30 seconds" feature.
He flashes the code briefly on a quick 'blink and you miss it' sidescroll: let scrollPercentage = (document.documentElement.scrollTop + document.body.scrollTop) / (document.documentElement.scrollHeight - document.documentElement.clientHeight);
@@ralphstube thanks but I don't have an arrow key for videos on mobile. I watch TH-cam on my phone mostly. And the scroll bar on mobile is always too sensitive.
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
🐶🐶🐶 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?
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.
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).
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.
@@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.
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!!!!
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!
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 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
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.
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 ;)
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)
This works similarly to the site, but it is not the same. On the site, the line is drawn in one section while it continues downwards. How does it achieve that?
if its multiple paths could we not just do a for, or foreach array?? possibly maybe, why does it ONLY have to be one path what if we want more elaborate svgs?
How to get this on wordpress? Also the Javascript part doesn't do anything for me, I copied it exactly. Would be really great if someone could share the whole code.
thank you for this tutorial. I really appreciate it. However I am having serious problems with it. My red line shows up but when I try to animated it it disappears completely. not sure what I am doing wrong anymore. Can anyone please help.
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!
What other cool frontend techniques would you like to see this year?
This is amazing.
Like this videos 👍
Micro interaction in UI
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
Claymorphism and Aurora UI
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;
thanks!
thanks for this but I want to implement it after a certain height, for say: after 100vh, any idea on how to do that?
@@devdex. add everything in an if with pageYoffset i think
thank you, this guy is very stupid he not even put the code somewhere :S very bad youtuber
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)`)
})
A bit of note: translate3d() is used to make the browser perform the translation on the hardware (or GPU), which results in better performance on most browsers.
That is pretty awesome. I can see how that could be used to increase the storytelling progression of a web page.
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.
Scrollytelling 😁
@@jaimebula2061 I like it!
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!
This is why you would use denounce and throttle function to limit how much the event listener is called.
@@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!
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.
@@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. 🤷♂
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
I'm feeling so pumped after seeing this. Really awesome content man 🤩🎉
This "omg scroll" section really got me XD
Was waiting for someone to do a video about this effect, thanks man!
EXACTLY when i needed it for my diploma project 🔥🔥🔥 Thank you for the knowledge!
No way, same situation ;)
2 years later, same situation:)
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.
Love this tutorial.❤ want more like this.
Absolutely loved it. You got a new fan
Great Video Garry. Such a cool way to keep folks scrolling. Like leading a donkey with a carrot.
Just wanted to do this and remembered seeing you posting this easier today haha perfect timing
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
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?
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
That first site was insane!!
amazing and very detailed video about svg thank you sir
17:20 was a bit frustrating. You can wrap the code for us to see next time. Also, please slow down a bit. I know we can pause but I really dislike pausing and rewinding. Free content so not complaining just would appreciate it in the future
There's a speed play setting feature in TH-cam you can slow things down. It near the video resolution settings. I wish TH-cam had a "rewind/fast-forward 30 seconds" feature.
@@Tech-heartsong Press 'Left Arrow' key for a 5 second rewind.
He flashes the code briefly on a quick 'blink and you miss it' sidescroll:
let scrollPercentage = (document.documentElement.scrollTop + document.body.scrollTop) / (document.documentElement.scrollHeight - document.documentElement.clientHeight);
@@ralphstube thanks but I don't have an arrow key for videos on mobile. I watch TH-cam on my phone mostly. And the scroll bar on mobile is always too sensitive.
@@Tech-heartsong Try double-tapping to the Left side of the video for 10sec rewind and on Right side for 10sec ff
Please make a video on intersection observers in js
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
Can you put that scroll JavaScript on a codepen please?
I LOVE YOU CODING TECHNIQUES... SENSEI PAI 😍✨
It was very interesting, spun up a new creativity container in my bran and bring a lot of ideas, thanks for the share!
I really like your background sir 👌👌
Can we do this in WordPress?
🐶🐶🐶
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?
This was awesome Gary, more of this, for sure! Thanks!
But how to use this awesome effect while not making the svg fixed ?
Really nice. I try it with Nextjs 13 but it doesn't work. I really hope this example in that framework.
Thanks for all!
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.
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).
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.
@@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.
its bc its a much longer site i think
I am not able to find the links you referred in video or source code. Please someone help.
I was looking for it thank uuuuu, Gary
This is awesome. attempting to integrate this into my fav front end framework. Working out the kinks now
can I get the link of the first opening page letter animation please.
What the… you are a genius
awesome video, awesome explanations. Thanks!
thank you so much for giving us so much content. love what you do!
Amazing, this is exaclty what I have to do !!! Thx
Great! just what i needed.
Nice I like that you did it without an animation library. Pretty neat
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
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
Just what I need
Your content, as always, is fantastic.
You are a legend, you helped a lot and you explained it really great!
Thanks Gary! Great content!!
Awesome tutorial but, how do I implement this on a particular div?
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!!!!
thanks for this tutorial, i was been forced to buy gsap club license to get draw svg then i found this video
can i use it only in one section and different path on another section
Great video!! Thank you Gary !!
Really needed this 🤩
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!
stuck with same problem, did you find a solution for that?
@@devdex. unfortunately I just gave up lol.
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?
Absolutely, Intersection observer works perfectly well to reveal elements as they enter the viewport.
@@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
How to modify the CSS for it to be not fixed ??
It's really awesome video. Love it!
How can we use in framer website?
How would I set the scroll to have a picture appear and inlarge.
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.
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 ;)
I love it! Thank you so much
I feel like this could've been condensed into 2 minutes
Nah. Its good to explain and entertain....
Idk if you have much familiarity with webflow, but would something like this be possible w it's custom code features?
Absolutely, you can use custom code or make your own svg with Ai or XD or whatever and use animation on scroll in webflow
Could you have made two different overlapping copies with different 'paths' to further draw out the image?
thanks for this tutorial. Helps a lot :)
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.
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)
Good stuff. Thanks
How can I make my svg fill all screen (width and height)? :)
Would be cool to let the line fill in behind a blur box.
Thank you, great tutorial
Damn it, thanks dude!
TH-cam title should be "Awesome Scrolling SVG Line Drawing - How I THINK they did it!"!
You should do this using the intersectionObserver API.
but if the height will increase of SVG path fixed and then not show the bottom part of SVG
I need to do this but in React JS, how do I do that?
Love yours tutorial sir please make more such tutorial
This works similarly to the site, but it is not the same. On the site, the line is drawn in one section while it continues downwards. How does it achieve that?
this is awesome thank you.
Hey, is it possible to make this animation without writing code?
if its multiple paths could we not just do a for, or foreach array?? possibly maybe, why does it ONLY have to be one path what if we want more elaborate svgs?
Is it possible to have mutiple SVG line?
How to get this on wordpress?
Also the Javascript part doesn't do anything for me, I copied it exactly. Would be really great if someone could share the whole code.
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?
Hey, can anybody know how to achieve this using gsap ?..
If yes, please help me out.
where can i find the code source?
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.
Thank you Sir!
Practiced your code in myself but not successful attempt but is there no error but execution is not like what you show in video can you please help me
I appreciate your hard work dude , you probably would've worked day and night to produce this masterpiece
soft. Thank you
thank you for this tutorial. I really appreciate it. However I am having serious problems with it. My red line shows up but when I try to animated it it disappears completely. not sure what I am doing wrong anymore. Can anyone please help.
I have the same problem and couldnt find a solution yet
Oh man I love your hair.
WTF thanks man this aweome video it was so simple
Thank you so much!!!
Can i replicate this in figma only ?
So cool !
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!
Everything works perfectly
sa sample as Nice tutorialm as well?