Jump to content
GreenSock

Search In
  • More options...
Find results that contain...
Find results in...
mcgrealife

Seeking Performance Optimizations (Professional Rates)

Recommended Posts

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.

 

Edited by mcgrealife
Added questions about techniques
Link to comment
Share on other sites

Hello there,

Sorry you haven't had any responses yet - we're more than happy to share this from the GreenSock twitter account if you'd like? Get a few more eyes on it?

Let me know!

 

 

  • Like 1
Link to comment
Share on other sites

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

  • Like 1
Link to comment
Share on other sites

Brilliant. Let me know if you hit a wall and we'll get the word out there.

  • Like 2
Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
  • Recently Browsing   0 members

    • No registered users viewing this page.
×