Glopzi
Sign up

Integration

Webflow and Framer.

Both platforms ship rendered HTML and accept custom code per project. Glopzi installs as a single tag in their custom-code panels. No SSR concerns; the one-tag pattern works.

The shared pattern

Webflow and Framer both publish pages as static HTML to their CDNs. They’re not streaming SSR frameworks, so the anti-FOUC stylesheet that’s bundled into Glopzi’s script is enough. One tag covers it.

HTML
<script
  src="https://cdn.glopzi.com/modules/glopzi.js"
  data-glopzi-key="YOUR_API_KEY"
  async
></script>

Add your published domain (and the staging subdomain if you use one) to your Glopzi license’s allowed domains via the dashboard. See Adding and managing domains.

Webflow

  1. From your Webflow project, open Project Settings.
  2. Go to Custom Code.
  3. Paste the Glopzi script tag in the Head Code field.
  4. Save.
  5. Publish your project for the change to take effect.

Custom code is per-project, so the tag covers every page in that project. To open the editor, append ?glopzi-edit=1 to any published URL.

Note

Webflow’s own Interactions panel adds scroll-triggered effects, hover effects, and similar. They don’t conflict with Glopzi because we animate different elements. If you do apply Glopzi to an element that already has a Webflow interaction, the two apply additively; decide whether you want both or just one.

Framer

  1. From your Framer site, open Site Settings.
  2. Go to General → Custom Code.
  3. Paste the Glopzi script tag in the Start of head tag field.
  4. Save.
  5. Publish your site.

Same as Webflow: the tag applies to every page in the site, edit mode opens via the URL parameter.

Framer’s own Effects panel offers scroll transitions and similar. Same advice as Webflow: they don’t conflict with Glopzi at the architecture level, but applying both to one element stacks the effects.

Interaction with native animations

Both Webflow and Framer have their own animation systems. Glopzi co-exists with them peacefully:

  • Use the native system for hover states and scroll-into-view reveals on elements you can describe with their UI.
  • Reach for Glopzi when you want shared scroll checkpoints, per-property keyframe timing, multi-element choreography, WebGL backgrounds, or anything the native system can’t express.
  • Don’t apply both to the same element unless you’ve verified the result; the two apply additively and the visual outcome can be unpredictable.

Next steps