Elastic Divider
A section divider with some life in it. It is one thin line between two sections, and when the cursor sweeps across it the line springs away and rings back to rest like a guitar string, harder the faster you go. Nothing moves on scroll and nothing moves on its own.
One of 102 GSAP components in React, Vue and HTML.
On mobile
Elastic Divider is in the free Starter Pack.
This exact component in React, Vue and HTML, in your inbox, ready when you're back at your desk. No card, no trial.
How it's built.
The first version was way too much. It was a whole field of lines drawn on a canvas with its own little physics running every frame, and it worked, but it was heavy for what is really just a line between two sections. So I threw it out and rebuilt it as one curved line that is held at both ends, where the only thing that moves is the point you crossed. The line leaves fast and comes back slowly, swinging past the middle a few times before it settles, and that difference in speed is what makes it feel like a string and not like a wobble. How hard it swings depends on how fast your cursor was, so a slow pass barely moves it and a quick swipe really sets it off.
The rest is yours. Set the colour and the thickness, how fast it swings, how long it keeps going and how far it is allowed to move. It takes the width of whatever you put it in, so it sits inside your own container, and when nobody touches it nothing is running at all.
What you'll need.
Install
- GSAP
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 Elastic Divider work with React and Vue?
- Elastic Divider 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 Elastic Divider?
- Yes. Elastic Divider 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 Elastic Divider without editing code?
- Elastic Divider exposes 6 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 Elastic Divider free?
- Elastic Divider is one of the free components. It is delivered as part of the Starter Pack ZIP by email - React, Vue, and HTML included, no expiration, no attribution.
- Can I use Elastic Divider in client projects?
- Yes. The Annnimate license covers commercial and client work - ship Elastic Divider on as many projects as you build, with no attribution required.
- Does Elastic Divider 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.
