Streaming live at 10am (PST)

Need help with implementing "Bodymovin"


#1

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: https://forum.webflow.com/t/anyone-using-bodymovin-html5-animation-with-webflow/25385

There is a way to implement this tool in webflow like you can see in this example:

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

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


#3

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: https://www.youtube.com/watch?v=_YUDOshaFUM

Greetings


#4
  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


#5

After doing all three, I got your animation displaying


#6

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


#7

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.


#8

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