Network Globe
A "where we operate" section built around a dotted globe you can drag and spin. Pick a store from the pill or click a marker and the globe turns to face it, its label rises in, and the routes to it draw outward.
One of 85 GSAP components in React, Vue and HTML.
On mobile
Take the free components with you.
In React, Vue and HTML, in your inbox, ready when you're back at your desk.
Where this component came from.
We built it for annnimate.com, our own site, and kept it in the library once it earned its place. The same code runs in production today.
How it's built.
The hard part was never the globe, it was the names. My first version pinned a label above every city and let them collide, which is fine until four European cities land next to each other. Stacking them upward was worse - in a cluster they marched so far up the screen you could not tell which dot each one belonged to, and any that did not fit just vanished, which reads like a bug.
What works is giving every label a spring that pulls it back above its own dot, and letting any two that overlap shove each other apart until they settle. Nothing hides, nothing drifts far from the marker it names, and a thin line runs from each label down to its dot. The continents are dots rather than an image, with the shape of the land baked into the file, so there is nothing to load.
Past that it is yours. Give it your own locations, set how many connection lines travel between them at once, change the dot colour and size, how fast it turns, and whether the grid lines show. Pick a city and the globe turns to bring it round, firing a line from the one you left.
What you'll need.
Install
- GSAP
- ScrollTrigger
- CustomEase
Attributes, tips, use cases and full code are part of access.
The preview and provenance stay public. Tune-it docs, the data-anm-* attribute table, real-world use cases and the copy-ready code unlock the moment you sign in.
Frequently asked
- Does Network Globe work with React and Vue?
- Network Globe ships as React (Next.js included), Vue 3 (Nuxt included), plain HTML/CSS/JS - the same animation in each format. The React version uses the official useGSAP hook with cleanup handled; the Vue version is a real single-file component with <script setup>.
- Do I need GSAP to use Network Globe?
- Yes. Network Globe is built on GSAP directly, and GSAP has been 100% free for commercial use, including every plugin, since version 3.13. The component page lists exactly what to install.
- Can I customize Network Globe without editing code?
- Network Globe exposes 18 tunable controls in the Customize panel on this page - drag the values, watch the live preview respond, and the code you copy carries your exact settings.
- Is Network Globe free?
- Network Globe is part of the Annnimate Library, a paid subscription (from EUR 20/month billed quarterly, or EUR 199/year). The live preview and customization run free on this page; the paste-ready code is for members.
- What if Network Globe is not right for my project?
- Annnimate comes with a 14-day money-back guarantee. If Network Globe or the library does not fit your project, reply to your receipt within 14 days for a full refund, no questions asked.
- Can I use Network Globe in client projects?
- Yes. The Annnimate license covers commercial and client work - ship Network Globe on as many projects as you build, with no attribution required.
- Does Network Globe respect prefers-reduced-motion?
- Yes. Every Annnimate component handles prefers-reduced-motion via gsap.matchMedia, so users who opt out of motion get an effectively instant, readable state.
