Jump to content

Archived

This topic is now archived and is closed to further replies.

paulzz1

Disable animation on mobile

Recommended Posts

paulzz1+    3
paulzz1

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
greenfly    230
greenfly

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. 


The answer to many issues can be found by searching in the forum before posting as someone else  may very well have had the same problem before you have.  Also, reading the documentation can help you gain a good understanding of how everything works. 

 

Please do not send me private messages. Occam's razor - The principle states "Keep things simple!"

Share this post


Link to post
Share on other sites
Danny    1,327
Danny

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.

  • Like 1

Please search our forums, before posting!

Share this post


Link to post
Share on other sites
jmad+    80
jmad

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

Share this post


Link to post
Share on other sites
Danny    1,327
Danny

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


Please search our forums, before posting!

Share this post


Link to post
Share on other sites
paulzz1+    3
paulzz1

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
Danny    1,327
Danny

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.


Please search our forums, before posting!

Share this post


Link to post
Share on other sites
paulzz1+    3
paulzz1

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
Simon    247
Simon

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>
 
  • Like 1

Share this post


Link to post
Share on other sites
paulzz1+    3
paulzz1

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
Simon    247
Simon

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
paulzz1+    3
paulzz1

Brilliant. Works a treat. Many thanks.

Share this post


Link to post
Share on other sites
jmad+    80
jmad

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
jmad+    80
jmad

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
Simon    247
Simon

10 minutes on google:

 

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

Share this post


Link to post
Share on other sites
jmad+    80
jmad

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
Danny    1,327
Danny

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.


Please search our forums, before posting!

Share this post


Link to post
Share on other sites
Simon    247
Simon

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
jmad+    80
jmad

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
Danny    1,327
Danny

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
  • Like 1

Please search our forums, before posting!

Share this post


Link to post
Share on other sites
jmad+    80
jmad

Thanks.

 

 

Share this post


Link to post
Share on other sites
Danny    1,327
Danny

No problem.


Please search our forums, before posting!

Share this post


Link to post
Share on other sites

  • Similar Content

    • Lisa Haran
      By Lisa Haran+
      Hi 
      I have a map here http://www.iloveoffset.com/maps/
      I want to add several pointer locations to the map, but when I do they do not appear.
      On this map there are 2 pointer locations and as you can there is only one visible.
      Earlier today I added 7 and could only see 4 so there is something odd going on.
      My theme is up to date
    • clj182
      By clj182+
      Hello,
      I've been having trouble unlocking the template section for past couple of weeks. When I try clicking nothing happens. 
      I've deleted my custom css and removed plugins. Im down to having only the following plugins:
      Akismet
      Contact Form 7
      DMS Professional Tools
      Pagelines Updater
      WooCommerce
      It was working fine before i have no idea what's going on with it.
    • flourishdesignstudio
      By flourishdesignstudio
      My DMS 2 site http://www.heart-stone.com/ will not save any new custom css... I can still edit templates and publish those but any custom css that I enter never saves.
      All WP files, themes, and plugins are up to date. 
      Any thought about what might be causing this?
    • flourishdesignstudio
      By flourishdesignstudio
      Is there a way to edit the custom CSS via FTP? I know I can edit the custom code in the Chrome editor but is there a file path I can use to find and edit the CSS directly from our FTP?
      Thanks in advance for the help!
    • nizami
      By nizami+
      Using navbar section with correctly configured WP menu to display main navigation at https://elenaangel.com. 
      All fine in desktop viewport. Menu displays twice in hamburger mode. How to fix this please? 

×