Awesome tutorial! You explained everything so clearly and made it easy to follow. I have one question-would it be possible to implement this on page scroll?
bro you are the best please keep going i ve been searching about this for a long time i tried gsap with complex animation and many other solution but i couldn't believe this is easy
Hello , why masking not working on straight lines ? i further extends this and tried to do it like vercel ( that 4 black lines part ). I tried to add black rect mask on it but it is not working. Please help
Did you post in Discord as well? Turns out straight lives need a different coordinate space using the userSpaceOnUse attribute value for the gradient units value. Who knew?!?
Thanks for the great tutorial. It's a pity that you can't use this due to performance issues on Safari... In general Safari has problems with gradients and blurs in combination with css transitions & animations.
you should be able to modify this to do that. There are also tons of great examples of those on codepen if you get stuck. I like this one a lot! codepen.io/jh3y/pen/poxVPqo
I'm trying to run two instances of this just like the actual vercel example. So there's pipes going into something and more pipes coming back out in a straight line. Anytime I add my custom code to the front wire wrap on the output wires it will not display anything and the wires just disappear. Not sure what is going wrong
![Hunxho - Ball Forever [Official Video]](http://i.ytimg.com/vi/nki9ZTF9Uls/mqdefault.jpg)
We've just integrated it, and we confirm - it's definitely easier than it looks. Thank You 💛
Awesome tutorial! You explained everything so clearly and made it easy to follow. I have one question-would it be possible to implement this on page scroll?
yes you could use GSAP ScrollTrigger to do it. You could probably also use CSS scrolldriven animations but I'm not as familiar with those.
Amazzzing I was actually looking up how to do this just last week.
Took a little research but not many examples with this style - everything was stroke-dashoffset!
bro you are the best please keep going i ve been searching about this for a long time i tried gsap with complex animation and many other solution but i couldn't believe this is easy
Thank you! Best testimonial!
Really Cool and easy. Thanks for this video.
Glad you liked it!
I saw you ask how to do this on Stack Overflow
I ain't hiding! When you try to create SVG that is only straight lines you can run into some weird rendering issues!
Hello , why masking not working on straight lines ? i further extends this and tried to do it like vercel ( that 4 black lines part ). I tried to add black rect mask on it but it is not working. Please help
Did you post in Discord as well? Turns out straight lives need a different coordinate space using the userSpaceOnUse attribute value for the gradient units value. Who knew?!?
Thanks for the great tutorial. It's a pity that you can't use this due to performance issues on Safari... In general Safari has problems with gradients and blurs in combination with css transitions & animations.
I just loaded in Safari and didn’t experience any issues. Can you share more info?
So that’s how they do it
Yes Sir Mr. Kebbab 🫡
Can this method be used to animate glowing strokes around the edge of a div? Like on the Linear homepage?
you should be able to modify this to do that. There are also tons of great examples of those on codepen if you get stuck. I like this one a lot! codepen.io/jh3y/pen/poxVPqo
I'm trying to run two instances of this just like the actual vercel example. So there's pipes going into something and more pipes coming back out in a straight line. Anytime I add my custom code to the front wire wrap on the output wires it will not display anything and the wires just disappear. Not sure what is going wrong
Can you post an example in Discord? discord.gg/jwVCjnK5
dude I'm subscribing you!
thanks for sharing
Thanks for watching!
how to animate them in random order? (one by one)
You could do multiple keyframes and delay them.
the embed feature isn't available for free.
it's not but with some creative clone and copy/paste you should be able to get it working!
Is this also possible without coding? :)
to my knowledge, no. You might be able to create it in a program like SVGator or Adobe After Effects and drop it in as a lottie or something though.
Sicccckkkkkkk
⚡️⚡️⚡️