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!