code javascript css

I guess I should introduce this small library to the world. Meet this stupid tween animator, clench, quoting from its readme, {% blockquote %}Clench programmatically animate transition effect for DOM element using CSS3 transition features. {% endblockquote %}

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.

So I come up with something that make use native browser’s transition effect while still controllable via javascript. 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.