After the new elementor upgrades, lottie no longer shows under ‘general’ and asks us to upgrade to elementr pro to access the module.

Warning: Trying to access array offset on value of type null in?…plugins/elementor/includes/base/controls-stack.php?on line?1576

Warning: Trying to access array offset on value of type null in?…/plugins/elementor/includes/base/controls-stack.php?on line?1578

any help please?

Can this plugin be used WITHOUT Elementor ?

Can it be used on any WordPress theme ?

===========

I am asking this because “WP Body Movin” was removed from the WordPress repository.

• This topic was modified 3 years, 8 months ago by Pigo3934blog.

Hi there,
The lottie isn’t showing up on my page?
This website is still very much a work in progress and I’m keen to finish it off!
Earlier it was showing up, but painfully slow (about 20 secs) – now it’s not showing up at all. It’s above the fold, so I really need it to load quickly.
I know that my page speed needs some work (main culprit google adsense) – but I’ve not been accepted onto the programme yet, and really I just want to trial it, so I don’t want to turn it off and I can’t optimise it until I’m on the programme.
I read an earlier post, which seemed to work, but now it does.
This is the code I have in the cpanel:

(function($, lottie) {
$(function() {
/**
* Run when an Animentor Lottie widget is ready
*
* @param {jQuery} $scope
*/
function lottieReady($scope) {
var $widget = $scope.find(‘.animentor-lottie-widget’);

// Check if widget has been initialized before
if ($widget.data(‘initialized’)) {
return;
}

// Mark widget as initialized
$widget.data(‘initialized’, true);

// Get all of its data attributes
var data = {};
var attrs = [
‘anim-loop’,
‘animation-path’,
‘autoplay’,
‘delay’,
‘direction’,
‘mouseout’,
‘mouseover’,
‘name’,
‘speed’
];

attrs.forEach(function(attr) {
var val = $widget.data(attr);
if (typeof val !== ‘undefined’) {
data[attr] = val;
}
});

// Search for elements with the .lottie and/or .bodymovin class
lottie.searchAnimations();

// Set a variable to indicate if there is a delay
var hasDelay = data.autoplay && parseInt(data.delay, 10) === data.delay && data.delay > 0;

// Load Lottie animation and store it for future reference
var animation = lottie.loadAnimation({
container: $widget[0],
renderer: ‘svg’,
autoplay: data.autoplay && !hasDelay,
loop: data[‘anim-loop’],
path: data[‘animation-path’],
name: data.name,
});

// Set animation speed (if applicable)
if (data.hasOwnProperty(‘speed’)) {
animation.setSpeed(data.speed);
}

// Set animation direction (if applicable)
if (data.hasOwnProperty(‘direction’)) {
animation.setDirection(data.direction);
}

// Set a timeout if there is a delay
if (hasDelay) {
setTimeout(function() {
if ($widget.length) {
animation.play();
}
}, data.delay);
}

if (data.mouseover) {
var mouseEnterHandler = function(e) {
animation.setDirection(data.direction);
animation.play();
};

var mouseLeaveHandler = function(e) {
switch (data.mouseout) {
case ‘no_action’:
break;
case ‘stop’:
animation.stop();
break;
case ‘pause’:
animation.pause();
break;
case ‘reverse’:
animation.setDirection(data.direction * -1);
animation.play();
break;
default:
animation.stop();
}
};

$widget
.off(‘mouseenter’, mouseEnterHandler)
.on(‘mouseenter’, mouseEnterHandler);

$widget
.off(‘mouseleave’, mouseLeaveHandler)
.on(‘mouseleave’, mouseLeaveHandler);
}
}

/**
* Return whether the Elementor editor is active or not
*
* @return {boolean} Whether on edit mode or not
*/
function isEditMode() {
return true;
}
}

/**
* Get all Animentor Lottie widgets and initialize them when on Elementor edit mode
* Required due to widgets in Elementor templates not triggering the frontend/element_ready hook
*/
function initLottieWidgets() {
// Run only when the Elementor editor is active
if (isEditMode()) {
// Iterate over each Lottie widget
$(‘.elementor-widget-lottie’).each(function(i, elem) {
lottieReady($(elem));
});
}
}

/**
* Add Elementor actions
*/
function addElementorHooks() {
// Run when a Lottie widget is ready
elementorFrontend.hooks.addAction(‘frontend/element_ready/lottie.default’, lottieReady);

// Initialize all Lottie widgets when on Elementor edit mode
initLottieWidgets();
}

if (window.elementorFrontend && elementorFrontend.hooks) {
// Hooks exist, add action
addElementorHooks();
} else {
// Wait for Elementor frontend to be initialized, before adding hooks
$(window).on(‘elementor/frontend/init’, addElementorHooks);
}
});
})(jQuery, lottie);`
`
Is there anything which I can add here which will make it appear straight away or pre-load?

Any help, greatly appreciated!

Hi, the end point only seems to go up to 100, and this is looping the animation way before the end of it. Any way of fixing this?

Hello, is it possible to add video links to my Lottie animation so that when clicked on, the video opens in a lightbox?
I tried adding shortcode to the video under “external link” but it doesn’t work. It only works when I input an actual URL. But I don’t want my visitor to leave my page when viewing the video.

Is there a workaround for this please? Not sure if this info helps but I’m using basic elementor free with essential elementor addons.

Thank you v v v much!!

How do I added? it is not shown on the Elementor widgets

What about last wordpress update to 5.6?
This plugin still works?
I read last update was 9 months ago

• This topic was modified 3 years, 10 months ago by giuseppebuccheri.

I’m so glad I found this plugin and I’m looking forward to integrating lottie files on my site – also I found this on the lottie site https://lottiefiles.com/interactivity

but I cant seem to find support for this level of interactivity ? is it possible can we build it into the plugin as an option or would I have to hack a theme to get that..?

Hi, I’m having trouble seeing the Lottie animation. When I have AdBlock turned on, the animations do not show. When I check on other websites, everything is displayed correctly also with AdBlock turned on.

Is it possible for an animation to only start playing on click instead of hover?

Hello! Having a bit of frustration with the Animentor plug-in in regard to justifying the JSON animation. Every other function seems to work just fine up until we need to center justify the file, and right when I do the graphic is pushed down to the bottom of the page, barely seen, outside of its own bounding box. I thought this might be a file issue, but the graphic is centered in a square format so there is no reason for the center justification to be reading it as needing to place it as it is doing. Playback looks great, scroll/mouse triggers are performing perfectly – I just need it to be in the center of the page without resorting to an “absolute” position setting, which isn’t ideal for a responsive site. Help is greatly appreciated!

I want to use a couple of animated Lottie animations (JSON files) in a slider. Unfortunately all slider modules (I’m using WordPress with Elementor) only accept real photo or video files from the media library.

Hi, I’ve installed the plug-in, but it’s not showing up as an Elementor widget. Can you help?

Hi, thanks so much for this great plugin!
That would be awesome to be able to scale the animation above 100% to whatever percentage we want to resize the animation.

Unable to make bodymovin work correctly. I’ve tried removing the cache plugin but still no success. Hopefully, you can figure out what is going on.

Hi,

I’m building a new website using Lottie for my SVG animations.
Now I added an animation over the title with a multiply blend mode.
In Safari it looks great, but on Google Chrome there is nog item at all.

Can you please take a look and maybe have any solution to fix this?
(Also tried to disable blend mode, or try other column/section…)

https://studiovibe.nl/home

Thanks!

Hi,
I’ve your plugin and using it with elementor pro.
For some reason lottie animations are not showing up on the page I put them at all but on the edit page of elementor they are showing up with no issue..

Can you please help me understand why is that and help me fix it?
I added a link to a page that suppose to have the lottie animation at the bottom of the page where you see the animated text (behind it) and if you do inspect in Chrome, you can see that there is an animation that suppose to show up.

Hope to hear from you soon with some help on the matter,
Best regards.

Hello,

I was wondering how to change colors? what css selector will do this I tried naming it and using color: but it didnt work

Hey, thanks for developing such cool plugin, im sorry to say that i have a big issue when Animentor is active, the pagespeed score decreases almost 60-70 points. One of the biggest issues is the javascript execution. Do you know how can i solve it?

Hi there,

first of all – lovely lightweight plugin to add lotties, so thank you for that!

I try to use it to toggle a menu on mobile, but I don’t find a solution to have the lottie reverse on second tap. (mouseclick).

Is this feature somehow accessable?

Thank you! ??

Hi,
Just wanted to let you know, there is a conflict with RankMath Plugin.
Cheers.

Hi,

I enjoy this plugin! Great work.
I have a suggestion – having the option to trigger the animation to play when it is visible.
Moreover, i’ve seen that there are ways to link the animation to the vertical scroll, so it’ll play by the scroll.
Would love to see that in further updates.

Keep up with the good work!

… but while saving with “Play on mouse over” I’m getting “Server Error (403 error)”

How could you install a loading page using these and Elementor?

Amazing plugin.

I’m trying to have the animation be under a button, yet have the animation continue running once it starts on mouse hover.

I activated “Play on mouse hover” but it looks like I can’t have the animation continue automatically once the mouse goes on the button. It just stops.

I know it’s very specific, but any hints on that front??