CODEWITHSUNDEEP
javascriptanimationyuiyui3
Karl Rosaen
Karl Rosaen

Reputation: 4644

synchronized animations in YUI3?

Is it possible in yui3 to synchronize multiple animations so they progress together? Something similar to what is mentioned in the jquery 1.4 roadmap and demonstrated in this example http://ejohn.org/files/sync.

Upvotes: 1

Views: 468

Answers (2)

fimbulvetr
fimbulvetr

Reputation: 742

Since I hate to find non-answers to questions on SO, I thought I'd pitch in.

I figured this out, thanks to info in a bug report (http://yuilibrary.com/projects/yui3/ticket/2528886)

Here's what I had: two boxes, side by side. I wanted the left box to shrink (width wise) and at the same time the right box to grow.

(I use divs, with float:left/float right and overflow:hidden, due to some unfortunate decisions I made some time ago, but this should work for most other configurations.)

Here's what I did:


var anim = new Y.Anim({
        duration: 1.0
});

var elmLeftBox = Y.one('#leftBox');
var elmRightBox = Y.one('#rightBox');

var intWidth = parseInt(elmLeftBox.getComputedStyle('width'), 10);

anim.on('tween', function(e) {
    var elapsedTime = this.get('elapsedTime');
    var duration = this.get('duration');
    var easing = this.get('easing');

    var leftPos = easing(elapsedTime, intWidth, (-1 * intWidth), duration*1000);
    var rightPos = easing(elapsedTime, 0, intWidth, duration*1000);
    elmLeftBox.setStyle('width', leftPos);
    elmRightBox.setStyle('width', rightPos);
});

anim.on('end', function(evt) {
    //clean up after myself - don't want hardcoded widths
    elmLeftBox.setStyle('width', 0);
    elmRightBox.setStyle('width', '100%');
});

anim.run();

Works perfectly. Good luck!

Upvotes: 3

Tivac
Tivac

Reputation: 2573

YUI3 doesn't officially support that, but you could do something pretty similar by subscribing to the tween event and modifying the values yourself.

Upvotes: 1

Related Questions