17 posts
  • Has collected 1+ items on Envato Market
  • Sells items exclusively on Envato Market
  • Located in France
  • Has been part of the Envato Community for over 2 years
chaman_matrix says

Hey peeps! I’m working on my first theme and I was wondering how to add transitions to my theme. I’ve done some research and found out that CSS3 transitions are easier to implement and perform better too. Jquery, on the other hand provides better support for older browsers. Which one do you guys prefer? Most people at this day and age use the latest browsers. Is jquery really worth the slow speed and extra effort or should I go with CSS3 transitions? Thank you.

22 posts
  • Has sold $100+ on Envato Market
  • Has collected 1+ items on Envato Market
  • Has been part of the Envato Community for over 3 years
  • Sells items exclusively on Envato Market
+1 more
envp says

Hi, how about detectign old browser and when it is – using jQuery, otherwise using CSS3?

5411 posts The Dude Abides
  • Located in United States
  • Elite Author: Sold more than $75,000 on Envato Market
  • Has sold $125,000+ on Envato Market
  • Has been part of the Envato Community for over 5 years
+9 more
CodingJack says

envp’s suggestion is a good one. You can test for it like this:

var supportsCssTransitions = canTransition(document.createElement("span").style);

function canTransition(style) {

    return "WebkitTransition" in style || 
           "MozTransition" in style || 
           "OTransition" in style || 
           "MSTransition" in style || 
           "transition" in style || false;

}
427 posts
  • Has been part of the Envato Community for over 3 years
  • Has sold $40,000+ on Envato Market
  • Has referred 1+ members
  • Sells items exclusively on Envato Market
+1 more
billyf says

For me, I’d prefer CSS transitions over those powered by Javascript simply because they are more efficient. If you have too much of animations powered by Javascript / jQuery, the site will become slow, especially when you scroll through the page.

For me, if the animation is not something crucial, I’ll just ignore older browsers which don’t support CSS transitions. After all, having a fast, usable website is much better than a beautiful, sluggish website.

20 posts
  • Has been part of the Envato Community for over 2 years
  • Has collected 1+ items on Envato Market
  • Sells items exclusively on Envato Market
zatolab says

For me, I’d prefer CSS transitions over those powered by Javascript simply because they are more efficient. If you have too much of animations powered by Javascript / jQuery, the site will become slow, especially when you scroll through the page. For me, if the animation is not something crucial, I’ll just ignore older browsers which don’t support CSS transitions. After all, having a fast, usable website is much better than a beautiful, sluggish website.

+1000 :)

6151 posts
  • Sells items exclusively on Envato Market
  • Elite Author: Sold more than $75,000 on Envato Market
  • Has sold $125,000+ on Envato Market
  • Has been part of the Envato Community for over 6 years
+8 more
VF says

@chaman_matrix, the decision can’t be made without knowing what old browsers your theme should support. Since it is unavoidable supporting IE8 (in TF), you may need fallback with jquery or pure javascript:

http://themeforest.net/forums/thread/internet-explorer-8-compatibility-is-still-required/80910
5411 posts The Dude Abides
  • Located in United States
  • Elite Author: Sold more than $75,000 on Envato Market
  • Has sold $125,000+ on Envato Market
  • Has been part of the Envato Community for over 5 years
+9 more
CodingJack says

For me, I’d prefer CSS transitions over those powered by Javascript simply because they are more efficient.

CSS3 is certainly faster than JavaScript timers, but not always faster than requestAnimationFrame depending on the browser.

For me, if the animation is not something crucial, I’ll just ignore older browsers which don’t support CSS transitions. After all, having a fast, usable website is much better than a beautiful, sluggish website.

Totally agree. What good is an animation on IE8 if it runs like crap anyway.

17 posts
  • Has collected 1+ items on Envato Market
  • Sells items exclusively on Envato Market
  • Located in France
  • Has been part of the Envato Community for over 2 years
chaman_matrix says

Thanks a lot guys!

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