Jump to content
GreenSock

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

GSAP vs CSS

Recommended Posts

Hi everyone,

 

I wanted to reply this post -> http://greensock.com/css-performance

But I don't know why I can't leave a message, even if I'm logged in... So I'll share my opinion here :)

 

I'm working on a game webapp (HTML5/CSS/JS), running on desktop browsers, smartphone, tablet and also into a native IOS app (webview) built with Cordova. In this webapp, like in every games, there is of course transitions between pages, popup and dialog apparition, drag and drop functions, etc... there is also transitions/animations on elements such as div, svg, png from the DOM during the game.

 

During my development process, I was looking for the best way to animate those elements to get the best visual effect during transitions, tween, bouncing effect, apparition effect, etc. I was focusing on this idea "the user should NOT see the difference between my webapp and a real native app". I wanted every transitions/animations look smooth and great.

 

I know GSAP since 2010 so this was my first idea. GSAP is really the most convenient JS library that I know to animate. I have nothing to say on that point.

 

But, during my test on different devices, I noticed that large transitions such as fade on the entire screen, dialog and popup bouncing, opacity apparition was laggy on smartphone and tablet (on desktop browser it was great).

 

So I did some research and test. After reading lot of post about CSS vs JS I tried by myself to recode all those laggy transitions only with CSS rules. The result was surprising because those new transitions was great, no lag, very fluid, better than with GSAP.

 

Then I found this article -> http://greensock.com/css-performance

I tried the CodePen linked -> 

 

On my laptop I can't see any difference (I'm not talking about pure performance and FPS benchmark, I'm only talking about visual feeling, looking for something fluid, without lag).

But did you try this CodePen on tablet and smartphone? The difference is huge. CSS transitions look really better, fluid without any lag during transition.

I did test on iPad Pro, iPad Air, iPad 3, iPhone 5, iPhone 6... Each times I set the Quantity at 2000 and I can see a huge difference. CSS looks much better.

 

Of course coding complex animation with pure CSS rules is awful, so if I could get the same result with GSAP I'll use it for sure.

 

And you guys? Did you encountered the same issue with smartphone and tablet?

Any opinion or comment are welcome! 

Thanks!

See the Pen 2a53bbbcd47df627f25ed1b74beb407d by GreenSock (@GreenSock) on CodePen

Link to post
Share on other sites

Did you try this performance test?

See the Pen srfxA by GreenSock (@GreenSock) on CodePen

 

It's really hard to gauge performance because there are a lot of factors that are involved. And with Cordova / PhoneGap apps, performance is always going to be worse than expected. Have you looked into using an accelerated web view like with CocoonJS?

https://www.ludei.com/cocoonjs/

 

Or using canvas/WebGL instead of DOM elements? PIXI and Phaser are really popular for doing mobile game development.

  • Like 3
Link to post
Share on other sites

Can you make a CSS and GSAP demo that shows a visible performance difference? I'm curious to see what's causing the performance hit. It might be a quick fix, like changing how force3D is set on your animation targets.

 

  • Like 3
Link to post
Share on other sites

I've been working on my CSS DOM/GSAP game over the Christmas break and have spent a week optimising animation performance with GSAP and the DOM. I found a couple of things. I don't think this is your issue but it was a massive performance increase for me.

 

1. CSS seems better for animating full page backgrounds. However, this was tested before I resolved point 2, which was probably the culprit all along. 

 

2. Garbage collector thrashing will hurt any animation horribly. I was having an issue where my split text animations would often stutter during a page transition. Then I discovered that my code was constantly adding and removing image classes instead of just adding and removing the opacity. Every time the class of an image got removed, it seems the GC kicked in and unloaded the image. Hence on transition it was a toss up as to whether split text would have a clean path to animate without anything else going on.

 

I still had the problem even though I was using a preloader to cache the image on game start. That's why I originally did not look at garbage collection. It didn't matter that the image was stored in a separate preloader <div> off screen. The moment the actual on screen class was removed, Chrome attacked it. I've more or less concluded that typical preloading is useless for my game. I'm getting much better results keeping everything on screen at opacity 0 when not in use.

 

I still use CSS for backgrounds but the GSAP split text runs smooth all the time now it's not fighting with the garbage collector. However it might be the case that GSAP handles backgrounds fine without the GC getting in the way. In future I'll be double checking to ensure I'm not trying to load assets during a GSAP animation.

 

My game is purely desktop so it might not have any overlap with yours but for me this was a huge bug that once resolved got my animations performing smoothly.

 

 

 

However, if by dialogue bouncing you mean split text, this thread might be relevant: https://greensock.com/forums/topic/15578-splittext-character-jerkiness-issue-in-chrome/

Link to post
Share on other sites

Hi @AnimaChambers,

 

GSAP can animate a large background just fine. It's better to animate backgrounds via transforms instead of something like background-position as it is not hardware accelerated.

See the Pen 4160082f5a86a3cd0410fb836a74fa68?editors=0010 by osublake (@osublake) on CodePen

 

And your image preloader doesn't sound right. Here's a simple example of how DOM image caching should work.

See the Pen 411066356ef5f30952d5433051adfa81 by osublake (@osublake) on CodePen

 

There should not be a lot of garbage collection for images if the image source is cached. Make sure the path to your image is a real one and not one generated by a server. If the path is server generated or there is something in the path like a question mark "?", caching probably won't work.

 

And toggling CSS class names is not very performant. If you're toggling CSS class names to manage state, like adding an "active" class, you might want to look at changing that. I always store state through some other means, like in a variable or object.

 

Can you make a simple demo to reproduce the garbage collecting issue?

.

  • Like 3
Link to post
Share on other sites

Thanks for the reply. :)

 

 

The problem I had with GSAP animating backgrounds is that the background would flicker black while GSAP was animating it. Hard to reproduce, as it happened out of only 1 in 100 times. But that's too much that never happens under CSS. When I did use GSAP I don't think I was doing anything wrong, eg

tl.to(cutscene1, 20, {scale:1.7, autoAlpha:0, ease: Power0.easeNone}, 6);

I'll look into storing states in an object but it's something I haven't learned yet so I'll need to look it up. :) Is something I have no idea how to do. I know how to do a simple toggle of a state, but not to tween values outside of using GSAP. Mostly I've been using class toggling to toggle classes containing animation rules. 

 

 

 

It's hard for me to reproduce the cache issues since I have no idea if its a quirk of other parts of the game but this is an example of the preloader code I was using. 

 

See the Pen gLVBXX by AnimaChambers (@AnimaChambers) on CodePen

Link to post
Share on other sites

But nevermind all that, this discussion convinced me to switch over to a canvas solution. It was quite easy to do using your earlier codepens Blake, so thanks and seems to run better. I'm using GSAP to animate and seems to animate the canvas without less hiccups. 

 

Probably more sane considering all the art assets I use.

  • Like 2
Link to post
Share on other sites

Haha  :lol:

 

That was quick!

 

I was going to say that I don't think your preloader is working correctly because you are not waiting for the onload event. I made a simple demo showing how you can store your images in a variable. They don't actually have to be added to the DOM. 

See the Pen 43317dbcda7dd75a58a2519195a7d2a3?editors=0010 by osublake (@osublake) on CodePen

 

For games, I always recommend checking out Phaser if you want a game engine with all the bells and whistles, and Pixi if you just want a high speed renderer (which is what Phaser uses). They're both great, and work with GSAP out of the box.

 

Something else I just noticed with Pixi. It looks like they are working on a UI module, which might be useful for your game. It's not ready for production, but you can check out a demo here. I don't know how long this link will stay active for though.

http://178.155.161.95/test/

 

 

.

  • Like 3
Link to post
Share on other sites

Cool, thanks heaps. Both are super useful. yeah I am currently working on converting my full ui to work with pixie canvas. Figured out how to use gsap to tween full screen canvas from your examples. Think I just need to link the sprite tweens to my ui elements with an event listener.

Link to post
Share on other sites

Here's an example of triggering animations using a DOM and PIXI based button. Yeah, there are a bunch of listeners needed for PIXI if you want it to work with touch and mouse.

See the Pen 76c0b4642cb65611f3341243bf6f8691?editors=0010 by osublake (@osublake) on CodePen

 

And you might want to check out this plugin for Pixi. It can help reduce the number of tweens needed for certain properties like scale.

https://github.com/noprotocol/gsap-pixi-plugin

 

.

  • Like 3
Link to post
Share on other sites

Hi @OSUblake

 

coming back to this thread. I am building a website with gsap, where I just dropped jQuery in favor of imrpoving es6 skills. Just read your opinion that toggling css class names is not a performant way and that you are storing them in an object or a variable. May you give us an example how you do this for a simple open/close menu button? 

 

All the best! :-) 

Link to post
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.

×