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
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
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 ;)
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?
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.
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 UA-cam you can slow things down. It near the video resolution settings. I wish UA-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 UA-cam on my phone mostly. And the scroll bar on mobile is always too sensitive.
🐶🐶🐶 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 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 :)
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?
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.
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.
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
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!:)
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)
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!
It's a very cool website with a lot of impressive design creativity and coding expertise, but my honest first impression is that there are so many things going on that the content has been relegated to playing second fiddle. I accept that it's a matter of preference, but the content is within my working domain and I found it challenging to quickly extract the company's range of activities.
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!!!!
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
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!
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
I'm feeling so pumped after seeing this. Really awesome content man 🤩🎉
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. 🤷♂
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:)
Love this tutorial.❤ want more like this.
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
Just wanted to do this and remembered seeing you posting this easier today haha perfect timing
Absolutely loved it. You got a new fan
That first site was insane!!
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
It was very interesting, spun up a new creativity container in my bran and bring a lot of ideas, thanks for the share!
amazing and very detailed video about svg thank you sir
Great Video Garry. Such a cool way to keep folks scrolling. Like leading a donkey with a carrot.
Nice I like that you did it without an animation library. Pretty neat
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
This is awesome. attempting to integrate this into my fav front end framework. Working out the kinks now
You are a legend, you helped a lot and you explained it really great!
This was awesome Gary, more of this, for sure! Thanks!
I was looking for it thank uuuuu, Gary
Please make a video on intersection observers in js
Your content, as always, is fantastic.
Thanks Gary! Great content!!
I LOVE YOU CODING TECHNIQUES... SENSEI PAI 😍✨
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 ;)
Great! just what i needed.
thank you so much for giving us so much content. love what you do!
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 really like your background sir 👌👌
awesome video, awesome explanations. Thanks!
Just what I need
Amazing, this is exaclty what I have to do !!! Thx
Really needed this 🤩
What the… you are a genius
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.
Great video!! Thank you Gary !!
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 UA-cam you can slow things down. It near the video resolution settings. I wish UA-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 UA-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
Really nice. I try it with Nextjs 13 but it doesn't work. I really hope this example in that framework.
Thanks for all!
It's really awesome video. Love it!
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
Love yours tutorial sir please make more such tutorial
I love it! Thank you so much
🐶🐶🐶
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?
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
thanks for this tutorial. Helps a lot :)
Thank you, great tutorial
Good stuff. Thanks
Damn it, thanks dude!
You should do this using the intersectionObserver API.
soft. Thank you
this is awesome thank you.
I appreciate your hard work dude , you probably would've worked day and night to produce this masterpiece
Thank you Sir!
Can you put that scroll JavaScript on a codepen please?
Would be cool to let the line fill in behind a blur box.
WTF thanks man this aweome video it was so simple
But how to use this awesome effect while not making the svg fixed ?
Can we do this in WordPress?
Oh man I love your hair.
Thank you 🤘
Could you have made two different overlapping copies with different 'paths' to further draw out the image?
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 :)
Thank you so much!!!
Love the hair!
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?
Awesome tutorial but, how do I implement this on a particular div?
Did you think to coer some e-commerce best practices from a Front End developer view? Nice content.
I am not able to find the links you referred in video or source code. Please someone help.
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.
great job
thank you sir
thanks for this tutorial, i was been forced to buy gsap club license to get draw svg then i found this video
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
Thanks!
can I get the link of the first opening page letter animation please.
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
Everything works perfectly
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!:)
Thanks 👍
can i use it only in one section and different path on another section
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)
RetroSun oh my god too let know when you figure it out
Fantastic
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.
It's a very cool website with a lot of impressive design creativity and coding expertise, but my honest first impression is that there are so many things going on that the content has been relegated to playing second fiddle. I accept that it's a matter of preference, but the content is within my working domain and I found it challenging to quickly extract the company's range of activities.
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
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!!!!
but if the height will increase of SVG path fixed and then not show the bottom part of SVG
How to modify the CSS for it to be not fixed ??
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?
So cool !
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.
UA-cam title should be "Awesome Scrolling SVG Line Drawing - How I THINK they did it!"!
Bro can you show some cool css animation of 2022 Trends
sa sample as Nice tutorialm as well?
How would I set the scroll to have a picture appear and inlarge.
Can i replicate this in figma only ?