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 1 year
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?

5325 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;

}
357 posts
  • Has been part of the Envato Community for over 2 years
  • Has referred 1+ members
  • Has sold $40,000+ on Envato Market
  • 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.

18 posts
  • Has been part of the Envato Community for over 1 year
  • 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 :)

5903 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
5325 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 1 year
chaman_matrix says

Thanks a lot guys!

by
by
by
by
by
by