Animation performance tips?

[skytripper]

My designer just delivered this really amazing looking site but I'm hoping someone here can give me tips on how to improve the performance.

1. The parallax performance isn't very smooth

2. The color animation - sunset, sunrise, etc. uses tons of CPU.

 

https://staging.skytripping.com/home-new

 

I've never seen hue-rotations and stuff in CSS before, can GreenSock help me or should I look elsewhere?

[GreenSock]

Welcome to the forums, @skytripper.

 

I don't have time at the moment to do a deep-dive, but that page isn't even using GSAP so I'm not quite sure what we can do for you. We really try to keep these forums focused on GSAP-specific questions. 

 

It was definitely problematic in terms of performance. Really bad. I've got a fast computer and it was really chugging. 

 

And yes, GreenSock can animate pretty much anything. It's far more flexible than CSS animations (which it looks like that page is using primarily). It's often even more performant. It can do hue rotations, sure. 

 

Performance troubleshooting is a really deep topic with lots of complexities and factors. I'm not sure anyone here will have the time to analyze your a staged/live site and give you a summary of all the things that are causing performance problems as well as solutions for them. That's a very tall order, especially in free forums that are focused on GSAP which isn't being used in that site (yet  )

 

Perhaps it'd be most helpful if you posed a specific question for us so we know exactly what you're looking for help with. If it's just about general performance tips unrelated to GSAP, maybe someone can chime in who has the time for that.

 

Good luck with the project. 

 

[skytripper]

Thanks for the reply! I was hoping to understand if conceptually GSAP would help - I thought there might be people who have had similar experiences.

 

If GSAP will outperform raw CSS, it's worth trying but I can't tell if GSAP is a just a layer of abstraction or if it can actually help me with performance.

[GreenSock]

Well, GSAP won't be a magic bullet that'll make that page perform beautifully by simply swapping it in there. In a way, it's a layer of abstraction, but only at the JS level - it doesn't use CSS animations/transitions for anything. So in that respect, it's very different than what you're using right now. 

 

I suspect that the bigger problem is the sheer amount of work you're throwing at the browser's rendering engine, repaints, etc. GSAP might help a bit, but it'll likely take some reworking of the structure of the page, how you're setting everything up, the amount of subtle animations you've got going simultaneously, etc. It seemed like you've got a LOT going on, most of it rather subtle but it's costly nonetheless, so you may want to consider sacrificing some effects for performance. The more pixels you're changing (even a tiny shift in color/opacity), the bigger the repaint area and the more work the browser's gotta do. Keep the changes to as small an area as possible. 

 

You may even want to consider switching to <canvas> for chunks of it. 

[OSUblake]

2 hours ago, skytripper said:

I've never seen hue-rotations and stuff in CSS before...

 

Shiny new CSS properties. If it's available, let's use it.

 

filter: brightness(90%) contrast(70%) hue-rotate(68deg) saturate(400%) sepia(80%)

 

What could possibly go wrong?

 

2 hours ago, skytripper said:

1. The parallax performance isn't very smooth

2. The color animation - sunset, sunrise, etc. uses tons of CPU.

 

Performance all comes down to what you're animating. Replace the hero animation with a canvas animation, and pause/hide stuff that isn't visible, and your site will be usable. All the animations are in the background, so there is no compelling reason to use HTML/CSS.

 

And yes, you can use GSAP to animate canvas. Check out the showcase page. Not every, but most of the sites on that page use canvas/WebGL for background animations.

 

https://greensock.com/examples-showcases

 

[Visual-Q]

Hmmm runs pretty smooth on my  imac, maybe it's been fixed since yesterday?

 

Note if any part of the lag that's being experienced is suspected to be due to color filters being applied at runtime or whatever you could simply take those images and apply the effect directly to the images in photoshop then the browser doesn't have to do calculations for their appearance.

[skytripper]

Thanks everyone! 

 

I dove into canvas and got a proof of concept for the parallax scrolling to animate at 60fps instead of 20ish.  I don't understand why images on canvas animate better than just using javascript and html but that's okay. I'll see if hue-rotations perform better there as well.

 

[OSUblake]

There's significantly less overhead when using canvas, and most canvas operations are hardware accelerated. Canvas was made for animations. HTML is for content. And for even better performance, check out PixiJS.

[skytripper]

PixiJS looks pretty cool. This example has some crazy hue shifting going on: 

 

http://pixijs.io/examples/#/filters/filter.js

 

It looks promising but it's not showing me anything in Safari - only chrome. Think it's something weird with my browser?

[OSUblake]

I'm not around a Safari browser right now, so I can't tell. Canvas usually displays the same in every browser. Try changing the version number from the dropdown at the very bottom and see if that works. 

 

And what about here?

 

See the Pen OgQJqV by GreenSock (@GreenSock) on CodePen

 

 

And what about the filters here?

http://pixijs.io/pixi-filters/tools/demo/

[PointC]

I just tested in Safari and it all seems fine to me.

[OSUblake]

1 minute ago, PointC said:

I just tested in Safari and it all seems fine to me.

 

Well there you go. If it's not working in Safari, then WebGL might be turned off.

[OSUblake]

It should be on by default, but maybe try here.

https://support.biodigital.com/hc/en-us/articles/218322977-How-to-turn-on-WebGL-in-my-browser

[skytripper]

I think it's related to the version of Safari I'm on: Version 11.1 (13605.1.25.1) - I didn't mean to be on the beta track but I am.

 

I got off the train now but I think I'm still in Chicago. I'll start experimenting with it in Chrome for now. Thanks again!