Jump to content


Photo
- - - - -

Turn OFF ibox animation?


Best Answer Danny , 20 December 2013 - 12:55 PM

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>
Go to the full post


  • Please log in to reply
11 replies to this topic

#1 jane

jane

    Advocate

  • Members
  • 345 posts
  • Country: Country Flag

Posted 17 December 2013 - 08:24 PM

Hi,

 

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

 

How can I turn that off?

 

Thanks



#2 James B

James B

    Advocate

  • Moderators
  • 5126 posts
  • LocationSurrey - UK
  • Country: Country Flag

Posted 18 December 2013 - 07:06 AM

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.



#3 jane

jane

    Advocate

  • Members
  • 345 posts
  • Country: Country Flag

Posted 18 December 2013 - 01:02 PM

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.



#4 _jack

_jack

    Member

  • Members

  • 14 posts
  • Country: Country Flag

Posted 18 December 2013 - 07:23 PM

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



#5 James B

James B

    Advocate

  • Moderators
  • 5126 posts
  • LocationSurrey - UK
  • Country: Country Flag

Posted 19 December 2013 - 07:21 AM

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 :-)



#6 _jack

_jack

    Member

  • Members

  • 14 posts
  • Country: Country Flag

Posted 19 December 2013 - 08:36 AM

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?



#7 James B

James B

    Advocate

  • Moderators
  • 5126 posts
  • LocationSurrey - UK
  • Country: Country Flag

Posted 20 December 2013 - 07:12 AM

Hi Jack,

 

You should be able to put in just no-anim and the class should be applied. See http://www.pagelines...-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;
}



#8 Danny

Danny

    Is Awesome!

  • Moderators
  • 15163 posts
  • LocationManchester, UK
  • Country: Country Flag

Posted 20 December 2013 - 12:55 PM   Best Answer

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>

  • kajort likes this

#9 jmad

jmad

    Advocate

  • Members

  • 742 posts
  • LocationCentral Florida
  • Framework Version:DMS
  • Country: Country Flag

Posted 07 January 2014 - 05:02 PM

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


#10 James B

James B

    Advocate

  • Moderators
  • 5126 posts
  • LocationSurrey - UK
  • Country: Country Flag

Posted 08 January 2014 - 12:40 AM

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/p...ines/DMS/issues



#11 kajort

kajort

    Member

  • Members

  • 26 posts
  • Country: Country Flag

Posted 08 February 2014 - 08:37 PM

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

thx!!



#12 Danny

Danny

    Is Awesome!

  • Moderators
  • 15163 posts
  • LocationManchester, UK
  • Country: Country Flag

Posted 09 February 2014 - 10:20 AM

No problem.