Animations and Videos
Enable animations, preview on canvas, export as GIF, and render MP4 via Cloud API
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-exportimport { 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