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
We've just integrated it, and we confirm - it's definitely easier than it looks. Thank You 💛
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!
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!
Really Cool and easy. Thanks for this video.
Glad you liked it!
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?
dude I'm subscribing you!
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
So that’s how they do it
Yes Sir Mr. Kebbab 🫡
thanks for sharing
Thanks for watching!
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!
how to animate them in random order? (one by one)
You could do multiple keyframes and delay them.
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
⚡️⚡️⚡️