Safari/Firefox/CPU jitters

[Kid Baco]

Hello all.  

 

I'm on my first project using gsap, and now it’s time for my first question. I have been searching for an answer and have tried incorporating many ideas I see posted to this board (great resource, btw), but so far, my issue remains. 

 

I’ve built a page that uses a ton of tweens. It worked fine on chrome, but gets wonky/jittery on Safari on Firefox (I’m on a Mac and haven't tested IE). These jumps are pretty random, I can’t point to a spot where I know it’s going to jump. I have replaced any Top/Bottom/Left/Right with X/Y, as recommended on some posts, as well as tried to strip other styles (in fact, I've tried stripping all tweens, as mentioned below). 

 

That’s when I noticed the CPU% was out of control in my Activity Monitor. 

 

Safari, topping out around 64.4%

Firefox: 101%

Chrome: 16.6%

 

So, finding that weird and a possible culprit to the jittering effects, I started deleting stuff. These are the numbers using Safari

 

Deleting all the css, 30.4%

Deleting img src from the index.html: 55%

Deleting all the tweeting code from .js, but keeping the imports (below): 49.5%

import './assets/scss/app.scss';

import ScrollMagic from 'scrollmagic/scrollmagic/uncompressed/ScrollMagic';

import 'scrollmagic/scrollmagic/uncompressed/plugins/animation.gsap';

import 'scrollmagic/scrollmagic/uncompressed/plugins/debug.addIndicators';

import TweenMax from 'gsap/src/uncompressed/TweenMax';

import TimelineMax from 'gsap/src/uncompressed/TimelineMax';

 

Tried changing those to a minified versions, no change.

 

Tried deleting all imports except for Tween Max: 53.4%

 

Completely delete EVERYTHING from my js file, the CPU % tops out around 10.2%. 

 

I’ve also tried using onStart functions to only call animation when needed and using onComplete to completely remove any divs that had tweens applied when done. 

 

This is what I’m currently looking at. When I scroll down (proceed isn’t working), I still see the cpu (in safari) reach the 50%. I hope someone can look at this and see immediately what the issue is, cause I'm on day two and getting no closer. 

 

Thanks!

 

See the Pen JvKZRq by erikkelly (@erikkelly) on CodePen

 

See the Pen JvKZRq by erikkelly (@erikkelly) on CodePen

[PointC]

Hi @Kid Baco

 

Welcome to the forum.

 

Your pen isn't loading any assets so we can't see what you're animating. It's also missing the ScrollMagic GSAP plugin so it's throwing an error.

 

https://cdnjs.cloudflare.com/ajax/libs/ScrollMagic/2.0.5/plugins/animation.gsap.js

 

You have some CSS animations in there with some 10,000 pixel moves so I'd guess those are pretty big images and most likely the culprit. GSAP only animates values and all the rendering is done by the browser so I'd doubt that GSAP is the source of any crazy CPU usage.

 

Happy tweening.

 

[OSUblake]

13 hours ago, PointC said:

You have some CSS animations in there with some 10,000 pixel moves so I'd guess those are pretty big images and most likely the culprit. GSAP only animates values and all the rendering is done by the browser so I'd doubt that GSAP is the source of any crazy CPU usage.

 

Those might be guesses about how far to animate the background, which I wouldn't recommend. That is, don't guess the distance, and don't animate the background position. Animate the position using transforms i.e. x and y.

 

Perhaps a related issue about animating clouds.

 

 

 

14 hours ago, Kid Baco said:

I’ve built a page that uses a ton of tweens.

 

Keep in mind that HTML was not designed to handle a ton of animations. Judging by some of the keywords you use like clouds, sea, ship, alps, flame, a canavs/WebGL solution might be better. You might want to check out PixiJS.

 

http://pixijs.io/examples/#/basics/basic.js

http://pixijs.io/pixi-filters/tools/demo/

https://greensock.com/docs/Plugins/PixiPlugin

[Kid Baco]

Thank you both for your replies. 

 

I did fix the codepen, but I am using some large images, so perhaps that is the culprit. I still don't understand why I'm still seeing high CPU when I try it after removing every tween from my JS (I can't really test the jittering when doing so). Perhaps I'm using this in a way that isn't meant to be used, so thanks for the Pixi inks. 

In regards to how the animation works, do changes to opacity (for example) require the same lift as moving them with X/Y? I'm wondering if all actions are created equal when applying. I'm wondering if I could stack backgrounds and just do an opacity shift down the line. 

Is it common to use onComplete to remove tween divs? I'd think that would help performance and I don't need people to go back, it can be a one way experience. 

I have one area where I use a few smaller images that are repeated to stretch the entire width and those seem less taxing (emphasis on "seem"). 

 

 

 

[OSUblake]

It's hard to tell what's going on without any images, but using large images, or a repeating background can cause problems. In general, it's best to hide stuff that isn't visible.

 

There's nothing wrong with removing a div in the onComplete callback. Just make sure that won't mess up your ScrollMagic stuff if the user scrolls back up.

 

You can see what properties trigger stuff in the browser here. Properties that only trigger a composite are the best e.g. opacity, transform (x and y). But as you can see, Safari (Webkit) doesn't work like Chrome (Blink) or Firefox (Gecko). And animating background position doesn't help the situation. Stuff that triggers a layout can use a lot of CPU.

https://csstriggers.com/

 

 

[PointC]

Just my two cents worth, but if you're loading and using GSAP for the scroll animations, I'd also recommend using it for all your animations. There would be no reason to use CSS animations when you have access to the most robust animation platform available. 

[Kid Baco]

Thanks again! This is helping a lot. 

 

Most recently, I've set all my large images to display: none, until I need them, then I use onStart and onComplete functions to do a jquery show/hide and even that adjustment seems to be helping. This project might eventually involve an entire rewrite with additional tools (the videos I just watched on Pixi are interesting), but I want to see if some smarter coding can't get it working. Luckily, it's just a person project to get some experience. 

 

I'll also take out the CSS animations. Good tip. 

[OSUblake]

Nothing wrong with getting some experience under your belt. When I first started out, I would always end up rewriting everything several times over.

 

jQuery show/hide is known to have performance problems. You might be able to get a little performance boost by just setting the display css directly, or with GSAP.