React Transition Group: Offset animation start timing

Question

I just started playing around with React Animations, and I seem to be stuck.

I have a series of Cards that appear (animate-in). Right now, they're all coming in at the same time (the animation plays at the same time). Is there a way to add an offset to the animation so that they play one after the other?

Animate = React.addons.CSSTransitionGroup
<Animate transitionName="cardAnim" transitionAppear={true}>
            {
                courses.map(function(element, index){
                    return (
                        <Card style={CardStyle} key={index}>
                            <CardMedia>
                                <img src={"img/courses/" + index + ".png"} />
                            </CardMedia>
                            <CardTitle>
                                {element}
                            </CardTitle>
                        </Card>
                    )
                })
            }
    </Animate>

My aim: I want each Card to animate in separately, as in, the second card animates in after the first one has entered, the third animates after the second one is done, and so on.

Can anyone help? Thanks :)

When I answered [this question](http://stackoverflow.com/a/29981486/62082) I created [this JSFiddle](http://jsfiddle.net/BinaryMuse/f51jbw2k/) that implements something like this; you may find something useful in there. Note that it doesn't use CSS transitions. http://jsfiddle.net/BinaryMuse/f51jbw2k/ — Michelle Tilley, Jul 14 '15 at 00:58
@BinaryMuse: Did you write `StaggerIn` component ? That's really cool — Dhiraj, Jul 14 '15 at 01:00
@DhirajBodicherla Thanks, yes, that was all created to demonstrate the low-level React animation callbacks. — Michelle Tilley, Jul 14 '15 at 01:02
@BinaryMuse Hey, thanks for the comment. I looked at your code and it inspired me to try doing it without React animations, and I succeeded :D Thanks :) — sdnts, Jul 14 '15 at 13:15

score 1 · Answer 1 · answered Jul 14 '15 at 13:14

All right, so I figured it out. The key was the animation-fill-mode CSS property. I completely removed all React Animations and proceeded to figure it out using CSS only.

Here's the code, if anyone is interested:

CSS:

@keyframes flyInFromBottom {
0%{
    opacity: 0;
    transform: translateY(100vh);
}
100%{
    opacity: 1;
}

}

JSX:

<Card style={{
              animation: 'flyInFromBottom 0.3s ease ' + (index+1)*0.1 + 's',
              float: 'left',
              width: 'calc(50% - 4px)',
              margin: '2px',
              opacity: '0',
              animationFillMode: 'forwards'
            }}
            key={index} onTouchTap={this.goToCourse}>
            <CardMedia>
                 <img src={"img/courses/" + index + ".png"} />
            </CardMedia>
            <CardTitle>
                  {element}
            </CardTitle>
</Card>

Essentially, I changed properties using CSS and persisted them using animation-fill-mode.

React Transition Group: Offset animation start timing

1 Answers1

Linked