Getting the jank outta my first shot at this

[Brett]

Hey everyone! I'm new to this platform and so far I love everything about it except my ability to get the FPS where I want it, especially on mobile of course. But the structure of everything, the plugins, the syntax - everything seems pretty awesome. It feels really natural after using jQuery so many years. 

 

I'm hoping that giving you the actual web page I'm learning on instead of a codepen will be ok. I believe at least part of my problem is the CSS of the page itself and this is the exact context I'm trying to use GSAP. If I can get the FPS up where it needs to be I'll put it into production. 

 

I've spent a few days fumbling around and now I'm confident you guys can find a number of quick fixes that would take me hours or days to iron out. 

 

Here's the page:

 

http://dev.truckingtruth.com/cdl-test/category-rules-and-regulations/page-1/

 

The animations themselves are doing exactly what I expect them to do. I'm just not sure what the best way is to get better FPS. I was using SplitText on the quiz questions themselves and it looked great but I took it out to get the FPS up. I'd love to put that back in. 

 

If you want me to setup a Codepen I certainly can. I just wanted you guys to see it live on our test server so you knew the full picture of what I was working with. 

 

Thanks a ton! 

[Jonathan]

Hello Brett, and Welcome to the GreenSock forum!

 

There are various thing you can do to help with Jank. As far as your HTML, CSS and JS. But I think if you have a specific part of your page you need help with. Or some part you need help with I'm sure we can offer advice. But you have a lot going on and its very difficult to try and find your GSAP code on that page.

 

Here is a video tut on how to create a codepen demo example.

 

 

I'm sure if you provide a limited codepen with what exactly you need help with, I'm sure we can help you better with code we can edit live

 

Thanks!

[Brett]

Ok I created a Codepen for it:

 

See the Pen PZjrBO by anon (@anon) on CodePen

 

Just click the "Next" button in the bottom right to run the animation.

 

Like I mentioned, the animation is doing what I wanted it to do but in my environment I can't get the FPS up there high enough. You'll see at the start of the animation code I had even set {x:1, rotationY:1} to a bunch of elements to try to create layers for them before the animation started. 

 

I also know I could stagger the various animations more so there wasn't so much overlap but that's kind of the point - I want various elements to be coming into the picture at the same time instead of one at a time.

 

Once again here's the actual environment I'm trying to make this happen: http://dev.truckingtruth.com/cdl-test/category-rules-and-regulations/page-1/

 

Thanks!

[Shaun Gorneau]

Not sure if you've done anything since ... but the FPS are certainly up there (way up there) in Safari, Chrome and Firefox in OS X and iOS 9 on iPhone 6.

[Jonathan]

Thanks Brett for the limited codepen.

 

I'm not near my computer right now.. But from looking at your codepen...

 

I can see that your animating your <li> elements without having position relative or position absolute. As a rule of thumb when using CSS transforms. You want to have either position relative or even better position absolute on your tween element. So this way your element is taken out of the flow of the document, and so it doesn't trigger layout and re-rendering for its surrounding elements.

 

Also changing opacity to autoAlpha for some of your other tweens. autoAlpha will give you better performance than opacity alone.

 

See the CSSPlugin Docs: http://greensock.com/docs/#/HTML5/Plugins/CSSPlugin/

• autoAlpha
  Identical to opacity except that when the value hits 0 the visibility property will be set to "hidden" in order to improve browser rendering performance and prevent clicks/interactivity on the target. When the value is anything other than 0, visibility will be set to "inherit". It is not set to "visible" in order to honor inheritance (imagine the parent element is hidden - setting the child to visible explicitly would cause it to appear when that's probably not what was intended). And for convenience, if the element's visibility is initially set to "hidden" and opacity is 1, it will assume opacity should also start at 0. This makes it simple to start things out on your page as invisible (set your css visibility:hidden) and then fade them in whenever you want.

 

Right now your tweens are just using transform matrix() instead of matrix3d(). You can also try using force3D:true so GSAP uses hardware acceleration. The default for force3D is "auto". You could add a slight translateZ (z) .. z:0.01 .. to your tweens to force3D automatically.

• force3D
  As of 1.15.0, force3D defaults to "auto" mode which means transforms are automatically optimized for speed by using matrix3d() instead of matrix(), or translate3d() instead of translate(). This typically results in the browser putting that element onto its own compositor layer, making animation updates more efficient. In "auto" mode, GSAP will automatically switch back to 2D when the tween is done (if 3D isn't necessary) to free up more GPU memory. If you'd prefer to keep it in 3D mode, you can set force3D:true. Or, to stay in 2D mode whenever possible, set force3D:false. See http://css-tricks.com/myth-busting-css-animations-vs-javascript/ for more details about performance.

And i noticed your animating the CSS width property, which will only animate on a pixel level versus CSS transforms that animate on a sub-pixel level.

 

I would also cache all your jQuery selectors in variables so you can limit the constant reading and lookup of your DOM elements. For example $questionContainer.next() could be cached in a variable and chained to the various find() methods in your to() and from() tweens.

 

I will have to spend more time later when im near my desktop.

 

Hope this helps!