I have exported and imported my animation from after effect to my wordpress website with WP BodyMovin and everything seems to be working fine except when I am scrolling the animation stops, I was wondering if there is a way for that NOT to happen.

https://www.pegasuseducatortraining.com/

I appreciate your help in advance.

The WP BodyMovin plugin was removed from WordPress.

Will it be back ?

If not, where can I download it ?

Hello!

I came up with the fact I have no longer the json files I uploaded in my pc and I need to download the ones I’ve uploaded. Is there a way to download them? Cause I can’t find them anywhere. Thank you!

I’m using animations within a slider and like other threads have mentioned, the shortcode “autoplay” setting doesn’t work as I’d like it to.

I can run bodymovin.stop() and bodymovin.play() but that affects all animations on the page. I’d much rather only start playing the instance that’s in view, which my slider library can help with.

Bodymovin allows methods to run on individual instances (“bodymovin.play() — with 1 optional parameter name to target a specific animation”, such as bodymovin.play('thisOne')) but that doesn’t seem possible here because all animations generated by the plugin don’t have a name specified. Running console.log(lottie.getRegisteredAnimations()); confirms this.

Would it be possible to give each animation a unique variable name so it could be targeted like this? Each container has a unique ID but I haven’t found a way to use it for targeting the animation within it.

Thank you!

Hello,
The Plugin works fine if we reload the page but if we try to load animation with ajaxify(https://4nf.org/) than animation is not working fine.

Hello,

The json are all blurry after uploading them with your feature.

And when trying to uninstall your plugin I get this : https://nimb.ws/YVGXrJ

Can you please help me fix this ?

Regards

Would it be possible to allow a fallback png in case the svg has problems loading? We’re using Bakery and Autoptimize which I think some users reported issues with. Just in case, I’d like to find out a solution where we can use a fallback just in case.

Hi,
I understand you store all files on your database. I seem to have misplaced my original file and was hoping you could send it to me? If this is possible what info do you require?

Many thanks

Chris

I use an image slider (the conventional slider of ELementor). There I would like to replace the SVGs through Animated SVGs. But the slider wants to select elements from the media library. I don’t see any option to include the shortcode instead.

Does anybody know a slider, where I can user the Bodymovin shortcode?

Hello,

Since the update of WordPress 5.4, the Bodymovin plugin no longer works and prohibits the display of the website’s web page.

The error message is:

Uncaught TypeError: Cannot read property ‘appendChild’ of undefined
???? at SVGRenderer.configAnimation (lottie.min.js? ver = 5.5.3: 6)
???? at AnimationItem.configAnimation (lottie.min.js? ver = 5.5.3: 9)
???? at AnimationItem.setParams (lottie.min.js? ver = 5.5.3: 9)
???? at Object.g [as loadAnimation] (lottie.min.js? ver = 5.5.3: 9)
???? at Object.loadAnimation (lottie.min.js? ver = 5.5.3: 1)
???? at d (wpbodymovin.min.js? ver = 2.1.0: 1)
???? at b (wpbodymovin.min.js? ver = 2.1.0: 1)
???? at HTMLDocument. <anonymous> (wpbodymovin.min.js? ver = 2.1.0: 1)
???? at i (jquery.js? ver = 1.12.4-wp: 2)
???? at Object.fireWith [as resolveWith] (jquery.js? ver = 1.12.4-wp: 2)

Do you have a solution for this? Are you preparing an update compatible with WordPress 5.4?

Thanks for your help.

I assume this plugin uploads the JSON file to the server. In which folder can we go and delete old JSON files that we no longer use?

Is there any way to add an alt tag from the plugin in cases where images are embedded in the .json file?

Hi,
I added a lottie file with shortcode to that page, and now the page is BLANK when opening from front-end, UNLESS logged in. When a user is logged in it is working normally. When i deactivate the bodymovin plugin, the page also works normally.
Please help asap.
Thank you very much!!

Hey Guys,

Love the plugin, works fantasticly.
Just a quick query, is it possible to loop certain slides?
I think I have the code to do it, just not sure where I can place it.

anim.addEventListener(‘DOMLoaded’, (e) => {
console.log(‘play’, anim);
/* anim.play(); */
anim.playSegments([[0,210],[25,210]], true);
});

Thanks so much,

Hello,

I am using animated SVG as icons in a clients website. The website is being developed in WordPress and I have installed the WP BodyMovin plugin. The Animated SVG shortcode is inserted inside a Revolution Slider.

The problem is that, on mobile devices, the animation begins smooth but performance gets slower with each loop cycle.

In the following example, we have a flamingo: https://www.designrepublikec.com/clients/galapagossafaricamp/tents/

Do you have any advice?

Hi

Can you please have a look? It works on pages but not on pop ups (Elementor). Thank you.

Hi,
First of all: an excellent plugin! Thank you very much for taking the time to build it.

Only one probem:
Shortcode generator issue.

Shortcode is generated and the animation is displayed on the page, but shotcodes parameters are not saved at all.

I mean Loop animation, Autoplay when in viewport, Autostop when out of viewport, Alignment etc. These parameters (all parameters) not working. They don’t even save. When I try to edit the animation, these parameters are reset each time.

Any idea how to solve this problem?

Thanks in advance and best regards

Hi

It is an awesome plugin. So helpful! Just wondering if there is a simple trick to have the shortcode shown on the Elementor Editor? Thanks

Hi,

I’ve been trying to figure this out for a while but I can’t seem to get it to work. On a forum I found this solution for a normal website. Adding this to wordpress doesn’t work. Can someone help me out and put me in the right direction? I’ve commented out two sections which I think need replacement? Thanks in advance.

var anim;
    var elem = document.getElementById('bodymovin')
    var animData = {
        container: elem, // WHAT DO I NEED TO PUT HERE?
        renderer: 'svg',
        loop: false,
        autoplay: false,
        rendererSettings: {
            progressiveLoad:false,
            preserveAspectRatio: 'xMidYMid slice'
        },
        path: 'data.json' // WHAT DO I NEED TO PUT HERE?
    };
    anim = bodymovin.loadAnimation(animData);

    $(window).scroll(function() {

        // calculate the percentage the user has scrolled down the page
        var scrollPercent = 100 * $(window).scrollTop() / ($(document).height() - $(window).height());

      
        console.log(anim.currentRawFrame);
     
        scrollPercentRounded = Math.round(scrollPercent);
       
        /*console.log( (scrollPercentRounded / 100) * anim.totalFrames );*/

        anim.goToAndStop( (scrollPercentRounded / 100) * 4000)
    });

Hi, Is there a way to sync the animation with a background vedio.

Hi there,

We have exported an animation created in After Effects using the Bodymovin plugin. We want to add it as a layer in ?Revolution Slider? in WordPress. There is an older thread with the same question but it is already closed and the answer does not help (we know we have to work with shortcode but somehow we can’t make it work). We have tried 2 ways:

1. Adding it to the custum CSS in the module “general options” of the Revolution Slider:
The animation is displayed in the preview window but does not show up on the actual site. And it is placed below and not on top of the first layer.

2. Adding it with the Bodymovin plugin shortcode:
The shortcode does not work at all in the Revolution Slider. It only works on a normal wordpress page if we add a new text block below the Revolution Slider, however again it is only displayed below the Revolution Slider instead of on top of it.

Is anyone familiar with this issue?
Many thanks in advance for your help.

• This topic was modified 5 years, 1 month ago by nina3123.

Hello,

the animation i implemented via shortcode does not work properly.
The graphics are loaded correctly, but the animation will only start, when the browser window is resized. Can someone explain this?

Best regards
Arne

Is there any way to add a class to the shortcode so that we could add a mouse hover event to it like Lottie has on step 8? https://www.flowbase.co/guides/lottie-webflow

As others mentioned, I would gladly pay for this feature. ??

Hello! We have a problem. Autoptimize doesn’t aggregate and minify css, html and js files on the pages we have plugin running. How can we solve this problem?

Hi,

Just wondering if there is a way to make my animation clickable and link through to another page?

PS. Love this plugin!

Thanks,

Robbie

Hello,

I am using a json from Lottie. Followed all the steps and published the animation. But the preview itself does not show. See Screenshot

Kindly suggest.

Thanks

I have an animation that works, but the width and height options in the shortcode generator do not work. There is no change in the animation regardless of the width/height in shortcode.

I can’t get the preview or shortcode to generate in the back end.

as suggested elsewhere:

Have tested the Aftereffects output files and they are fine.
Have tried the option on export to output the old .json format
Have replaced the lottie.js and lottie.min.js files in the database
Have edits the wp-bodymovin.php file to point to the latest version (after seeing the support thread before this one)
Have tried disabling Elementor / Elementor Pro in case it was that.

Still no preview or shortcode

Hi.

I created an animation with After Effects and exported using Bodymovin, but there’s a button on it an I would like to make it clickable. How can I do that?

Thanks.

I added the plugin and uploaded the json-file. It seems to be working fine in the preview but when adding the shortcode to a page it does not work. Not sure if it is relevant but when I click “Preview changes” in the Animation dashboard it gives me a 404. Could the animation not working have something to do with the theme I am using or something else?

On the link I have added there should be a lottie animation above the blue image but I just get an empty div.

Hope someone can help me.

Thanks,
Stig