Can someone help me embed this code please?

Design help Custom code
1 
<style>
#bodymovin{
    background-color:#fff;
    width:100%;
    height:100%;
    display:block;
    overflow: hidden;
    transform: translate3d(0,0,0);
    text-align: center;
    opacity: 1;
}
</style>

<script src='https://cdnjs.cloudflare.com/ajax/libs/bodymovin/4.10.2/bodymovin.js'></script>

<div id="bodymovin"></div>

<script>
var animationData = {very long string...that does not fit here :-)...};
var params = {
    container: document.getElementById('bodymovin'),
    renderer: 'svg',
    loop: true,
    autoplay: true,
    animationData: animationData
};
var anim = bodymovin.loadAnimation(params);
</script>
2

Here’s how to embed custom code in your project.

3

Thank you I know how to use imbeds, but the problem is that this one has a string of animationData that is more than 10000 characters which is above the allowed limit

4

You can split the animationData string and place it in the site custom header code, which has a limit of 20000. Don’t forget to wrap it in script tags.

If that doesn’t work, you can hire me to code a workaround.

5

Hey @FilipSipos, @samliew also shared a really helpful Github hosting solution that might work.

But if it’s out of your skill level, I’d suggest paying him to do it for you :wink:

6

thanks @samliew and @quarshcreative, if I could I’d pay either one of you guys, but right now I really can’t spare a buck + I want to learn how to do it. the @samliew solution worked for some animations but most of them is way over 40000 characters so I’ll look into the github hosting @quarshcreative could you point me to that posting please?

7

So if you were using bodymovin, you should have a json file, right? If that is the case, throw that on github as a secret git and link to the raw git on the bodymovin div element on your page.

For instructions on how to use github for your js files, look at this topic here.

10 AM

Hope this helps.

1 Like
8

Thanks @bbrazis that is exactly what I ended up doing last night :slight_smile:

1 Like
9

@bbrazis’ post is exactly the one I was talking about!

Go team

1 Like
10

Hi @bbrazis

I saw in your picture, you have alot of Custom

attributes
Where can I find the list of attribute that works with bodymoniv?

Thank you

11

Hi @yuan,

Sorry for the late response. If you haven’t already solved this, you can check out the readme for bodymovin/lottie (it is also called lottie) and it will help you out.

The readme can be seen at the bottom of this page:
https://github.com/airbnb/lottie-web

Best,