Skip to main content

Step 7: Exporting your Animations

Congratulations! Now that you've learned the whole setup for animation, feel free to continue animating to finish up your work, or continue ahead if you're ready to move on to exporting with Bodymovin.

Export Settings​

  1. Open the Bodymovin Panel: Select your main composition and modify the settings.
  2. Enable Required Settings:
    • Glyphs ✅
    • Include hidden layers ✅
    • Assets: ✅ Include in JSON
    • Export Modes: ✅ Standard, ✅ Demo
  3. Export and Test: Export to HTML, test the demo.html file in a Chromium based browser, to make sure it looks correct and playback is smooth.

Bodymovin Export File Structure​

After exporting your Instant Replay from Bodymovin, the folder structure of your project should look as follows.

File structure
  • 📁 Replay Folder (name of your Instant Replay)
    • 📄 data.json
    • 📂 demo
      • 🔵 data.html