Lottie-web: Bodymovin in Wordpress

[staytoooned]

I'm not able to render a bodymovin animation in my Elegant Themes Divi Theme site. It works as a blank HTML page, but will not work in Wordpress.

I'm referencing the javascript source files and div exactly like a blank html page along with the CSS. Nothing happens when the page loads.

Please help!

[bodymovin]

Can you share a link where it fails so I can check it out?

[staytoooned]

I am not able to add the bodymovin to a Wordpress page directly. It can only work if I create a blank html page with the bodymovin and enter the URL using iframe on the Wordpress page. Any way bodymovin can work directly in Wordpress without using iframe?

Thanks.

Jane

On Jul 18, 2017, at 1:00 PM, hernan [e-mail] wrote:

Can you share a link where it fail so I can check it out?

—
You are receiving this because you authored the thread.
Reply to this email directly, view it on GitHub https://github.com/bodymovin/bodymovin/issues/549#issuecomment-316129095, or mute the thread https://github.com/notifications/unsubscribe-auth/AAYe_dPDMQGILAcXViqB1EFttSkz4BE1ks5sPOStgaJpZM4ObouB.

[bodymovin]

Link with the issue?
as long as you can include js files to your wordpress, it should work.

[staytoooned]

Yes, I added the link to the js files and it didn’t work. It may have something to do with rendering SVG files in Wordpress.
The only way to display the bodymovin is by using the iframe element and running it from a URL.

On Jul 19, 2017, at 9:15 AM, hernan [e-mail] wrote:

Link with the issue?
as long as you can include js files to your wordpress, it should work.

—
You are receiving this because you authored the thread.
Reply to this email directly, view it on GitHub https://github.com/bodymovin/bodymovin/issues/549#issuecomment-316382070, or mute the thread https://github.com/notifications/unsubscribe-auth/AAYe_SOhgLxF4EA6fvr24gHl7Ex89tEzks5sPgEqgaJpZM4ObouB.

[DaanDirk]

I have bodymovin running on a couple of wordpress sites. So it can be done. :-)
Have you checked whether bodymovin.js and your script are really on the page and accessible when the page is loaded? If not fix that. Some browsers also want everything to be from the same domain.

You can add some code to your functions.php so you can put .js and .json files into the media library.
/* add filetype json to media library */
function my_myme_types($mime_types){
$mime_types['json'] = 'json'; //Adding json extension
$mime_types['js'] = 'js'; //Adding js extension
return $mime_types;
}
add_filter('upload_mimes', 'my_myme_types', 1, 1);

Then make sure the js is below the bodymovin div like so:
<div style="width:100%;float:left;" id="bodymovin"></div>
<script src=" /wp-content/uploads/bodymovin.js" type="text/javascript"></script>
<script src=" /wp-content/uploads/yourbodymovinscript.js" type="text/javascript"></script>
Maybe you need to use a plugin like 'Raw HTML' to prevent wordpress from doing some automatic formatting you don't want to happen.

On top of that, in your script make sure the page is loaded before the you play the animation:
anim.addEventListener("DOMLoaded", function() {
anim.play();
}

Did you check whether the bodymovin div is visible, has width and height etc?
In most cases you will have to change/set the css for the bodymovin div.
Inspect the bodymovin div with your browser (right click: or something like that) and check whether you can see the svg that bodymovin loads onto the page.
If not, bodymovin isn't loading the animation properly.
If yes, you need to change the css in on your page to make sure the div and its content can be seen.

Good luck!

[staytoooned]

Thank you for all your help! I’ll let you know if this works.

On Jul 20, 2017, at 4:10 AM, DaanDirk [e-mail] wrote:

I have bodymovin running on a couple of wordpress sites. So it can be done. :-)
Have you checked whether bodymovin.js and your script are really on the page and accessible when the page is loaded? If not fix that. Some browsers also want everything to be from the same domain.

You can add some code to your functions.php so you can put .js and .json files into the media library.
/* add filetype json to media library */
function my_myme_types($mime_types){
$mime_types['json'] = 'json'; //Adding json extension
$mime_types['js'] = 'js'; //Adding js extension
return $mime_types;
}
add_filter('upload_mimes', 'my_myme_types', 1, 1);

Then make sure the js is below the bodymovin div like so:

Maybe you need to use a plugin like 'Raw HTML' to prevent wordpress from doing some automatic formatting you don't want to happen.

On top of that, in your script make sure the page is loaded before the you play the animation:
anim.addEventListener("DOMLoaded", function() {
anim.play();
}

Did you check whether the bodymovin div is visible, has width and height etc?
In most cases you will have to change/set the css for the bodymovin div.
Inspect the bodymovin div with your browser (right click: or something like that) and check whether you can see the svg that bodymovin loads onto the page.
If not, bodymovin isn't loading the animation properly.
If yes, you need to change the css in on your page to make sure the div and its content can be seen.

Good luck!

—
You are receiving this because you authored the thread.
Reply to this email directly, view it on GitHub https://github.com/bodymovin/bodymovin/issues/549#issuecomment-316630035, or mute the thread https://github.com/notifications/unsubscribe-auth/AAYe_delFZl5xd21EEalTtuX7TFodO8Aks5sPwuJgaJpZM4ObouB.

[staytoooned]

I tried everything you suggested and nothing works. The only thing that works in Wordpress is if I put a basic html file in the same folder as the data.json file and use an iframe element sourcing the html url.
I’m using the DIVI theme from Elegant Themes.

On Jul 20, 2017, at 4:10 AM, DaanDirk [e-mail] wrote:

I have bodymovin running on a couple of wordpress sites. So it can be done. :-)
Have you checked whether bodymovin.js and your script are really on the page and accessible when the page is loaded? If not fix that. Some browsers also want everything to be from the same domain.

You can add some code to your functions.php so you can put .js and .json files into the media library.
/* add filetype json to media library */
function my_myme_types($mime_types){
$mime_types['json'] = 'json'; //Adding json extension
$mime_types['js'] = 'js'; //Adding js extension
return $mime_types;
}
add_filter('upload_mimes', 'my_myme_types', 1, 1);

Then make sure the js is below the bodymovin div like so:

Maybe you need to use a plugin like 'Raw HTML' to prevent wordpress from doing some automatic formatting you don't want to happen.

On top of that, in your script make sure the page is loaded before the you play the animation:
anim.addEventListener("DOMLoaded", function() {
anim.play();
}

Did you check whether the bodymovin div is visible, has width and height etc?
In most cases you will have to change/set the css for the bodymovin div.
Inspect the bodymovin div with your browser (right click: or something like that) and check whether you can see the svg that bodymovin loads onto the page.
If not, bodymovin isn't loading the animation properly.
If yes, you need to change the css in on your page to make sure the div and its content can be seen.

Good luck!

—
You are receiving this because you authored the thread.
Reply to this email directly, view it on GitHub https://github.com/bodymovin/bodymovin/issues/549#issuecomment-316630035, or mute the thread https://github.com/notifications/unsubscribe-auth/AAYe_delFZl5xd21EEalTtuX7TFodO8Aks5sPwuJgaJpZM4ObouB.

[bodymovin]

Do you have a link with your wordpress site loading the bodymovin script that I can check?

[staytoooned]

I’m running bodymovin with the iframe on this page: http://www.maxitmedia.co http://www.maxitmedia.co/

Here’s a page where it’s not working:

http://www.maxitmedia.co/portfolio/ http://www.maxitmedia.co/portfolio/

On Jul 20, 2017, at 6:26 PM, hernan [e-mail] wrote:

Do you have a link with your wordpress site loading the bodymovin script that I can check?

—
You are receiving this because you authored the thread.
Reply to this email directly, view it on GitHub https://github.com/bodymovin/bodymovin/issues/549#issuecomment-316847692, or mute the thread https://github.com/notifications/unsubscribe-auth/AAYe_VA7VCnSalZjnL3NWLUu7J8SbRacks5sP9QQgaJpZM4ObouB.

[bodymovin]

It's looking for the data.json file in this location:
http://www.maxitmedia.co/portfolio/data.json
but it's returning an error.
can you make sure it's uploaded there or specify another route?

[staytoooned]

I tried specifying the route in the index.js file:

http://www.maxitmedia.co/scripts/maxit/devices/data http://www.maxitmedia.co/scripts/maxit/devices/data.json.json

Please check it again. Thank you.

On Jul 20, 2017, at 6:30 PM, hernan [e-mail] wrote:

It's looking for the data.json file in this location:
http://www.maxitmedia.co/portfolio/data.json http://www.maxitmedia.co/portfolio/data.json
but it's returning an error.
can you make sure it's uploaded there or specify another route?

—
You are receiving this because you authored the thread.
Reply to this email directly, view it on GitHub https://github.com/bodymovin/bodymovin/issues/549#issuecomment-316848407, or mute the thread https://github.com/notifications/unsubscribe-auth/AAYe_S5MlOUEFvuNEJX719Pn2WEj2BqDks5sP9TxgaJpZM4ObouB.

[bodymovin]

it seems to be working right?
I see a device animation as soon as I visit the portfolio page

[staytoooned]

I’ll try it in a different browser. It might be cached to the old one.

On Jul 20, 2017, at 6:40 PM, hernan [e-mail] wrote:

it seems to be working right?
I see a device animation as soon as I visit the portfolio page

—
You are receiving this because you authored the thread.
Reply to this email directly, view it on GitHub https://github.com/bodymovin/bodymovin/issues/549#issuecomment-316850225, or mute the thread https://github.com/notifications/unsubscribe-auth/AAYe_a8ldY8i0Ub5BLwYijlmuiwUfQH8ks5sP9c1gaJpZM4ObouB.

[staytoooned]

Looks like it’s working!

How can I specify a smaller height and width?

Thank you so much for your help!

On Jul 20, 2017, at 6:40 PM, hernan [e-mail] wrote:

it seems to be working right?
I see a device animation as soon as I visit the portfolio page

—
You are receiving this because you authored the thread.
Reply to this email directly, view it on GitHub https://github.com/bodymovin/bodymovin/issues/549#issuecomment-316850225, or mute the thread https://github.com/notifications/unsubscribe-auth/AAYe_a8ldY8i0Ub5BLwYijlmuiwUfQH8ks5sP9c1gaJpZM4ObouB.

[bodymovin]

the svg takes the space available from it's parent container.
You'll probably need to change the style applied to your div with id "bm"

[staytoooned]

Thanks!

On Jul 20, 2017, at 6:51 PM, hernan [e-mail] wrote:

the svg takes the space available from it's parent container.
You'll probably need to change the style applied to your div with id "bm"

—
You are receiving this because you authored the thread.
Reply to this email directly, view it on GitHub https://github.com/bodymovin/bodymovin/issues/549#issuecomment-316852397, or mute the thread https://github.com/notifications/unsubscribe-auth/AAYe_WD6ly8Ldd5YUPBp1RH1dB74VhNcks5sP9ncgaJpZM4ObouB.

[Digital-Harmony]

@staytoooned How did you get this working with the Divi theme? Could you please share the steps you took, as I am trying to do the exact same thing. Thanks!!

[nilooy]

I need help on this.i'm using the divi theme It preview the animation when i directly add the code to header.php but when i try to add on the page by

it doesn't work.
This is the link of my page- https://integratedmobilemarketing.com/dev12/311-2/
it gives me these errors-

Uncaught TypeError: Cannot read property 'appendChild' of undefined
at SVGRenderer.configAnimation (bodymovin.js:5)
at AnimationItem.configAnimation (bodymovin.js:9)
at XMLHttpRequest.r.onreadystatechange (bodymovin.js:9)

i added the necessary json and bodymovin.js file

path: 'https://integratedmobilemarketing.com/dev12/wp-content/uploads/2017/10/data.json'
<script src="https://integratedmobilemarketing.com/dev12/wp-content/uploads/2017/10/bodymovin.js" type="text/javascript"></script>

Please help!!!

[bodymovin]

It seems to be working.
Did you fix it?

[nilooy]

yes, thanks a lot for the post @bodymovin i pasted the script code in header.php like a stupid , lastly i just pasted them to footer.php and it worked... awesome..thanks a lot

[Ergoberg]

@DaanDirk @staytoooned @rezwanferdous If any of you would be able to share a more comprehensive guide on how you made it work with Wordpress I would be immensely grateful!

[tesla4]

Hello everybody

Since I had the same problem distributing Bodymovin files to Wordpress, I'd like to share my workaround. Expecially @DaanDirk 's post made it happen for me. After all, it's ridiculously simple:

I started with the exported "demo.html" file and its "data.json". Also I had two images in a folder called "images".

1. Copy or directly edit the "demo.html" file. Get rid of everything that is not Javascript: Delete all html-tags including the whole style-Section, the \ tags. Make sure to delete both (At a first try I missed the one right after the first very long javascript part).

2. Now you should have nothing but Javascript in your file. A first part with this confusing code block and a second part with the variables. Now save it as a Javascript file (e.g. "bodymovin.js").

3. Because Wordpress' pages are mainly blocks of PHP, references to subfolders, files etc. is not easily manageable by hand. This means, for the reference to our animation files, we we have to find a folder on Wordpress that doesn't change relating to the page-position. Therefore we can't copy the files into the child theme folder. It's even simpler: We upload it straight to wordpress with the media uploader. The media upload is blocked for *.js and *.json files but we can change that:
   function my_myme_types($mime_types){
$mime_types['json'] = 'json';
$mime_types['js'] = 'js';
return $mime_types;
}
add_filter('upload_mimes', 'my_myme_types', 1, 1);
   Just insert this code into the "functions.php" of your child theme e.g. at the end of it. If you don't have a "functions.php" file in your child theme folder, you can just create one and fill it with this code (surrounded by <?php and ?>).

4. You need to change more code - the reference to the media upload folder - in your Javascript file (e.g. "bodymovin.js"). Go to the part where it says var params = {. Here, delete the line animationData: animationData. We will replace it: Before the closing brace, add two new parameters. pathfor the url to the *.json file and assetsPathfor the images. The code should look similar to this:
   var params = {
container: document.getElementById('lottie'),
renderer: 'svg',
loop: true,
autoplay: true,
path: '/wp-content/uploads/data.json',
assetsPath: '/wp-content/uploads/'
};
   Change "lottie" to whatever id you want.

5. Now open the Wordpress surface and go to the media uploader. Make sure that uploaded files won't get a permalink with dates. All files need to be in the folder "/wp-content/uploads/". If that's not the case, you can change media permalinks by "settings > media" on Wordpress. _It should also work with permalinks with a date but this version made it easier to me. I haven't tried it but I think you just need to adjust the urls in steps 4 and 8 then. Nevertheless all images should be in the same folder._

6. After saving, upload your Javascript file, your JSON-file and all the images to Wordpress using the media uploader in the Wordpress surface.
   

7. Now place your Bodymovin \<div id = "lottie"></div> anywhere you like. Change "lottie" to whatever id you want. Make sure it's the same as in your Javascript file container: document.getElementById('lottie'). I wanted to have the Bodymovin animation in the title segment of every single page, so I wrote it into the "header.php" file in my child theme folder. Style it then with css (height, width, etc.).

8. The last step is to reference to your uploaded Javascript file. I did this in the "footer.php" right above the closing body tag \. Add this line:
   <script src="/wp-content/uploads/bodymovin.js" type="text/javascript"></script>
   Change "bodymovin" to whatever Javascript file name you chose.

I hope this workaround is comprehensible and will save you from experimenting. A great "thank you" to the developer of Bodymovin, just found this tool yesterday and I'm sure that I'm going to use it frequently. I'll support it definitely.

BR Chris

[dolanb12]

After a day... still can't get this to work @tesla4

Did everything I could. Any suggestions?

There should be a button animation showing at the bottom in the section with headline "We look forward to speaking with you."

http://qz1.d9c.myftpupload.com/

Thanks,

Brendan