Definitely CSS triggered by a
toggle class when possible. I feel it's the smoothest and gives you the best experience. When CSS can't do the trick, I fallback to JS.
I am always inspired by Codrops' CSS animation demos. Mary Lou is a magician with this stuff! http://tympanus.net/codrops/category/playground/
Big fan of codrops too. Thanks for the toggle tip.
toggle.. can't wait to start using that
Also a big fan of codrops! I've actually built a few mini sites based on simple ideas from that site! Always inspiring.
+1 for codrops. I take the same approach as well. JS to add classes etc then CSS to actually do the magic stuff.
CSS to animate, JS to toggle animations (in most cases)
To learn it, I would suggest grabbing animate.css from Daniel Eden and just playing around while reading the source.
Easy way to get an understanding of more robust animations, keyframes, etc.
Thanks, super helpful.
Velocity.js for JS based animation. Works back to IE8 and Android 2.3, and it's blazing fast while offering a ridiculous amount of features in a small package: http://VelocityJS.org.
I may or may not be biased.
I've switched all my animation workflow to Velocity. That's the most maintainable solution for large scale app UI. It's performance is amazing also, faster then Transit and regular CSS transitions. http://julian.com/research/velocity/ and http://css-tricks.com/improving-ui-animation-workflow-velocity-js/
I have to agree. Velocity is amazing. :-D
I've just realized who you are :) Thank you for creating the library!
good to know. ill check it out, thanks.
CSS Transitions are incredible; Transitions handle the majority of my animation needs, and they naturally handle bi-directional animations.
CSS Keyframes offer a little more control, but are a little hard to wrangle for more complex/specific animations. They also take a little wizardry to get bi-directional animation the way you want.
good info, thanks.
I use JS to toggle a "visible" class when an object scrolls into a user's view, then CSS to animate an object.
I am a big fan of Greensock for creating a more advanced timelines and tweens. CSS3 animations can also be very handy for some simple but elegant effects.
Also, don't forget to Hardware Accelerate those CSS Animations (use translate3d as opposed to translate) to get super crisp animations on mobile devices.
good tip thanks!
When animating stuff, what I am looking for is the balance between performance and ease to maintain.
I use CSS animation if: 1. The animation is triggered by hover. 2. The animation properties are rotate, scale, transform, opacity, and color/background-color.
Other than that I prefer to use Velocity.js.
I use CSS for transitions and animations. The application I develop for uses AngularJS, so I use its classes, e.g., ng-enter and ng-leave, as needed for triggers when CSS alone won't work.
I use LESS for CSS and have made a number of mixins for commonly used transitions and animations. Some of those, specifically animations with keyframes are custom, for others I have used pre-made animations from Animate.CSS
I recently discovered AniJS. It has a simple declarative syntax using the "data" attribute. It makes it relatively simple to create complex animation events that likely wouldn't be possible with CSS alone. The only discouraging thing for me about AniJS, is that its logic is inline. That could potentially become a maintenance issue or create unexpected results when events trigger multiple animations on a page at once. Regardless it's fun to play with and I recommend checking it out for prototyping if nothing else.
never heard of AniJS, thanks.
I use jQuery Transit for a lot of stuff. It allows you to use the jQuery animation api but uses CSS animations to power them.
It also conveniently allows you to use numbers in your CSS values, like this:
CSS to animate and JS to toggle animations.
I typically like to use CSS for the actual animations because it really is much faster, but I use JS when I need more than hover, active, or focus states.
This is a really cool, simple to use library that sets up a bunch of animations. I've found it really helpful for a number of projects.
CSS wherever possible.
I'm using Animate.css
Do you use CSS or JS for animations/transitions?
They're tools, and I use them both. And together. Pretty much as others mentioned, plus the fact that in some cases CSS will do, and in others JS is required.
Same with the rest. CSS for transitions and animations. Then JS to initialize these animations if needed. Animate.css is one resource and then prototyping in CodePen to test.
Ultimately, CSS renders faster in browsers. JS serves a nice toolkit when CSS spec can't get the job done.
You are right. I stand corrected. I meant to specifically target jQuery and not generalize to all of JS. +1.
Where the design community meets.
Designer News is a large, global community of people working or interested in design and technology.