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.

Hi, @azazdeaz. I am starting now with ReactJS and I am used to GSAP for a long time ago. I was trying to import your react-gsap-enhacer into my application but with no success. Because I am using requirejs and ES5 to this project. Is it possible to make a ES5 "bundle" version? I mean, a single file that I could "require()" and use it across my app? Or could you give some basic instructions, so I can try make this bundle by myself? Thank you.

Hi, Folks. First of all, thank you so much for all these years. You rock! I am trying to make a "slider" that goes through a path made by bezier curves. My first attempt was build the animation and controll it with TimelineMax. So, when I click and drag an area I want to control a div through this curve. So, my first problem: I do not know how to take the path that BezierPlugin made internally and draw it on canvas. I know there is the method BezierPlugin.bezierThrough. It returns an Object with two Arrays, x and y. But inside these Arrays the objects have the properties a, b, ba, c, ca, d, da and I do not know how to use them to draw the path into canvas (I always used the quadraticCurveTo method and it accepts 4 parameters. Probably this is just a simple matter of understanding how those properties work together to define the right curve points of the path. The last problem Of course, make a simple drag/drop in a linear percentage will not sync the DIV animated with my mouse position. Here is where I am a bit lost: how can I sync the position of the DIV with my mouse coordinate? Like a "curved horizontaly scroll". Thank you for your help.