Need help with implementing "Bodymovin"

Hey guys!

I’ve found a very cool tool to implement animation on websites. The tool is already known in the forum as you can see in this topic: Anyone using "Bodymovin" html5 animation with Webflow?

There is a way to implement this tool in webflow like you can see in this example:
https://webflow.com/website/Bodymovin-test

I tried to copy all the settings I’ve found in the example:

  • script tag in the custom code head section for the specific page - to load the player (bodymovin.js)
  • set custom attributes to load the animation (.json)

But nothing shows up. I think there’s something missing. In the working example there is a svg-tag - in our actual site it’s missing (see image below)

Any idea to get this going?

Greetings


Here is my public share link: LINK

The “Test Div Bodymovin” is placed in the hero section:

2 Likes

Thanks for moving this topic to this category!

25 views and nobody can help? :pensive:

I hoped there is only a small piece missing. Maybe someone of the @staff can help? :innocent:

Greetings

Ok, last try bringing this topic up again.

I’ve also tested to get this animation to work with the exported code and some custom code additions - without success. I tried to recreate this little tutorial at the end (1:11 minute) of this video: bodymovin exporting tutorial - YouTube

Greetings

  1. Seems like you cannot host your json file here

    http://www.to-bicom.de/download/Website-Test/data.json

    as it is a different domain from copy-marketing-komplize.webflow.io

    Use this instead: How to host text files on Github

  2. Also, the element needs to have a class named exactly as bodymovin. test-div-bodymovin will not work.

  3. Don’t forget to delete the video, otherwise it will cover your animation.


Also, feel free to contact me for further code help and/or customization of third-party plugins

1 Like

After doing all three, I got your animation displaying

Oh man - big thank you again!

The result doesn’t look like it should, but maybe I have to check my rendered .json file. I’ll test a little and respond later if I found the solution for showing this black animation.

Greetings

Can you post screenshots of how you accomplished this? I’m trying to follow along but am unfortunately not having any luck. If you could make a super quick video, that would be unreal!

I love using Bodymovin in mobile apps but am struggling to get it working on webflow.

4 Likes

This topic was automatically closed 125 days after the last reply. New replies are no longer allowed.

2 posts were split to a new topic: Help with Bodymovin code