[Seeking Performance Optimizations (Professional Rates)]

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

[Seeking Performance Optimizations (Professional Rates)]

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.