Stuck on the vercel pipes
Hello everyone, I am having an issue creating a second instance of the vercel pipes form this video : https://www.youtube.com/watch?v=UgUQSm2JG6Y&t=212s
I can get the animation on the first instance of the pipes on the left to work but I cannot get the animation tow ork on the straight pipes on the right.
Here is my read only link : https://preview.webflow.com/preview/bounce-insights-5e8ffb?utm_medium=preview_link&utm_source=designer&utm_content=bounce-insights-5e8ffb&preview=0f8e336db9c7e73cd423f6f0335cd7f1&pageId=661ee7e37d14c8bf6a15bdac&locale=en&workflow=preview
This is happening on this page : https://www.bounceinsights.com/why-choose-bounce
Anyone have any idea why the animation wont work?
Web Bae
YouTube
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...
Why Choose Bounce
We are the insights platform for progressive brand leaders, combining deep expert consultancy with advanced technology.
5 Replies
there's an issue with how the straight line svgs are created.
I merged the 4 paths into one and got it working, though I'm not entireley sure why. I imagine it has something to do with how SVG path commands work.
HEre's a working example with the paths merged, which prevents us form using the alternating colors like you have,
https://preview.webflow.com/preview/flowing-wire-two-instance?utm_medium=preview_link&utm_source=designer&utm_content=flowing-wire-two-instance&preview=ab9c862f9ec3fc6ddd39dfd4586cd42f&workflow=preview
I ran out of time to troubleshoot, so posted about this in Stack Overflow, there are some svg whizzes in there!
https://stackoverflow.com/questions/78545504/svg-with-straight-lines-and-gradient-mask-not-rendering
Stack Overflow
SVG with straight lines and gradient mask not rendering
I am trying to create a sort of flowing pipes effect using svg on my website.
This works great:
<svg width="100%" viewBox="0 0 360 182" fill="none" xmlns="http://www.w3.org/2000/svg">
&l...
@darraghlynch.ux did you get this sorted?
@Web Bae I didn't unfortunately.
When I open the working example you have above the output lines are not animating. I did copy it over to my project and still no luck
Hey @Web Bae @darraghlynch.ux, same issue here! Did anyone get that sorted?
Hey @Niklas I don't have a solution 100% ready still looking into it.