Wrote an article that demos how to use GSAP with React

[garnwraly]

Hi guys,

 

Long time GSAP user, started using react about half a year ago and discovered that complex animations has been a somewhat overlooked topic. One of my colleagues was sure that react didn't have anything to allow for js animations (they did bury the documentation pretty far down the page)

 

So I wrote a post showing how to use React's transition api to do JS animations using GSAP, please have a look and let me know what you think

 

https://medium.com/@cheapsteak/animations-with-reacttransitiongroup-4972ad7da286#.jfposelsa

See the Pen yOaJBj by cheapsteak (@cheapsteak) on CodePen

[Carl]

Hi and welcome to the GreenSock forums,

 

Thanks so much for sharing. We get quite a few React + GSAP questions around here.

I'm not very familiar with React but can tell the directions were very clear and well-written.

I'm sure this will help.

 

Best,

 

Carl

[Jonathan]

Nice write up garnwraly, thanks

[funkybudda]

hi,

 

thanks for the article, as someone deciding to stick with Angular (waiting on angular 2) or moving to react, this article definitely helps me in the decision. I hope you will write more article on this topic.

[pixeldroid]

What criterion would you use to decide to use something like React or Angular vs. straight JS/CSS/HTML for a project?

Thanks.

[pedropauloalmeida]

Hi, all.

 

Thank you, @garnwraly. Your article is great. I do not know if I am missing something, but I want to use GSAP not only when the component is about to be rendered in the page but also after that.

 

My particular need is something like this: imagine a slider component that changes its current visible slide by a menu. The slider component and its children are already rendered on the page. The user clicks a button in the menu and I want my "MainSlider" controller animate its children to right or left until the correct slider be visible. The communication between the menu component and the "slider" controller is already done. But what I do not know is how to fire and animate the children component to move/animate themselves.

 

So, what I want is something like this..

//================ PorfolioSliderManager component

var PortfolioSliderManager = React.createClass({

// ....
goNextPage: function(pageIdx) {
	console.log(
	        "animateTo", pageIdx,
		"go out", this.currentItem.props.data.idx,			
                "go in:", this.refs["child_" + pageIdx].props.data.idx
	);
	this.currentItem.animateOut();
	this.currentItem = this.refs["child_" + pageIdx];
	this.currentItem.animateIn();
},

render: function() {
	// Todo: could be a loader animation or so...
	if (!this.state || !this.state.jobs) return <div></div>;

	var _this = this;
	var TransitionGroup = React.addons.TransitionGroup;
	return (
		<div className="portfolio-resume-holder full-screen">
		{
			this.state.jobs.map(function(result, idx) {
				var reff = "child_" + idx.toString();
				result.idx = idx;
				return (
					<TransitionGroup key={result.id} ref={reff}>
						{<PortfolioSliderItem data={result}/>}
					</TransitionGroup>
				);
			})
		}
		</div>
	);
}


//================ PortfolioSliderItem class: 
PortfolioSliderItem = React.createClass({

// When this is the correct children to be shown, animate into the screen:
animateIn: function(callback) {
	// here the code to animate the element
	var el = React.findDOMNode(this);
	TweenMax.fromTo(el, 0.6, {y: -1000}, {y: 0 , onComplete: callback});
},

//....
render: function() {
	return(
	<div className="portfolio-resume-item full-screen" ref="screen">
		<FullBackgroundComponent bgImage={this.props.data.bgImage} />
			<h2>{this.props.data.name}</h2>
			<p>{this.props.data.desc}</p>
		</div>
	);
},

Well..

For me it should be simple with pure JS. Just like this js slider: http://www.slidesjs.com/ 

 

Do you think it Is possible with GSAP and ReactJS?

 

Thank you for your help.

 

 

[garnwraly]

What criterion would you use to decide to use something like React or Angular vs. straight JS/CSS/HTML for a project?

Thanks.

 

Complexity (including, but not limited to, degree of interactivity, amount of content, how much of the content is dynamic)

It's somewhat analogues to the dewy decimal system and organizing books.

If you have 2 shelves of books it'd be overkill. If you have 100 shelves of books then you probably should. 10 shelves? Judgement call.

[garnwraly]

Hi, all.

 

Thank you, @garnwraly. Your article is great. I do not know if I am missing something, but I want to use GSAP not only when the component is about to be rendered in the page but also after that.

 

My particular need is something like this: imagine a slider component that changes its current visible slide by a menu. The slider component and its children are already rendered on the page. The user clicks a button in the menu and I want my "MainSlider" controller animate its children to right or left until the correct slider be visible. The communication between the menu component and the "slider" controller is already done. But what I do not know is how to fire and animate the children component to move/animate themselves.

 

So, what I want is something like this..

//================ PorfolioSliderManager component

var PortfolioSliderManager = React.createClass({

// ....
goNextPage: function(pageIdx) {
	console.log(
	        "animateTo", pageIdx,
		"go out", this.currentItem.props.data.idx,			
                "go in:", this.refs["child_" + pageIdx].props.data.idx
	);
	this.currentItem.animateOut();
	this.currentItem = this.refs["child_" + pageIdx];
	this.currentItem.animateIn();
},

render: function() {
	// Todo: could be a loader animation or so...
	if (!this.state || !this.state.jobs) return <div></div>;

	var _this = this;
	var TransitionGroup = React.addons.TransitionGroup;
	return (
		<div className="portfolio-resume-holder full-screen">
		{
			this.state.jobs.map(function(result, idx) {
				var reff = "child_" + idx.toString();
				result.idx = idx;
				return (
					<TransitionGroup key={result.id} ref={reff}>
						{<PortfolioSliderItem data={result}/>}
					</TransitionGroup>
				);
			})
		}
		</div>
	);
}


//================ PortfolioSliderItem class: 
PortfolioSliderItem = React.createClass({

// When this is the correct children to be shown, animate into the screen:
animateIn: function(callback) {
	// here the code to animate the element
	var el = React.findDOMNode(this);
	TweenMax.fromTo(el, 0.6, {y: -1000}, {y: 0 , onComplete: callback});
},

//....
render: function() {
	return(
	<div className="portfolio-resume-item full-screen" ref="screen">
		<FullBackgroundComponent bgImage={this.props.data.bgImage} />
			<h2>{this.props.data.name}</h2>
			<p>{this.props.data.desc}</p>
		</div>
	);
},

Well..

For me it should be simple with pure JS. Just like this js slider: http://www.slidesjs.com/ 

 

Do you think it Is possible with GSAP and ReactJS?

 

Thank you for your help.

 

 

Definitely possible to do with GSAP and React, although I would not use ReactTransitionGroup if you want the slides in between to be visible

 

Here's a solution for if the slides all have the same dimensions:

 

Each slide would need to know its own index and the slider's currently selected index (passed down as props)

Based on that information it would be able to calculate the position it _should_ be in

When the currently selected index changes (componentWillReceiveProps), each item would animate itself from its current position to the calculated target position

 

Let me know if that works

[pixeldroid]

Complexity (including, but not limited to, degree of interactivity, amount of content, how much of the content is dynamic)

It's somewhat analogues to the dewy decimal system and organizing books.

If you have 2 shelves of books it'd be overkill. If you have 100 shelves of books then you probably should. 10 shelves? Judgement call.

Given a large project, are you suggesting that the more interactivity and dynamic content, the more useful React would be?

Thanks for the reply.

[garnwraly]

Given a large project, are you suggesting that the more interactivity and dynamic content, the more useful React would be?

Thanks for the reply.

 

Yes, but don't limit the test to those, there are probably more that I missed : )

The main metric I would go by is complexity, in whatever form it may take

The more complex a project is, the greater the need for good organization of logic and abstractions to avoid creating an unmaintainable mess

React and other frameworks provide good organization systems and abstractions (I am also quite fond of Angular and Vue  )