Polymer - Web Animations stagger AnimationSequence

Question

I'm trying to stagger my AnimationSequence with a negative delay but the endDelay property does nothing when I use it on the AnimationSequence:

var el = this.shadowRoot.querySelectorAll('.nav-item');

var animations = [];
for (var i = 0; i < el.length; i++) {
    animations.push(el[i].animationGroupIn);
}

this.animationSequence = new AnimationSequence(animations, {endDelay: -100});
document.timeline.play(this.animationGroup);

el[i].animationGroupIn is an AnimationGroup that contains two Animations.

I did manage to get it to stagger with a negative endDelay by modifying the Web Animations-next source (web-animations-js/src/animation-constructor.js - line 17-19):

function groupChildDuration(node) {
    return node._timing.delay + node.activeDuration + node._timing.endDelay - 100;
};

Is there a public property for AnimationSequence so Animations can be overlapped to make the animations appear more fluid?

score 0 · Accepted Answer · answered Feb 18 '15 at 03:22

As AnimationSequence will animate items one after another, I don't think it's suitable for this kind of stagger animation.

How about just using a AnimationGroup to start the animations all together but giving a short incremental delay to each of them in the right order?

I created a small demo as below, not sure if it's exactly the effect you are looking for though.

function animationGroupIn(item, i) {
    var animation1 = new Animation(item, [{ opacity: '0' }, { opacity: '1' }], { duration: 800, fill: 'both', delay: 200 * i });
    var animation2 = new Animation(item, [{ transform: 'translateX(24px)' }, { transform: 'translateX(0)' }], { duration: 800, fill: 'both', easing: 'ease-out', delay: 200 * i });

    return new AnimationGroup([animation1, animation2]);
};

var el = document.querySelectorAll('.nav-item');

var animations = [];
for (var i = 0; i < el.length; i++) {
    animations.push(animationGroupIn(el[i], i));
}

var animationGroup = new AnimationGroup(animations);
document.timeline.play(this.animationGroup);

<link rel="import" href="http://www.polymer-project.org/components/core-animation/core-animation.html"> 

    <div class="nav-item">One</div>
    <div class="nav-item">Two</div>
    <div class="nav-item">Three</div>
    <div class="nav-item">Four</div>
    <div class="nav-item">Five</div>

Thank you for the demo! I'm going to have to rebuild it using AnimationGroup and placing delays to offset each animation like in the demo you answered above. I do hope that in the near future AnimationSequence will have the ability to overlap animations. — noiseisthis, Feb 18 '15 at 20:44

Polymer - Web Animations stagger AnimationSequence

1 Answers1