I guess I should introduce this small library to the world. Meet this stupid tween animator, clench, quoting from its readme,
Clench programmatically animate transition effect for DOM element using CSS3 transition features.
This blog is powered by ender’s libraries, so I think it’s only natural to just use these instead of jQuery’s. And actually, ender has animation library called morpehus, which is currently used by picto.
So why bothered re-inventing the wheel? Well, while morpheus is good, it’s using
requestAnimationFrame to render animation, and using css properties as well, I’m running into problem with chrome cannary and internet explorer, picto animate a single screen-covering
div element to emulate modal widget, this
div element supposed to be animated in fade in mode, from whole transparent to semi dimmed transparent, but the case with ie and chrome cannary is different, this
div keep pulsating back and forth without end. I tried to investigate this but end up getting confused since it looks like morpheus missed the end value for specified properties so it keeps animating to reach the value.
This is different from morpheus in which instead of slicing the values into step frames and animate it using
requestAnimationFrame, clench just let you specify the desired end value and feed that to css’s
-*-transition properties, letting the browser to do all the hardwork.
Clench object is a wrapper for DOM element/node, to construct clench object, one can specify node’s id or the node itself. For example:
1 2 3 4 5 6
As of currently, clench support move, i.e. transition from one position to another, resizing, opacity, and color change. The base animation method is called
animate and used like this:
1 2 3 4 5 6 7
Not really useful, but there’s some points you can get from the snippet before. First, yes,
animate takes object as parameter. The only mandatory field over there is duration, you can also specify the time unit like
ms (millisecond) or
s for second. Second, for numeric value properties, you can specify either constant value, or relative value just like my example. Above
+200 means that add current value with 200, it can also negative value for a substraction. To distinguish relative value from constant, it should be specified in string format.
As you may expect, clench animation is chainable, you can create transition sequence with chained call to
animate. Above I call
then function which execute arbitrary function after the animation finished.
ease field, it’s used to specify bezier curve values for css’s
cubic-bezier function for easing the transition. The
[0, 0, 1, 1] above is linear which means no easing, also some specific values can be used to create bouncing effect. MDN has more information about cubic-bezier here, and check this site to test some bezier curves.
There’s a shortened version of animate for resize, move, and opacity, each called respectively and can be used as follow:
1 2 3
Here be some demo: