Animate Livicons with JS events

This topic contains 6 replies, has 2 voices, and was last updated by  Sebastian 4 years, 2 months ago.

Author Posts

dnnsjsk

Hey!

I absolutely love MT, it really has been a live saver and made me want to dive more into the world of CSS and JS. I recently purchased LivIcons for WordPress and I want to use it’s API with Microthemer to achieve a hover animation.

Following scenario:

I added a html shortcode for LivIcons using Elementor onto my page using this code:

<span id="myspecialid" class="livicon-evo" data-options="
  name: thumbnails-big.svg 
"></span>

There is a button on the page, which should fire off the Icons animation using their API. The code for that is:
.playLiviconEvo()

I now select the button and go to Animation -> Select “mouseenter” for event -> and following JS Target:
#myspecialid.playLiviconEvo('duration', 5);

Am I doing this right? Obviously nothing is happening on the screen. Here is the link to their documentation: https://livicons.com/documentation-wordpress (Point 7: API)

Hopefully we can work this out together. 🙂


Sebastian

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


dnnsjsk

Hey, I sent you a message via the contact form you posted. 🙂


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


Sebastian

Also, here is how you would apply a CSS animation on the Livicon via Microthemer’s GUI when the button is hovered over:

CSS animation on Livicon when hovering over a button

To my surprise, both animations run together! The Livicon swings a bit as the SVG animation takes place. You may wish to remove the MT GUI animation though, it’s just there as an example.

Cheers,
Sebastian


dnnsjsk

WOW, you are an absolute legend my friend! Thank you so much.

Microthemer possibilites are truly endless.

Btw, I’ve read a bit through the forums and seen that new MT functionality is coming up which will allow for instant visual changes, since it won’t require internet connection or something? Is that planned for a big MT 6 release? 🙂

Thanks so much again!

Dennis


Sebastian

You’re welcome!

Yes, rendering all CSS styles instantly with JavaScript (rather than with PHP which involves a network connection) is on it’s way very soon. I’ll be working in this throughout July. It will just be a 5.x update. The animation and transition properties already apply instantly, I just need to roll this out for the other properties 🙂

You must login or register to reply to this topic.