Transparent animation on the web, answered.

How do I put a transparent animation on my Framer site?

Install Glimmerglass from the Framer Marketplace (free to install), open it in your project and add your license key. Drop in your animation: a file, a folder of frames or a .glim you already made. Choose a name, quality and description, then press Create Component.

Glimmerglass converts it on our server, uploads the finished media to your Framer project and places one component on your page, with every size inside. It moves and edits like anything else in Framer. The steps in detail are on the Framer plugin page.

Why does my transparent video show a black box?

Browsers disagree about which video format can carry transparency. Safari and every iPhone browser draw it from HEVC video (.mp4). Chrome, Edge and Firefox draw it from VP9 video (.webm). Give a browser the other format and the animation plays on black. A plain video export loses the see-through background altogether.

So a transparent animation needs both formats, and the page has to hand each browser the right one. Glimmerglass makes both, and its player picks for each visitor.

Why not just use a GIF or an animated WebP?

They play everywhere, but they are heavy and rough. From the same knight frames on our .glim page, a GIF is 1.37 MB, with 256 colors and on-or-off transparency. An animated WebP is 537 KB. The knight's largest Glimmerglass video is 117 KB.

My AI tool gave me an animated .webp. Can I use it?

Yes. Animated WebP is one of the formats Glimmerglass takes. It turns the file into proper transparent video in both formats, light enough for the real web.

Which files can I start from?

• MOV (ProRes 4444 works great), MP4 or WebM with transparency
• Animated PNG, animated WebP or GIF
• A folder of PNG or WebP frames, plus the frame rate
• A .glim you already made

Up to 256 MiB of source files, 600 frames per folder, 16 megapixels per frame and 120 seconds of animation.

Will it play on phones and in every browser?

It plays with real transparency in Safari, Chrome, Edge and Firefox. The player chooses the size and format each screen and browser shows best, and one size smaller on a slow connection, so phones do not download the desktop version. A browser that can play neither format shows the still picture instead.

Can I use it outside Framer?

Yes. Every component is made from a .glim, one file that holds the animation at several sizes and in both formats. It is in the Download file bundle, and it plays on any web page that loads the Glimmerglass player:

<script src="glimmerglass.min.js" defer></script>
<div data-glimmerglass="knight.glim">
  <img src="knight-poster-480.webp" alt="A knight on horseback">
</div>

On another domain, that host must allow the file with an Access-Control-Allow-Origin header.

What does it cost?

The plugin is free to install from the Framer Marketplace. Converting needs a license key: $8, one payment, a lifetime license for you on your own browsers and computers. You buy it from inside the plugin, and Gumroad emails it to you. All sales are final. More on the license help.

What happens to my files?

The plugin uploads your animation to our server in Germany over HTTPS for conversion. Your uploaded files are deleted as soon as the conversion finishes or fails, and the finished files as soon as the plugin has fetched them. Anything left behind is deleted 30 minutes after its upload began. The finished media lives in your Framer project. The full details are on the privacy page.

What is a .glim?

One file that holds one animation at several sizes, in the two video formats browsers need, with its still pictures and description inside. A visitor never downloads the whole thing: the player reads the list at the front and fetches the one video that fits. How a .glim works.