Jump to content
GreenSock

Search In
  • More options...
Find results that contain...
Find results in...
garnwraly

Wrote an article that demos how to use GSAP with React

Recommended Posts

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

  • Like 6
Link to comment
Share on other sites

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

  • Like 1
Link to comment
Share on other sites

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.

Link to comment
Share on other sites

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

Thanks.

Link to comment
Share on other sites

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.

 

 

Link to comment
Share on other sites

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.

  • Like 1
Link to comment
Share on other sites

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 :)

Link to comment
Share on other sites

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.

Link to comment
Share on other sites

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  :) )

Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
  • Recently Browsing   0 members

    • No registered users viewing this page.
×