• 0

DMS 2 Disable animation on mobile

Question

Posted · Report post

Hi

The animation effects are excellent on desktop but, on mobile, the animations happen when the browser stops scrolling. As most mobile devices have some kind of momentum scrolling it's possible to scroll, very slowly, past an area that has content that stays invisible because there hasn't been time to trigger the reveal.

Wondering if there's any way to turn of animations on mobile only?

Thanks

Paul

 

Share this post


Link to post
Share on other sites

22 answers to this question

  • 0

Posted · Report post

You chain it like css, with a comma

jQuery('div, h3, h1, span').removeClass('pl-animation')

 

OR you can use jquery find() function.

Share this post


Link to post
Share on other sites
  • 0

Posted · Report post

Could we have a link to your site so we can see how you have this set up?

 

You could either have a unique section just for mobile and enable/disable sections by CSS - or use mobile specific CSS to disable animations on mobile. 

Share this post


Link to post
Share on other sites
  • 0

Posted · Report post

You will likely need to use media queries to disable animation on mobile devices. However, I have just added this to tracker as a feature enhancement, as for me its a good idea to have as an option.

1 person likes this

Share this post


Link to post
Share on other sites
  • 0

Posted · Report post

Any word on if disabling all animation on mobile will happen?

Share this post


Link to post
Share on other sites
  • 0

Posted · Report post

No update as of yet, something like this doesn't take priority.

Share this post


Link to post
Share on other sites
  • 0

Posted · Report post

Hmmm. The significant performance hit on a more-than-a-year-old phone or tablet should be prioritised. Scrolls and fades can be extremely irritating when they jerk. Interface animations should be a choice.

Share this post


Link to post
Share on other sites
  • 0

Posted · Report post

I have just created a heavy animated page on my test site and then viewed it on an iPhone 3g and there isn't any significant performance issue.

Share this post


Link to post
Share on other sites
  • 0

Posted · Report post

Lucky you! Some animations run like a lame dog on my old 3GS. Fine on 5S.

T'would be excellent to have the option to disable though, no?

This shouldn't really be a debate on personal experiences but about whether features should be forced on a user or not.

Anyhoo, if it's not a Pagelines priority, no point discussing it.

Cheers.

Share this post


Link to post
Share on other sites
  • 0

Posted · Report post

Simple bit of javascript will fix it

 

<script>
jQuery( document ).ready(function() {
   var width = jQuery(window).width()       
    if( width < 480 )
     jQuery('div').removeClass('pl-animation')
});
</script>
 
1 person likes this

Share this post


Link to post
Share on other sites
  • 0

Posted · Report post

Excellent. Thanks Simon.

I know this isn't a 'let's learn jQuery' forum but some animations are attached to other bits, such as H3 for the standard title on a loop. Can I chain a list of selectors in the code you most kindly provided?

ie: jQuery('div','h3','something_else')?

Share this post


Link to post
Share on other sites
  • 0

Posted · Report post

Brilliant. Works a treat. Many thanks.

Share this post


Link to post
Share on other sites
  • 0

Posted · Report post

Sorry, I sort of asked this in another thread (but it was specific to iboxes) before I found this one again.  Instead of screen size how would this script be altered to effect mobile devices?  

 

I've been trying to resolve the sites don't load right on LTE when using safari iOS8 issue.  A new site I'm working on I used hero nav and limited to no animation...this improved the load on safari.  

 

I've tested some things and two main issues I'm running into are navigation and animation.  It seems that when Navigation is in the "fixed" header area then it doesn't load/function over LTE and animation doesn't load.  I realize this isn't a DMS specific issue but other than keeping the menu out of the fixed area would there be work arounds?

 

The code above didn't stop media box animations that were set in the individual boxes.  How would I deactivate that on mobile?

 

Thanks,

 

Jason 

Share this post


Link to post
Share on other sites
  • 0

Posted · Report post

Simon_P

 

Any help would be appreciated.  I would like to turn the animation on essentially everything off on mobile.  The media box scale doesn't work over LTE but the fade does.  Again, I realize this isn't DMS but I'm just trying to get a work around.

 

Being able to turn off all animation on mobile would be a great benefit.  However, what would I chain to turn the media box animation off?

Share this post


Link to post
Share on other sites
  • 0

Posted · Report post

10 minutes on google:

 

https://gist.github.com/Pross/586752869fa82d6598e2

Share this post


Link to post
Share on other sites
  • 0

Posted · Report post

Not sure what you mean by 10 minutes on Google...I had already searched Google and the forum, tried a few things but it didn't resolve.   I had the script but wasn't sure what pl-??? to remove.  Where would I find those referenced in the documentation or otherwise determine which animation is active...are those all the pl animations?  I see similar questions in the forum for other elements like pricing boxes.  What source did you reference on Google? 

 

As far as targeting just mobile do you recommend using the width var or something like...

 

$( document ).ready(function() {
var isMobile = window.matchMedia("only screen and (max-width: 760px)");

if (isMobile.matches) {
//Conditional script here
}
});

Share this post


Link to post
Share on other sites
  • 0

Posted · Report post

Javascript/jQuery are not my strong point, so I am not sure what to tell you. However, I am sure if you search Google, there is a snippet which allows you to target mobile devices, which you may be able to implement into your code.

Share this post


Link to post
Share on other sites
  • 0

Posted · Report post

Not sure what you mean by 10 minutes on Google...

It took me 10 minutes to find the answer when I searched Google.

 

I had the script but wasn't sure what pl-??? to remove.

If you had posted the code you had, it would have saved us 10 minutes and you would have got your answer quicker.

 

Where would I find those referenced in the documentation or otherwise determine which animation is active...are those all the pl animations?

There is no docs for this as we have not been asked about it before. I simply added all the pla classes on the page until animations stopped.

 

What source did you reference on Google?

I searched for for jQuery removeClass.

 

As for matchMedia() I dont know, I have never used it, but what I do know is your copy/paste code will not work in that state as WordPress will not let you use the $(), you have to substitute it for jQuery()

 

Hope this helps.

 

Sincere apologies to the opening poster for all these replies. 

Share this post


Link to post
Share on other sites
  • 0

Posted · Report post

Where would I find those referenced in the documentation or otherwise determine which animation is active...are those all the pl animations?

There is no docs for this as we have not been asked about it before. I simply added all the pla classes on the page until animations stopped.

 

That's not true.  Several members of this forum have in fact asked about turning off animations in various ways, be it on mobile for a media box of what have you.  Clearly, as a team you should realize that means it's not well documented or in this case not documented at all.  AGAIN where would I find all the pla classes documented (if I don't know them then I can't try them) or do I need to search through the css files?

 

Simon_P  I was simply trying to find a solution for a problem.  This is the support forum...right?

Share this post


Link to post
Share on other sites
  • 0

Posted · Report post

I have this on my to-do-list for the docs, in the meantime see below

 

pl-animation /* Must be used when using your own HTML */

 
  /* Example */
  
  <div class="pl-animation pla-fade">
    <p>Content...</p>
  </div>
  
pl-appear
pl-animation-group /* To be used with multiple items /*
 
  /* Example */
  <div class="pl-animation-group">
    <div class="pl-animation pla-from-left">
      <p>Content...</p>
    </div>
    <div class="pl-animation pla-from-right">
      <p>More Content...</p>
      <img class="..." src="...">
    </div>
  </div>
 
no-anim
pla-fade
pla-scale
pla-from-left
pla-from-right
pla-from-bottom
pla-from-top
1 person likes this

Share this post


Link to post
Share on other sites
  • 0

Posted · Report post

Thanks.

 

 

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

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