Jump to content
GreenSock

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

Animations on a massive screen

Recommended Posts

I am creating an animated presentation.  This presentation needs to run at 6240x2700 resolution. The image assets I am using are the same resolution varrying in size from 2MB to 10MB.  

 

I have multiple different timelines that will be used in a master timeline.  The initial layout animations without content worked great (no surprise).  But once I added the large images, the jittering got out of control.

 

I am only changing scale and transform origin right now.  There are other parts of the final product that will change opacity and position.

 

I know this is a big screen and these are big files.  But it does not change what I have been tasked to do.

 

Things I am doing v what have tried:

- I am using a grid layout for my content.  I have tried placing everything in the body with absolute positioning

- I am currently using background image css but I have tried using image tags

- I have tried creating a smaller, more normal, screen size and then scaling it up to 6240x2700 with transforms

- I serving images via a url.  I have tried loading the images off localhost.
- I have played with some image preloading techniques

 

An interesting thing is that from time to time, the animation seems to hit a sweet spot after multiple loops and will run so smooth. It looks great and it leads me to think this can work.  It needs to run smooth first round though.

 

To test:

 

The easiest way to test this at scale is to use chrome responsive layouts and create a layout for 6240X2700

See the Pen WNwmOGd by breck421 (@breck421) on CodePen

Link to post
Share on other sites

Hey breck421 and welcome to the GreenSock forums. The best thing you could do to help improve the performance of this is to buy a top of the line CPU and GPU ;) What you're trying to do is process intensive, period. 

 

As for code changes, you'll probably get better performance by using modern image formats (like webp) that have a smaller file size. Using smaller dimensions and scaling up will probably help if that's acceptable. Only animating one image at a time (especially preventing animations on ones off-screen) will help. Using will-change will also help. 

 

All in all it's 100% not a GSAP issue and there's not really anything that we can add here that's not already on the web about improving performance :) 

Link to post
Share on other sites

File size of the images makes almost zero difference for runtime performance, FYI. Files that are more compressed can actually take a bit longer to decode, but either way they pixels must get decoded and then they basically take up the same space in memory (based on the pixel dimensions). 

 

I'd avoid background-image if possible. I think that can be problematic performance-wise for browsers to render (at least animating the background-image is definitely a no-no, but I realize you're not doing that). You might be paying a performance price by using CSS variables as well as percentage-based values.

 

As Zach said, all the performance issues are about graphics rendering in the browser and are totally unrelated to GSAP. will-change: transform is definitely worth trying but it's not a silver bullet. 

 

The more pixels that must get rendered on each tick (changes), the more bogged down the browser will be. 

  • Like 1
Link to post
Share on other sites

Thanks for the response.  I totally hear you and in no way thought is was a GSAP thing.  Just looking for wisdom and advice.  I will for sure test all of the ideas you have brought up.

Link to post
Share on other sites

I don't know what kind of device you are using but it you can adjust the resolution -  for instance halving that would still look plenty sharp at a distance and you'd only be rendering 25% as many pixels.

  • Like 1
Link to post
Share on other sites

I will have to look into it.  They are custom built beauties running a headless chromium

Link to post
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.

×