Question

I’m using Mootools in a joomla site.

I want to do a basic banner rotator. Found a slider, SlideItMoo, that seems to mostly work.

But it seems to me the transitions are a bit jerky, especially at the end. Towards the end of a circ:out or sine:out transition, the new image takes noticable steps.

Maybe the problem is that the time-slice is too large-grained. Is there a way for me to reduce that time-slice to make the entire process smoother?
Or is there another way to make the transition appear smoother?

I’m using Mootools. Any solution really should focus on mootools; please don’t suggest I switch to an alternative framework.

Answer 1

I don’t know why the transitions appeared to be jerky to me. I did some analysis and graphed the transition curves, and didn’t see anything really obvious.

I ended up building my own transition, which to my eye appeared to produce a smoother visual effect.

// Requirements for a transition function are:
// - it should be continuous on the interval [0,1]
// - f(0) = 0, and f(1)= 1 .  f(x) between zero and 1
//   may fall out of that range.
//
// To guarantee the f(x)=1 , I produce a fn for which f(0)=0, 
// and f(1) is non-zero. Then I produce a second function which is the
// normalized transform of that, by simply using g(x)=f(x)/f(1), and
// use g(x) instead of f(x) as the transition function.  
// This guarantees that g(1) = 1.
//

function fn1(x) {
    return (Math.pow(x + 0.4, 3)  * Math.sin((x - 0.5)*3.1415926));
}

function g(x) {
    return fn1(x)/normalizationFactor;
}

normalizationFactor = fn1(1);
transitionCustom = new Fx.Transition(g);