Animate Flowing Pipes just like Vercel - Easier than I thought!

[@digidop]

We've just integrated it, and we confirm - it's definitely easier than it looks. Thank You 💛

[@swapnilvathare]

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?

[@webbae]

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.

[@evanjoyal9540]

Amazzzing I was actually looking up how to do this just last week.

[@webbae]

Took a little research but not many examples with this style - everything was stroke-dashoffset!

[@anim--west7783]

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

[@webbae]

Thank you! Best testimonial!

[@AvanaVana]

I saw you ask how to do this on Stack Overflow

[@webbae]

I ain't hiding! When you try to create SVG that is only straight lines you can run into some weird rendering issues!

[@hardickraj8764]

Really Cool and easy. Thanks for this video.

[@webbae]

Glad you liked it!

[@garyvoigt321]

Can this method be used to animate glowing strokes around the edge of a div? Like on the Linear homepage?

[@webbae]

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

[@DoerNation]

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

[@webbae]

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

[@designbasestudio]

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.

[@webbae]

I just loaded in Safari and didn’t experience any issues. Can you share more info?

[@darraghlynch.design]

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

[@webbae]

Can you post an example in Discord? discord.gg/jwVCjnK5

[@Kebbab.213]

So that’s how they do it

[@webbae]

Yes Sir Mr. Kebbab 🫡

[@jyotiranjangiri5162]

thanks for sharing

[@webbae]

Thanks for watching!

[@fazlushaikh3136]

how to animate them in random order? (one by one)

[@webbae]

You could do multiple keyframes and delay them.

[@preetsuthar17]

dude I'm subscribing you!

[@imdefnotash]

the embed feature isn't available for free.

[@webbae]

it's not but with some creative clone and copy/paste you should be able to get it working!

[@ManuelNollMedia]

Is this also possible without coding? :)

[@webbae]

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.

[@heatherliu6856]

Sicccckkkkkkk

[@webbae]

⚡️⚡️⚡️