mcgrealife

Hi @Cassie, what a nice offer! Actually, I have received some private messages! So I will explore those a little more first, and let you know. ? Thank you (as always!), Michael

Live site: https://landing-property.vercel.app/ Source: https://github.com/mcgrealife/landing-property (see readme for "Open in gitpod" button) Problem 0: "Choppy frame rate" On less powerful devices, the ScrollTrigger scrub animations appear "choppy" similar to 10fps videos. Interestingly, it's not a problem on localhost. Here is a screen recording of an iPhoneSE2020 playing the same animations on the live site, and then localhost. It's a subtle difference on this newer device, but hopefully illustrates the problem. Technologies and techniques: - Next.JS, React (97% of gsap code is inside of useEffect()) - Primary technique is create to create many (11) `gsap.timeline({scrollTrigger}).to.to` . Gsap objects are not stored in variables. - Most of these have `scrub: true` - To avoid managing duplicate shared code in MatchMedia, computed variables that check `isDesktop?` are used. - Instead of hard-coding position change values (i.e. distance), that are different for mobile and desktop, these values are also computed based on dynamic image heights - Images were optimized using ImageOptim - Images are display: "none", until needed, then display:"none" after (to prevent animations off screen) - I tested will-change: transform on a few elements (such as the div id="tabSelector"), but it did not seem to help - tailwindCSS was used, so it's a little harder to see the output CSS. Some questions I have about techniques: 1. Should I be storing gsap objects in variables, and killing them manually? 2. Is it bad practice to create a ScrollTrigger inside each gsap.timeline() 3. Why are animations performant on localhost, but not when deployed to vercel? 4. Is there a way to use MatchMedia without duplicating code? Such as storing the shared portions in variables? – I actually tried this and it decreased performance. Currently, ScrollTriggers.getAll() shows 11 scrollTriggers on page load. When I tried MatchMedia, it returned around 22. Payment: - Glad to pay professional rates Start / End dates: - Flexible Note: If this "choppy frame rate" problem can be solved, then there are 2 other animation problems described in the source code readme (titled "problem 1" and "problem 2") Thanks for offering your services here.