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.

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").

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!