In general we can make animations using CSS @keyframes which is alright,but how can we make some more fancy animations such as we see in codepen using or integrating Javascript (which is just a logical language),
I am a bit wondered.
Well, you can string together CSS animations using javascript, but you’d need to synchronize animations to happen one after the other. Or there are animation libraries (jQuery’s animate() springs to mind), many of which are pretty robust.
Personally, I was just curious about the same thing, and I did a little digging – if you are up to the challenge, take a look at the uncompressed jQuery, and search for the string function Animation. This is what handles the whole animate bits of jQuery, and all readable. Complex as hell, but readable.
So they copy it from this documentation and paste it in the codepen for making animations more fancy
Changing library there is also ProcessingJS that let you draw and animate pretty cool things
1 Like
Not really – that is a guideline. A simple animation doesn’t require all that. You can simply do some by changing CSS properties pretty fast. Bear in mind, animations look smooth when we exceed 30FPS, or one move every 33 milliseconds (about). A very simple animation can be done by positioning an element absolutely, then quickly changing its left or top values, changing its size, changing its color… whatever.
I hacked together a really minimal js animation using no libraries whatsoever, see it here.
If, however, you want to do more complex things, then you really do want a library. They not only help with the animations, but with stringing them together. If I had wanted, I could have made that movement return a promise that was completed when the animation was done, so that I could have chained another animation with .then(), but that would have gotten pretty deep pretty quick.
So short answer, CSS animations are smooth, and slick, and easy to use. Basic JS animations are easily done, as you can see with that code sample. More complex animations (for example, within a game) will be far easier to manage with an animation library.
What can you do in JavaScript that you can’t do in CSS?
Perhaps conditional animations? I think it isn’t “with one vs. with the other”, it’s “with js and css interoperating intelligently.”
Ok, more to the point, what you (@topcoder) want to accomplish by leveraging JavaScript that you cannot accomplish just using CSS?
1 Like
There are a ton of libraries you can give a look. If you want to do it all yourself it can get pretty “mathy”, which I’m personally not a big fan of.
greensock showcases always have some neat stuff, so does codrops.
1 Like