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

Learn how to create a flowing wire or pipe effect. We'll use use CSS keyframe animations along with SVG elements like linear gradient and masks to make a version of what's seen on Vercel's website. CSS animations are highly performant as are SVGs, so you can be confident that this stunning animation will work great on your website. Usually I see this effect done (without fading flow effect) using CSS stroke-dashoffset but this technique uses SVG masking and linear gradients to strong effect!
👯‍♀️ Clone it:
try.webflow.co...
// FREE resources
✂️ Code Snippet Library: code-snippets-...
🤝 CSS Nobody Told You About: www.webbae.net...
🚗 Roadmap to learn Webflow: www.webbae.net...
// Premium content
🤝 Patreon: / webbae
🕸️ Advanced Webflow Course (201): www.webbae.net...
// Discounts
🎢 Get 10% GSAP: WEBBAE10
♣️ Creative Coding Club (My favorite GSAP lessons): www.creativeco...
// Connect
🙋‍♀️ Join the Discord: / discord
🐥 Follow Me! / webisbae

[@digidop]

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

[@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!

[@epj-m8s]

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!

[@hardickraj8764]

Really Cool and easy. Thanks for this video.

[@webbae]

Glad you liked it!

[@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.

[@Juangris-v3g]

thanks 🙏

[@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?

[@jyotiranjangiri5162]

thanks for sharing

[@webbae]

Thanks for watching!

[@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!

[@Kebbab.213]

So that’s how they do it

[@webbae]

Yes Sir Mr. Kebbab 🫡

[@preetsuthar17]

dude I'm subscribing you!

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

[@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

[@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.

[@fazlushaikh3136]

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

[@webbae]

You could do multiple keyframes and delay them.

[@krugu1]

You could do it like this: @keyframes slideMask { from { x: -100%; } to { x: 100%; } } .mask-rect-1 { animation: slideMask 3s ease infinite; animation-delay: 0s; /* Start sofort */ } .mask-rect-2 { animation: slideMask 3s ease infinite; animation-delay: 0.5s; /* Startet 0.5s später */ } .mask-rect-3 { animation: slideMask 3s ease infinite; animation-delay: 6s; /* Startet 1 später */ } .mask-rect-4 { animation: slideMask 4s ease infinite; animation-delay: 2.2s; /* Startet 1.5s später */ } .mask-rect-5 { animation: slideMask 1.5s ease infinite; animation-delay: 2s; /* Startet 2s später */ }

[@heatherliu6856]

Sicccckkkkkkk

[@webbae]

⚡️⚡️⚡️