Pricing
A pricing section with a monthly/yearly switch. Flip it and every price rolls to its new number digit by digit and a savings chip pops in, while each plan name carries a constant shimmer.
One of 87 GSAP components in React, Vue and HTML.
On mobile
Pricing 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 hard part was prices that change length. Club goes from a two-digit monthly price to a three-digit yearly one, and the first version uncovered the new digit with a mask. The number still jumped, because the new digit takes up its full width the moment it lands in the row and the mask only hides it. So now the width itself animates: a new digit opens up from nothing while it rolls up to its value, a dropped one closes shut, and the currency and the "/mo" next to it glide along instead of hopping.
Each digit sits in its own strip of zero to nine and only ever moves up or down that strip, so a bigger number rolls up and a smaller one rolls down without me telling it which way to go. And you can flip the switch as fast as you like, it never locks. A new flip cuts the running one off and every digit continues from wherever it is.
Past that it's yours. Put in your own plans and prices, set the currency, rename the savings chip or turn it off, and set how fast the digits roll and how long the shimmer on the plan names takes to cross.
What you'll need.
Install
- GSAP
- 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 Pricing work with React and Vue?
- Pricing 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 Pricing?
- Yes. Pricing 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 Pricing without editing code?
- Pricing exposes 7 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 Pricing free?
- Pricing 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 Pricing in client projects?
- Yes. The Annnimate license covers commercial and client work - ship Pricing on as many projects as you build, with no attribution required.
- Does Pricing 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.
