Does Gradient Footer 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 Gradient Footer 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

Gradient Footer in HTML/CSS/JS.

A full drop-in footer section with a CSS/SVG gradient glow anchored to the bottom edge. The glow is a shallow arch - a full-width band that hugs the bottom and reaches both bottom corners, rising to a taller peak in the centre (height tunable via data-anm-arch) - built entirely from layered CSS gradients (no WebGL, no canvas). It slowly drifts, reacts to scroll, and rises in with a slow power3.out fade on scroll-enter (slightly delayed on scroll-down). A giant brand wordmark sits above it, split into characters with GSAP SplitText and revealed as a masked per-letter rise (yPercent 110 -> 0, expo.out, staggered) on the same ScrollTrigger; the font-size auto-fits so the tight word fills the full container width for any brand name. The letters use a mix-blend overlay so they take on the glow's light. Above the wordmark: a 4-column link grid (Grok-footer alignment on the 12-col skeleton) with a slide-through underline hover (the Annnimate text-underline mechanic, signal yellow) and a slim legal row. Grain overlay via a static SVG feTurbulence (rendered once, GPU-composited - cheap). Responsive 320-1920: 2x2 link grid on mobile. VANTA editorial-sports demo brand.

Framework guides

Install

Drop Gradient Footer into any HTML page

Gradient Footer 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

HTML / vanilla-JS gotchas

Load GSAP BEFORE the component script

The component script calls gsap.to() at init. If GSAP isn't loaded yet, you'll see ReferenceError: gsap is not defined. The included waitForGSAP helper handles this gracefully, but easier: just include the GSAP CDN <script> above the component script.

Plugins need separate CDN scripts

Core GSAP is one script. ScrollTrigger, SplitText, Flip, and other plugins each need their own <script> tag from the GSAP CDN, loaded after the core. Check the component's dependency list to know which to include.

Multiple instances on one page

The component is wrapped in an IIFE and selects by data-anm-* attributes, so multiple instances on the same page work without conflict. Each is initialized independently. To target a specific instance from your own code, use window.Anm.{ComponentName} APIs documented in the Tips section.

FAQ

Common questions

Does Gradient Footer 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 Gradient Footer 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 Gradient Footer