Hello,

I have updated my demo page with a "point of view"-enabled animation,
which is an extension of the perspective animation. It tracks mouse
position in order to change animation speed and/or reverse animation
direction.

Animating background of nested div's is achieved through the
'afterUpdate' callback of a dummy S2 morphing effect on a style
property, which produces no visual changes:

PerspectiveEffect = Class.create({
        [...]
        initialize : function(container, options){
                [...]
                this.effect = new S2.FX.Morph(this.container, {
                        style : 'bottom: 1', // Morphing a property which produces no
visual change!
                        duration : this.options.duration,
                        fps : 30,
                        after : this.options.loop ? this.loop.bind(this) : Prototype.K,
                        afterUpdate : this.render.bind(this)
                });
                [...]
        }

This is clearly not efficient and I hope to release soon a native S2
effect through some patch or extension (this is why I need your
help! ;) ).

I wanted also to introduce some looping ability to the animation. It
couldn't find anything to force some effect to restart, therefore I
used the 'after' callback to replay animation:

loop : function(){
        this.effect.cancel(false);
        this.play.bind(this).delay(0); // Deferred command

As you can see, I have to cancel the effect and delay the play command
to ensure that effect will restart. Do you know some easier way to
achieve that? If you want to see looping in action, check this:
http://www.almeida.ch/

Thanks again!

Pedro De almeida

On 8 avr, 15:59, almeidap <almei...@gmail.com> wrote: