en en en en en en en en en en en en en en en en en en fa en en fr hbs_lat en en en es en en en ms en de en fr en en en ca en en en en en en en en ms en en en en it en en en en en en en en en en en en en en en en en en en en en en en en en en en en en en en en en en en en en en en en en en en en en en en en en en en en en en en en en fr en en en en en en en en en en en en fr en en en en en en en en en en en en en en en en en en en en en en en en en en en en en en en en en en en en en en en en en en en en en en en en fr fr en en en en en en en en en en en en en en en en en en en en en en en en en en en en en en en en en sv en en en en en en en en en en de en en en en en en en en en en en en fr fr en en en en en en en en en en en en en en en en en en en en en en en en en en fr fr en en en en en en en en en en es en en en en en en en en en en en en en en en en en en en en en en en en ms en en pl en en en en en es en pt en en en fr en en en de en en en en en en en fr cv es tr es en en en en ms en en en en en en fr en hbs_lat en en en en en en en fr cv es tr es en en en en de en en en ca en en en en en
This thread was started before GSAP 3 was released. Some information, especially the syntax, may be out of date for GSAP 3. Please see the GSAP 3 migration guide and release notes for more information about how to update the code to GSAP 3's syntax.
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 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.
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!
See the Pen 2a53bbbcd47df627f25ed1b74beb407d by GreenSock (@GreenSock) on CodePen
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?
Or using canvas/WebGL instead of DOM elements? PIXI and Phaser are really popular for doing mobile game development.
Share on other sites
OSUblake    18,413 Likes (Superhero)
Posted December 19, 2016
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.
Share on other sites
AnimaChambers    6 Likes (Newbie)
Posted December 29, 2016
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   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/
Share on other sites
OSUblake    18,413 Likes (Superhero)
Posted December 30, 2016
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?
Share on other sites
AnimaChambers    6 Likes (Newbie)
Posted December 30, 2016
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
Share on other sites
AnimaChambers    6 Likes (Newbie)
Posted December 30, 2016
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.
Share on other sites
OSUblake    18,413 Likes (Superhero)
Posted December 30, 2016
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.
Share on other sites
AnimaChambers    6 Likes (Newbie)
Posted December 30, 2016
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.
Share on other sites
OSUblake    18,413 Likes (Superhero)
Posted December 30, 2016
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.
Share on other sites
iuscare    13 Likes (Newbie)
Posted January 11, 2019
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?
Share on other sites
Create an account or sign in to comment
You need to be a member in order to leave a comment
Sign up for a new account in our community. It's easy!
Register a new account
Already have an account? Sign in here.
Sign in to follow this   Followers 2
Go to topic listing
Recently Browsing   0 members
No registered users viewing this page.
“GSAP is just miles and miles ahead of any animation library out there. Great work!”
“GSAP and CSS Transitions: I've done both, and its like comparing an F16 to a horse. Take like 10 minutes to try.”
“GSAP is awesome - I just dropped all my [custom] code, like a thousand lines of code and everything is so so much simpler, smoother and much easier to read for other developers! You have no idea how cool it is to offload that thought process to you guys!”
“It's shocking the @w3c didn't use @greensock as a model of how to do animation via code. Did they even ask animators what they use?”
“Massive shoutout to GreenSock for having an amazing product with fantastic documentation, hugely talented support staff and an active and helpful community. If you do anything with web animation you should *definitely* be using them.”
“Every time a new GSAP plugin is introduced, I'm close to bursting from excitement. The simplicity of the GreenSock API makes learning and applying these tools in projects such a dream.”
“GSAP should be the default when it comes to Javascript animations. It should literally be part of the next Javascript update.”
“@greensock is just pure awesomeness. What more can be said?”
“I've never worked with a product that has such fantastic and enthusiastic support. GreenSock is incredible in its own right, but the team behind it is really what makes it shine.”
Sign Up For Our Newsletter
Get the latest updates on GreenSock products, exclusive offers, and more right in your inbox.
Your information will always be kept confidential.
Thanks for signing up!
Now you'll begin receiving the latest GreenSock updates, exclusive offers, and more right in your inbox. Welcome aboard.