44 posts
  • Has been part of the Envato Community for over 1 year
  • Sells items exclusively on Envato Market
  • Located in France
Potae says

Hello. I saw that many of you (in html templates) choose to disable css3 animations on mobile devices (through js). Is there something I should know? Is it related to performance issues or anything else? Thanks!

By the way. Is this a good way to detect mobile devices?

isMobileDevice = ( ( navigator.userAgent.match(/Android|webOS|iPhone|iPad|iPod|BlackBerry|Windows Phone|IEMobile|Opera Mini|Mobi/i) ) || ( $(window).width() < 768 ) ? true : false );

Or is it enough to use /Mobi and width? Or msMaxTouchPoints and /Mobi ?

PS: I saw some templates that disabled parallax backgrounds on mobile devices as well. I do not have much experience with mobile devices and what is good and what is not.

1148 posts
  • Has referred 1+ members
  • Has sold $1,000+ on Envato Market
  • Has been a beta tester for an Envato feature
  • Has collected 10+ items on Envato Market
+3 more
fillerspace says

I would avoid doing browser sniffing through user agent, because it is unreliable and hard to maintain. Users can change the user agent value for various reasons, which may lead to unexpected behavior. You could use the window width as a good approximation, and you could use media queries so you don’t need JS.

23 posts
  • Elite Author: Sold more than $75,000 on Envato Market
  • Has sold $75,000+ on Envato Market and is now an Elite Author
  • Sells items exclusively on Envato Market
  • Won a Most Wanted contest
+5 more
audemedia says

or you can use conditionizr

http://conditionizr.com/
44 posts
  • Has been part of the Envato Community for over 1 year
  • Sells items exclusively on Envato Market
  • Located in France
Potae says

Hmm, ok. And what about animations and parallax backgrounds on mobile devices? Should I disable them?

1148 posts
  • Has referred 1+ members
  • Has sold $1,000+ on Envato Market
  • Has been a beta tester for an Envato feature
  • Has collected 10+ items on Envato Market
+3 more
fillerspace says

Hmm, ok. And what about animations and parallax backgrounds on mobile devices? Should I disable them?

They should be disabled on all browsers and platforms! :evilgrin:

648 posts
  • Elite Author: Sold more than $75,000 on Envato Market
  • Has sold $250,000+ on Envato Market
  • Made it to the Authors' Hall of Fame
  • Had an item featured on Envato Market
+8 more
theAlThemist says

I am using modernizr and scripts which are not recommended to use on touch devices (like parallax for example) I am calling with $(“body.no-touch #your_selector”).your_script(); etc.

44 posts
  • Has been part of the Envato Community for over 1 year
  • Sells items exclusively on Envato Market
  • Located in France
Potae says

I am using modernizr and scripts which are not recommended to use on touch devices (like parallax for example) I am calling with $(“body.no-touch #your_selector”).your_script(); etc.

Ok, so you’re not using animations or parallax on mobile devices, and I like your method. But can you tell me why don’t you use animations on mobile devices? That was the question. Performance penalties? I mean, for the smartphones that are now on the market, I think some animations work good. I do not have a smartphone to verify.!!!

1148 posts
  • Has referred 1+ members
  • Has sold $1,000+ on Envato Market
  • Has been a beta tester for an Envato feature
  • Has collected 10+ items on Envato Market
+3 more
fillerspace says

But can you tell me why don’t you use animations on mobile devices? That was the question. Performance penalties? I mean, for the smartphones that are now on the market, I think some animations work good. I do not have a smartphone to verify.!!!

Animations are OK on the latest smartphone and tablet models, but older or cheaper models have poor performance with lots of animation. Since you can’t really target new vs old devices, better to disable all animation for mobile.

44 posts
  • Has been part of the Envato Community for over 1 year
  • Sells items exclusively on Envato Market
  • Located in France
Potae says


But can you tell me why don’t you use animations on mobile devices? That was the question. Performance penalties? I mean, for the smartphones that are now on the market, I think some animations work good. I do not have a smartphone to verify.!!!
Animations are OK on the latest smartphone and tablet models, but older or cheaper models have poor performance with lots of animation. Since you can’t really target new vs old devices, better to disable all animation for mobile.

Thank you fellow. That’s what I wanted to know.

Helpful Information

  • Please read our community guidelines. Self promotion and discussion of piracy is not allowed.
  • Open a support ticket if you would like specific help with your account, deposits or purchases.
  • Item Support by authors is optional and may vary. Please see the Support tab on each item page.

Most of all, enjoy your time here. Thank you for being a valued Envato community member.

Post Reply

Format your entry with some basic HTML. Read the Full Details, or here is a refresher:

<strong></strong> to make things bold
<em></em> to emphasize
<ul><li> or <ol><li> to make lists
<h3> or <h4> to make headings
<pre></pre> for code blocks
<code></code> for a few words of code
<a></a> for links
<img> to paste in an image (it'll need to be hosted somewhere else though)
<blockquote></blockquote> to quote somebody

:grin: :shocked: :cry: Complete List of Smiley Codes

by
by
by
by
by
by