Staggering components on enter with react css transition group

Question

I would like to add a stagger effect to all children that get rendered within a ReactCssTransitionsGroup but do not know how to go about it. I looked at this question but would like to try do it using the react transitions group. If it isn't possible then I will do something similar to the above linked question.

my transition component is quite simple:

Transitions({component: 'div', transitionName: 'stagger'},
    [1, 2, 3, 4, 5].map(i =>
            div({className: 'pure-u-md-1-3 pure-u-lg-1-4 medium-box demo', key: i})
    )
)

Prairial

Use and n-th child selector + a sass macro on the parent element. Never done it myself, but this is the basic idea: github.com/popcorn-time/popcorn-app/blob/master/sass/… – Arawn

Looking at what you linked me - I would need to know how many child components and write a css descriptor for each one? – Prairial

With that solution, you would (or at least have enough to cover the number of children). Since you're already in javascript land you could emulate that effect in code using inline styles. – Arawn

That is true ^ I will give it a go when I can – Prairial

What exactly do you mean when you say "stagger effect"? Do you want to render multiple components and have them appear one at a time? – Middaugh

@Michael Parker Yes, This kind of thing. I was wanting to know if there was a clean way to do it using ReactCssTransitionGroup. – Prairial

Answer 1

8 months later and I have found the best way to do this, without ReactCSSTransitionsGroup. The TransitionsGroup component is badly maintained and as a result tends to have some disruptive ui bugs:

• Components not leaving DOM when switching tabs
• Components not leaving DOM when there are a lot of entering/leaving components

to name but a few...

Enter react-motion - A highly performant animation library that gives the developer a lot of control. Including staggering animations for free! After using it for some time I can highly recommend it as a complete replacement for ReactTransitionGroup.

Prairial

Answer 2

The official ReactCSSTransitionsGroup is badly maintained, it is being split off into its own repository react-transition-group to breathe in new life.

If you care about smooth animations even on lower end mobile devices than react-motion is not a good solution, you will still need to rely on CSS transitions.

You can try out react-css-transition which aims to give you reliable CSS transitions in React.

• Disclaimer, I'm the creator of react-css-transition

Bucksaw

This is a very interesting alternative. Even though I would argue that react-motion performs very well even on lower end devices (lower end being iPhone 5 / Samsung S3), it still doesn't beat css rendering. Good work Chi! – Prairial

Additionally - could you provide an example of a stagger animation so as to fit within the scope of this question? – Prairial

Don't mind the plug but wish it addressed the stagger question. – Calcify