Animations and Videos

How to enable animation support?

import { unstable_setAnimationsEnabled } from 'polotno/config';

unstable_setAnimationsEnabled(true);

When you enable animations, Polotno will add additional UI in the toolbar to change animation properties of the selected object, show a “Videos” side panel with a library of stock videos, and adapt the Pages component with scene preview.

You can preview animations and export an animated scene as a GIF on the client side programmatically:

store.play();
store.stop();
await store.saveAsGIF();

Video Export Options

Polotno supports two methods for exporting animated designs to MP4 video:

Client-Side Video Export

For browser-based video generation without a server, use the @polotno/video-export package. All encoding happens directly in the user's browser:

npm install @polotno/video-export

import { storeToVideo } from '@polotno/video-export';

const videoBlob = await storeToVideo({
  store,
  fps: 30,
  pixelRatio: 2,
  onProgress: (progress) => {
    console.log(`Progress: ${Math.round(progress * 100)}%`);
  },
});

// Download the video
const url = URL.createObjectURL(videoBlob);
const link = document.createElement('a');
link.href = url;
link.download = 'video.mp4';
link.click();

Export speed depends on user hardware. High FPS or complex designs may take longer to process.

See the full Video Export documentation for complete API reference and live demo.

Server-Side Video Export

For production-grade video rendering with consistent performance, use the Cloud Render API. This option provides faster rendering and doesn't depend on client device capabilities.

Audio Support

Add background music or sound effects to your animated designs. Audio tracks sync with the video timeline and export together with animations.

See the Audio documentation for complete details on adding and managing audio tracks.

Live demo

Related Pages

• Video Export - Detailed client-side video export documentation
• Audio - Add background music to animated designs
• Cloud Render API - Server-side video rendering
• Import and Export - Overview of all export formats