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.