GSAP Integrations Section with Animated SVG Wires
Overview
An integrations section for React and Next.js, drawn like a blueprint. Curved SVG wires connect your tools to a central hub, packets of light travel along them, and hovering a tool lights its wire and explains the connection.
The wires are measured from the real layout, so they connect the tiles to the hub at any screen size and get rebuilt when it changes. They draw themselves outward from the hub as the section scrolls in, then packets start travelling along them with MotionPathPlugin. Hover or focus a tool and its wire brightens and thickens, its packets speed up and multiply, the other wires dim, and the hub shows what that connection does.
Details
- Category
- Integrations
- Interaction
- On Hover + On Scroll
- Trigger
- On Hover
- Languages
- React, TypeScript, Tailwind
(01)Keep exploring
All 118 componentsBuilt with the same techniques
No. 058 / Features
GSAP Image Hotspots Section with Animated Leader Lines
On Hover · On Click · On Scroll
No. 092 / Comparison
GSAP Comparison Table Section: Us vs Them with Flip
On Scroll · On Click
No. 087 / Team
GSAP Team Section with Names That Reveal Portraits
On Hover · On Click · On Scroll
(02)FAQ
GSAP Integrations Section with Animated SVG Wires — FAQ
01How many tools can it hold?
Pass as many as you like. They split into two columns around the hub, and the demo uses eight. More tools make the columns taller and bring the wires closer together, so check how it looks at your count.
02Can tiles link somewhere?
Yes. Give a tool an href and its tile becomes a link. Without one it's a button that lights its wire.
03Can I use real logos?
The tile takes a text monogram out of the box. To use logos, swap the monogram span in the component for an image, and check each company's brand rules first.
04What does it need from my page?
npm install gsap @gsap/react, and Tailwind CSS v4. MotionPathPlugin ships with gsap. It uses your page's font, and the demo loads IBM Plex Mono.
05What happens with reduced motion?
The wires and tiles are simply there, with no draw-in and no packets. Hover and focus still light the wire and update the hub.