I think the effect is usually referred to as “staggered,” “cascading,” or “sequenced.”
Rather than using ReactCSSTransitionGroup
, you could do this mostly with CSS.
First, I'd animate your cards using animation
property and @keyframes
instead of transition
property. So to start, you could add something like this to your CSS:
CSS
@keyframes fadeIn {
0% {
opacity: 0;
}
100% {
opacity: 1;
}
}
Javascript
The crux of the solution is to set an animation
CSS style on each list item, and use the item index as a multiplier for a specified delay
value.
I started by creating an array of objects called items
, where each object contains a title
and a text
field (mainly just needed an array to map for the example).
I also created a couple of constants for abstracting the two numerical values for the animation, duration
and delay
(note we're only doing math with delay
in the example to follow, but it looked cleaner to me to pull out duration
as well):
const duration = 1000; // ms
const delay = 500; // ms
Made a template that returns a formatted string to be used as the value of each transition element's animation
CSS property:
const animStr = (i) => `fadeIn ${duration}ms ease-out ${delay * i}ms forwards`;
Mapping the data during render time, and setting the CSS animation
style based on the index value (i
) via animStr
:
{items.map((item, i) => (
<li key={i} style={{ animation: animStr(i) }}>
<SomeComponent item={item} />
</li>
))}
The animation will become active as soon as that element is injected into the DOM (as per the CSS animation spec). Syntax is based on the css animation shorthand. Note that the default behavior for the animation is to run once. Adding forwards
to the rule causes the animation to retain the properties of the last keyframe when it stops (fully visible).
Edit: Personally, I think it looks better to start the delay index at 1
instead of 0
, so you could set your animation
value to this:
`fadeIn ${duration}ms ease-out ${delay * (i + 1)}ms forwards`
Working CodeSandbox
Here's a working codesandbox.
Screen Recording
This is what the above code looks like in action. It's a screen recording of the page being reloaded on CodeSandbox.

transitionAppeartimeout={2000 + 500*i}
<span>
as a direct child of<ul>
which is not valid. You can specify acomponent
andclassName
attribute on< ReactCSSTransitionGroup>
and effectively combine it with the<ul className="item-list">
so they are one and the same.