One material card, Multiple animations using react-addons-transition-group - reactjs

Question

I have a <Card> component from material-ui. It has a CardHeader, CardText and other pieces that come together to make the whole card.
I am able to use react-addons-transition-group to animate this card as it enters the screen (componentWillEnter). This works great with:
export class MyCard extends React.Component {
constructor(props) {
super(props);
}
componentWillEnter (callback) {
const el = findDOMNode(this);
TweenMax.fromTo(el, 0.4, {y: 100, opacity: 0}, {y: 0, opacity: 1, onComplete: callback});
}
render(){
return <Card>
<h1> Blah Blah Title <h1>
<CardText> Blah Blah </CardText>
</Card>
}
}
Then the above gets rendered in another component like so:
<ReactTransitionGroup> <MyCard> </ReactTransitionGroup>
Wrapping it in ReactTransitionGroup makes sure it calls the componentWillEnter gets called, and the animation runs. This works as expected.
What I would like to do is multiple animations. So, the Card comes in from the left, the CardText comes in from the top, and the h1 comes in from the right-- or something to that affect.
Ideally, I would just do something like:
componentWillEnter (callback) {
const el = findDOMNode(Card);
const el = findDOMNode(h1);
const el = findDOMNode(CardText);
TweenMax.fromTo(Card, 0.4, {y: 100, opacity: 0}, {y: 0, opacity: 1, onComplete: callback});
TweenMax.fromTo(h1, 0.4, {y: 100, opacity: 0}, {y: 0, opacity: 1, onComplete: callback});
TweenMax.fromTo(CardText, 0.4, {y: 100, opacity: 0}, {y: 0, opacity: 1, onComplete: callback});
}
Of course, this doesn't work.
So my question is, how do I go about parsing the this instance of the component so I can animate each individual part?
I couldn't really find much on findDOMNode. It doesn't seem I can add id tags to the different parts and use those in findDOMNode. Or maybe I'm going about it all wrong.

Answer 1

Found the answer! Simply use refs and access them in the this object:
So:
render(){
return <Card ref="card">
<h1 ref="title"> Blah Blah Title <h1>
<CardText ref="text"> Blah Blah </CardText>
</Card>
}
Then you reference them in the animation portion like:
export class MyCard extends React.Component {
constructor(props) {
super(props);
}
componentWillEnter (callback) {
const card = findDOMNode(this);
const title = findDOMNode(this.refs.title);
const description = findDOMNode(this.refs.description);
TweenMax.fromTo(card, 0.4, {y: 100, opacity: 0}, {y: 0, opacity: 1, onComplete: callback});
TweenMax.fromTo(title, 0.4, {y: 100, opacity: 0}, {y: 0, opacity: 1, onComplete: callback});
TweenMax.fromTo(description, 0.4, {y: 100, opacity: 0}, {y: 0, opacity: 1, onComplete: callback});
}
render(){
return <Card>
<h1 ref="title"> Blah Blah Title <h1>
<CardText ref="text"> Blah Blah </CardText>
</Card
}
}
You'll of course want to differ the timing and animations in each TweenMax.fromTo call but that should do it!
I guess it is worth adding some further reading, as string refs may get deprecated? Hard to tell:
https://facebook.github.io/react/blog/2015/02/24/streamlining-react-elements.html#pending-change-the-refs-semantics
https://twitter.com/dan_abramov/status/664212109056729088