• 0

Turn OFF ibox animation?

Question

Posted · Report post

Hi,

 

It seems the iBox has a default animation (fades in).

 

How can I turn that off?

 

Thanks

Share this post


Link to post
Share on other sites

14 answers to this question

  • 0

Posted · Report post

Try adding this to DMS Toolbar > Custom > Custom Scripts.

 

<script>
jQuery(document).ready(function(){
    jQuery('.section-ibox .ibox-media span').removeClass('pl-animation pl-appear animation-loaded');
});
</script>
2 people like this

Share this post


Link to post
Share on other sites
  • 0

Posted · Report post

Hi there,

 

Ibox doesn't have a default animation assigned to it in the standard dms, have you got anything in the styling class field for the ibox section or the column it's contained in? Or are you using a child theme, could be that there's a class is assigned if using a child theme.

 

Do you have a link to the live site we could look at.

Share this post


Link to post
Share on other sites
  • 0

Posted · Report post

Hi James,

 

Thanks for the reply. I don't have anything in the styling class field. On this page: the box sort of zooms in and I'd like it to remain static.

Share this post


Link to post
Share on other sites
  • 0

Posted · Report post

Hi Jane,

 

I was just looking for the same solution and finally worked out a way.  My DMS also has this animation set as default on iboxes despite the custom field being empty. I'm not a developer... so there may be a better way of doing this.  

 

If you edit the ibox section.php you can stop the animation across your whole website. This is located: wp-content/themes/dms/sections/ibox/section.php

 

Look for this bit:

<span class="ibox-icon-border pl-animation pl-appear pl-contrast %s" style="%s">

 

And change it to:

<span class="ibox-icon-border pl-animation no-anim pl-contrast %s" style="%s">

 

Save, and it should work!

 

Jack

Share this post


Link to post
Share on other sites
  • 0

Posted · Report post

Hi all.

 

Try adding 'no-anim' to the styling class for the boxes and save/publish.

 

Always best not to edit the core code for the sections as when you update it will be wiped/replaced and you'll have to do it again :-)

Share this post


Link to post
Share on other sites
  • 0

Posted · Report post

Hi James,

 

Can you clarify if anything else needs to be added to the styling class in addition to 'no-anim' to make this work?  I've tried it, along with 'pl-animation no-anim' and nothing stopped the pl-appear from happening.  

 

Or is there a way to phrase this in the custom code to make the change to iboxes global and permanent?

Share this post


Link to post
Share on other sites
  • 0

Posted · Report post

Hi Jack,

 

You should be able to put in just no-anim and the class should be applied. See http://www.pagelinestheme.com/dms-built-in-animations/

I'm not sure on the pl appear class I'll check with the core team to see how to adjust that.

 

You could try the following css code to see if that helps

 

.pl-pro-version .pl-appear {
    opacity: 1;
    transform: none !important;
}

Share this post


Link to post
Share on other sites
  • 0

Posted · Report post

I've installed DMS on 4 sites and on every single one there is default animation on the ibox MEDIA/ICON but not the text.  It's sort of a fade from left type of effect...sometimes I wonder if the Pagelines team is using the same version the clients are:)  Anyway,  adding the class "pl-animation" and then whichever class you want from the list below will work for either a section or an individual element in a section like ibox.  An example, would be pl-animation no-anim added to the one box in an ibox section.  That will remove the animation from that one ibox.  If you want to remove from the entire section then add the class in the section class not the individual box class.

 

The only issue with this is it animates or unanimates the ibox media and the text.  How do you change just the animation of the Media/Icon but not the text as well?  I think having a drop down for the animation is a great idea but until then, how is this accomplished?

  • no-anim
  • pla-fade
  • pla-scale
  • pla-from-left
  • pla-from-right
  • pla-from-bottom
  • pla-from-top

Share this post


Link to post
Share on other sites
  • 0

Posted · Report post

Hi there, there's no field to currently add an animation to just the image/icon, thats a good idea though. You can add this as a feature request to DMS tracker and it might make it into a future edition. https://github.com/pagelines/DMS/issues

Share this post


Link to post
Share on other sites
  • 0

Posted · Report post

wanted rid of this animation as well...danny's script fixes perfectly!

thx!!

Share this post


Link to post
Share on other sites
  • 0

Posted · Report post

No problem.

Share this post


Link to post
Share on other sites
  • 0

Posted · Report post

Danny,

 

How would I make your script work only on mobile devices?  Part of the sites not open on LTE appears to be solved by removing animation.

 

Jason

Share this post


Link to post
Share on other sites
  • 0

Posted · Report post

You could try enqueuing the script using the WordPress enqueue function with the wp_is_mobile function too. However, I am not having issues with any of my devices loading PageLines DMS powered sites on LTE nor do I experience issues with animations.

Share this post


Link to post
Share on other sites
  • 0

Posted · Report post

Danny,

 

What device are you using?

Share this post


Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!


Register a new account

Sign in

Already have an account? Sign in here.


Sign In Now