AnimaChambers

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.

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.

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. http://codepen.io/AnimaChambers/pen/gLVBXX

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/

Thanks, yeah it helps heaps. I was just curious about why that advice was being given.

In reading some recent advice threads, I'm seeing some people recommend setting both translateZ and rotation both to 0.01, presumably to force use of the 3D matrix. However, I thought the GSAP property force3D:true did the same thing, and I further thought TweenMax set this by default, so you didn't need to worry about it. Should I be using translateZ and rotation instead of the default force3D? I have a very resource-intensive application made with GSAP, so am trying to eke out every bit of performance I can. To date I've just been letting TweenMax optimize however it wants.

Just a small question on this: Is it the same to use force3D:true instead of translateZ and rotation?

Thanks! That's great - is something simple I missed. Will come in handy for other animations.

Hi, I currently use a somewhat clunky method to achieve the following effect: http://codepen.io/AnimaChambers/pen/AXJYOJ Which is running a separate TweenMax (at the bottom) with a 1.5s delay concurrently at the same time as the timeline to get the text to fade while the SplitText is also running. This works and I'm happy with it, but I can't help but think there's a more correct way of doing this by including the instruction in the timeline instead of a bolted-on TweenMax? I couldn't quite figure out timeline delays and such.

Thanks it worked. I didn't even know that clearProps existed. BTW I also got the ideas for the background art animation from this forum too a year ago, so I should say thanks for that, though I can't remember who originally posted the ideas (might have been you, your name is familiar). I was looking for ways to animate background art in interesting ways and found this forum.

Thanks for the reply. Wonkyness is used in an artistic sense. This is run using nw.js, so latest Chromium. There's no animation jerkyness or other technical problem. It is almost impossible to see using codepen, so here are some more GIFS. 1. Without transform. "The Armoury" words in the middle of the page look good. 2. Splittext with transform. "The Armoury" has a 3D inward swing to it that looks wonky in the context of every other animation on the page. This occurs because the titlescreen uses the explode transform affect and the perspective transform hasn't been removed from the element by the time you get into the gameplay areas, so it is contaminating the future animations. The way the game works, whenever you move to a new location, TextPlugin rewrites the text in the "#titles" div and I run a new splitText script to animate this new text. The problem I am encountering is that the Tweenlite.set (transform) properties are persisting in the div when they're not being used and I am looking to reset them all to default values immediately after every splittext instance has completed so what the player sees is GIF 1, not GIF 2. I basically just don't want any transform or perspective values persisting when they're not being used so they don't contaminate future splittext animations in that div. I haven't had the chance to try your clearProps suggestion yet so I will see if that solves it.

Hey, yeah it was originally difficult for me to come up with a code sample, but this approximates the problem: http://codepen.io/AnimaChambers/pen/XKqmXQ As you can see, when you activate this line: //TweenLite.set(quote, {transformPerspective:600, perspective:300, transformStyle:"preserve-3d", autoAlpha:1}); by removing the "//" and rerun it, it creates a wonky effect instead of the straight non-transformed. This is the problematic line that is persisting in the div. That transform is needed for the explode splittext, but unwanted for the wavy splittext. Basically what I'm trying to do is write something to cancel that line out once the first split text animation has finished. I'll try your suggestions. I've added this new codepen to the original post for other commentators.

Hey, I'm using the following SplitText explode effect in the Greensock codepen example: http://codepen.io/GreenSock/pen/FqrEv I need this line to get it to work: TweenLite.set(titles2, {transformPerspective:600, perspective:300, transformStyle:"preserve-3d", autoAlpha:1}); However, this then persists after the Tween is over, and it is causing a few issues with subsequent tweens on that div which do not use that effect. The problem is not the code, the code itself works fine. It's the persistence - I need it cleared from the div. I know this is the issue as I do not have the problem if I remove the explode effect. I am somewhat new to GSAP so I am not entirely sure how to approach this. What would I enter to cancel out the above transforms to go back to a state where they were never set? I tried killAll() but it didn't revert it. Here is a reduced live sample of the code problem: http://codepen.io/AnimaChambers/pen/XKqmXQ When you activate this line: //TweenLite.set(quote, {transformPerspective:600, perspective:300, transformStyle:"preserve-3d", autoAlpha:1}); the splittext goes wonky. That is the line that is persisting in my divs. I need to reuse divs because this is for a HTML game. For example, this subtitling where I use TextPlugin to constantly rewrite the text in the div and apply new SplitText effects. The problem is the "moonbase gamma" tween is meant to look flat as in this GIF, but if the explode transform persists it goes all wonky with a 3D transform effect that I don't want. Of course, I just realised I could just make a new independent div purely for the original tween with the explode, but I'd like to learn how to cancel this code anyway as I might need the knowledge later in making the game. I used the greensock codepen from where I got the effect because I'm not entirely sure how to replicate my issue in a straight webpage as it exists in the game, but hopefully I explained it adequately.