Search the Community

Hello, First thanks for this nice library and fine the documentation you produced. I am working on a 2D SVG game built with react.js. Why react? Because its something I have already used and know and also because react.js is the hot lib nowadays... Turn out that I needed a solution to animate my SVG, I first tried plain CSS animation but the result weren't the same in different browser or platforms so I spent some time to look for a more robust solution and I end up going for GSAP. I quickly found out that GSAP and React aren't the best friend but things could be worked out, after reading forum I tried react-gsap-enhancer but well It didn't solve my issues. One of my goals was to have some SVG element animation in a loop inside different components and containers all getting their props from redux store. What happened is that loop were working fine at first but at some point after some rendering due to game activity loop animation stopped definitely... , I solved some of those issues by creating a react component (not stateless) for each svg I wanted to animate, using ref callback to get the element and starting the animation when componentDidMount() and preventing the component the rerender using shouldComponentUpdate(){return false} in order to prevent react from rerendering the component on every tick of a timer for example. So I thought I found a solution, I got my simple animation loop going in background only tweening 1 or 2 attribute like scale, a total of 5+ animation loop. Thats when I started to realized that the app got slower and checking the CPU usage it was at best around 140 just in idle mode (only open the web page), i removed all loop and it was back to 0 in idle mode. Thus here I come asking for help..., I do need animations for the game... I was about to go premium so I could add even more animation like particles and text animation... but now I do not know what I can do to prevent animation from killing players CPU also the game main target will be mobile phone... Is there anyway to hire a GSAP expert to look into those issues ? (please note its an indie game not so much $) Has anyone managed to make react and GSAP play well together to animate a bit more than just a svg rectangle or circle... but complex SVG with hundreds of paths ?

Hi Everyone, I am having an issue integrating React with Timeline lite. I can successfully play, pause, and rewind a timeline but when I try to read the current time using .progress() on the timeline object, I get undefined. I want that progress() function because I want to create a slider bar that will report the progress of the timeline and hopefully also allow for it to be adjusted. My app is laid out like this, I have a container LectureLayout that has a draggableObjects container which itself has many draggable object components. I have a controls component which has the play, pause, reverse buttons. <LectureLayout> <DraggableObjects timeline={timeline}> <DraggableObject1> <DraggableObject2> <DraggableObject3> <Controls timeline={timeline}> I create a TimelineLite() and pass it as a prop into the draggable objects and controls components. I load up all of the tween animations in the Draggable Objects container but since it is a prop of the LectureLayout container, I can read that successfully in the Controls component. My main question is how can the .progress() function be returning undefined when I can use all of the other functions like play() and I can clearly see the timeline when I run a console.log export class Controls extends React.Component { constructor(props, context) { super(props, context); } play(event){ event.preventDefault(); this.props.timeline.play(); } componentDidMount(){ console.log(this.props.timeline) //Successfully gives me a timeline object console.log(this.props.timeline.progress()); //This comes up as undefined } render(){ console.log(this.props.timeline) //Successfully gives me a timeline object console.log(this.props.timeline.progress()); //This comes up as undefined return( <div> <Row> <ProgressBar/> </Row> <Row> <Button onClick={this.play.bind(this)} id="play">play()</Button> </Row> </div> ) } };

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

Hi, Is that possible to change target of an existing tween (without recreating it like here)? Or clone the tween or timeline with the current var-s and the new targets? It's is important to use the same tween because it can contain some randomly generated var-s which aren't stored anywhere else. I'm thinking on something like: var animation = TweenMax.to(nodeFirst, 1, {x: Math.random()}) function duringTheAnimation() { time = animation.time() animation.invalidate() magicallyReplaceTargets(animation, nodeFirst, nodeSecond) animation.restart() animation.time(time) } I'm experimenting with a tool to use React and GSAP together. The goal is to let React to rerender any time it wants during the animations while GSAP can directly animate the DOM nodes (not messing with the React component state). It's going well so far, but it would be great to solve the case when the component remount the targeted element.