Does Pricing work in Webflow?

Yes. The component ships with both a Webflow-compatible JSON paste (for the Designer) and standard HTML/CSS/JS for projects that prefer Custom Code. The Webflow tab on the main detail page has both formats.

Does Pricing work in WordPress, Squarespace, Framer, Astro, or other no-code platforms?

Yes. Anywhere you can add custom HTML, CSS, and JavaScript - the component works. Paste the markup into your page, add CSS to the styles section, and add JS to the script section. No framework required.

Do I need a build step for this version?

No. The HTML version is plain, copyable code that runs directly in the browser. No bundler, no transpiler, no npm install. Just paste and it works.

Can I use this with TypeScript?

The HTML version is plain JavaScript - no TypeScript types. If you want TypeScript, the React or Vue variants ship with proper type definitions. The HTML version is intended for projects that don't have a build step.

GSAP component for HTML/CSS/JS

Pricing in HTML/CSS/JS.

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.

Install

Drop Pricing into any HTML page

Pricing ships as plain HTML, CSS, and JavaScript - no build step, no bundler, no framework. Copy the three blocks (HTML markup, CSS styles, JS init) and paste them into any page. The component works in any CMS that lets you embed custom code: Webflow, Framer, Astro, vanilla HTML, WordPress, Squarespace.

example.html

Integrate

Where it goes in your page

Paste the HTML markup wherever the component should appear. Add the CSS to your stylesheet (or in a <style> tag). Add the JavaScript inside a <script> tag at the end of <body>, or in your site's footer custom code block.

In Webflow specifically: HTML goes in an Embed block, CSS goes in the page or project Custom Code <head> section, JS goes in the page Custom Code <body> section. The JSON paste flow (Designer → paste) handles the structure + classes for you; the Custom Code drop-ins handle the script and any custom CSS the JSON can't carry.

The component initializes on DOMContentLoaded automatically - no manual call needed.

Gotchas

Price and period spans start empty

[data-anm-prc-price] and [data-anm-prc-period] are empty in the source markup - the script fills them with the digit-roller and swap structure from each card's data-anm-monthly / data-anm-yearly at init.

Needs gsap AND CustomEase globals

waitForGSAP polls for both before init since the house eases (annnimate / annnimateInOut) are registered at boot. No SplitText or ScrollTrigger needed.

Switzer is loaded from the component CSS

The @font-face in pricing.css points at /fonts/Switzer-Variable.woff2 at your site root. Self-host the file there (Fontshare, free) or change the family in the CSS - the fallback is the system sans.

The plan-name shimmer is a permanent loop

The gradient sweep on the plan names runs continuously from mount and pauses only when the tab is hidden or the visitor prefers reduced motion. Set a longer shimmer duration if the section sits next to other motion.

FAQ

Common questions

Does Pricing work in Webflow?: Yes. The component ships with both a Webflow-compatible JSON paste (for the Designer) and standard HTML/CSS/JS for projects that prefer Custom Code. The Webflow tab on the main detail page has both formats.
Does Pricing work in WordPress, Squarespace, Framer, Astro, or other no-code platforms?: Yes. Anywhere you can add custom HTML, CSS, and JavaScript - the component works. Paste the markup into your page, add CSS to the styles section, and add JS to the script section. No framework required.
Do I need a build step for this version?: No. The HTML version is plain, copyable code that runs directly in the browser. No bundler, no transpiler, no npm install. Just paste and it works.
Can I use this with TypeScript?: The HTML version is plain JavaScript - no TypeScript types. If you want TypeScript, the React or Vue variants ship with proper type definitions. The HTML version is intended for projects that don't have a build step.

Copy the HTML/CSS/JS code

The full HTML/CSS/JS implementation lives on the component page, with the live demo, every format side by side, and the ability to edit and re-run it in the browser.

Open Pricing

Pricing in HTML/CSS/JS.

Drop Pricing into any HTML page

Where it goes in your page

Common questions

Copy the HTML/CSS/JS code

Every component, in every framework.