Animate Livicons with JS events

Hey,

So great to hear you’re learning with MT! I’m happy to help you achieve your animation goals. I’m new to Livicons, so thanks for passing on their API. In order to advise you best, I might need access to your site in order to experiment a little. You can provide access via our secure contact form if you wish.

However, for now I can tell you that Microthemer’s JS Event target field is just for entering a regular CSS selector, or some MT-specific syntax (loosely based on JQuery) for defining a dom path relative to the element that triggered the JS event (e.g. mouseenter). A use case for this might be showing some call to action text below a button when the user hovers over the button.

But in the case of integrating with Livicons, if you want to enter some JavaScript code e.g.:

//you can assign your CSS selection to a variable.
var my_livicon = jQuery('#your_id_or_.your_class');

//a first creation with options as Object
my_livicon.addLiviconEvo({
    name: 'bell.svg',
    size: '120px',
    duration: 3,
    drawOnViewport: true
});

you will need to do this via Microthemer’s JavaScript editor, accessed from View > Code editor > (the last tab).

Due to the way livicons work, I think it’s necessary to trigger their animated SVG routines via JavaScript, rather than running a CSS animation on them via Microthemer’s animation GUI fields. That is an option too BTW, but I think from your initial posting that you would like to trigger the cool preset animations that Livicons provides. And this must be done with JS code if you want them to trigger on an event like mouseenter.

I hope that makes sense. I can give you more specific guidance if you don’t mind sending me access to your site.

Thanks!
Sebastian

Thanks for sending over the details. I’ve added some code via the custom code editor which triggers the livicon animation routine when a user hovers over the button:

// Ensure all scripts have loaded (e.g. Livicons) by adding code inside document ready event
jQuery(document).ready(function($){
    
    // define variables for targeting the button and the livicon
    var $my_button = $('.elementor-element-e268666 .elementor-button');
    var my_livicon = $('#home-1');
    
    // add mouseenter event to button
    $my_button.mouseenter(function(){
        
        // trigger the livicon animation
        my_livicon.playLiviconEvo({
            delay:0,
            duration: 'default',
        });
        
    });
    
});

Is that the functionality you were after?

In the Livison docs I saw an option called eventOn which might do something similar without the need to write custom JavaScript. You would set the eventOn value to the selector used for the button (.elementor-element-e268666 .elementor-button).

But I wasn’t sure how to integrate that with the shortcode you added in Elementor. And as you expressed an interest in learning JavaScript I thought the above example might be a helpful starting point for you.

Cheers,
Sebastian