Jump to content
GreenSock

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

GSAP Infinite loop and React Performance Help

Recommended Posts

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 ?

Link to comment
Share on other sites

It's really hard to tell what's going on without seeing a demo. Is it online somewhere? I really don't know React, but someone else might be able to help you out if they had something to view/test.

 

I know that @sdrasner (Sarah Drasner) does a lot of stuff with React, SVG, and GSAP. Check out her latest game.

See the Pen YWBdQd by sdras (@sdras) on CodePen

 

You might want to follow her on Twitter and CodePen.

 

A couple of questions...

 

What type of game are you making? And what kind of animations are involved with the gameplay? Animating hundreds of SVG paths could be part of the problem as SVG performance scales with graphical complexity. Anything that has filters, gradients, or transparency can be very CPU intensive to paint.

 

How does your game loop work inside of React? And is it responsible for controlling/updating your animations?

 

Have you tried using a component designed for games, like react-game-kit?

 

Just throwing this out there. Have you looked into using a game engine? I would highly recommend checking out Phaser.io. I think that's the easiest way to create 2d games with good mobile performance. It also plays very nicely with GSAP. 

 

.

  • Like 3
Link to comment
Share on other sites

Hello OSUblake,

 

Thanks for getting back to me, I will try to post some use case in codePen when I got more time. 

 

Regarding sdrasner I try to get in touch with her few weeks ago but unfortunately she doesn't respond :(

 

I am building a 1v1 2D mind guessing game, animation are mostly feedback animation unpon player actions.

There is a few infinite animation that rotate some complex SVG illustration such has character or UI there is only a bit of gradients used in those SVG no transparency or filters. 

 

All the game loop are inside react components and initialized like below in their mount cycle.

TweenMax.to(character, 2, {
         skewX: -1,
         transformOrigin: "bottom",
         repeat: -1,
         ease: "Power1.easeOut",
         yoyo: true
         }); 

I didn't know  react-game-kit  I will look into it thank you ~

I did look into phaser.io but it seems too much of a learning curve for me, and it felt overkill for what my game needs. :(

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.
×