Morphing Island
A small dark capsule pinned to the top of the page that always names the section you are in. Click it and it grows into the section list, pick one and it grows again into a short description with a scroll-to link, then settles back down.
One of 88 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.
How it's built.
The pill grows into three sizes, the small label, the section list and one section's detail, and every grow has a bit of spring in it. The first version used the same spring for every size and it looked wrong: the small step barely moved and the big one rang like a doorbell. So the spring is worked out per move. It overshoots by the same few pixels whether the pill grows a little or a lot, and when it collapses it doesn't spring at all, it just settles. A shrinking box that bounces reads as a wobble.
The label in the closed pill follows the page as you scroll. All the section names sit in one strip behind a small window and the strip slides to whichever section you're in, so a fast scroll through three sections is one movement, not three. The list has a single dot for the current section that slides between the rows when the page moves under an open list.
Past that it's yours. Add as many sections as you have, give each a name and a sentence, and set how long the morph takes, how much it springs and how much the old content blurs as the new one comes in. Escape steps back one level at a time.
What you'll need.
Install
- GSAP
- CustomEase
- ScrollTrigger
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 Morphing Island work with React and Vue?
- Morphing Island 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 Morphing Island?
- Yes. Morphing Island 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 Morphing Island without editing code?
- Morphing Island exposes 3 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 Morphing Island free?
- Morphing Island 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 Morphing Island is not right for my project?
- Annnimate comes with a 14-day money-back guarantee. If Morphing Island 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 Morphing Island in client projects?
- Yes. The Annnimate license covers commercial and client work - ship Morphing Island on as many projects as you build, with no attribution required.
- Does Morphing Island 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.
