How to render JSON files?

Design help Custom code
1

I found a tutorial about how to export AE to SVG animation.
http://airbnb.io/lottie/web/web.html

Is it possible to import this SVG animation to webflow as well?

An example on codepen: https://codepen.io/airnan/pen/PPdxxw

Many thanks!!!><

2

No for the Q about import (This is not regular animation - the magic happens by JS).

But, By adding custom code you could use this. This animation only works on your publish website (Like any other custom code).

outline:

  1. Plugin installation - Export JSON (From after effect software with the plugin)
  2. Add bodymovin files (cdn + before body) + animation files (from part 1) (See the order on the docs)
  3. Webflow - Add empty div add id named “some-name”
  4. Instilaze the animation of #some-name by js (getElementById)

Anyway you should follow the library docs (This is not a Webflow issue).

“Custom code” Start from simple examples like this one

Last: Learn this issue by Codepen (Create simple animation and try) - than only copy-paste the correct code and structure to webflow

1 Like
3

Hello, I am exporting Jpeg sequence from after effects and then using bodymovin but the .json is not displaying on webflow, tried many times. please advice!