lagging

[TrulyNewbie]

Hi, I've put together my site here [RETRACTED] but my portfolio section is sooooo laggy on safari and a little choppy on chrome. 

I've read through the tips and documentation today before asking for help, and I thought keyframes maybe the answer. But I can't get it to work. I tried to merge the array with the keyframes but I'm stuck. 

I added will-change transform to the 3 divs, but I read online that it maybe over kill

I also thought it may be my image size, but that's not the issue either. 

Locomotive and gsap are my only external files.

I'd appreciate any help. 

Thank you

See the Pen LYRqPrg by NewbieRuby (@NewbieRuby) on CodePen

[GreenSock]

Nice looking site!

 

I can almost guarantee this has nothing to do with GSAP. It 99.9%+ of the cases, the lag has to do with graphics rendering in the browser. Performance optimization is a deep topic and unfortunately we don't have the resources to do free performance audits on live web sites and dig into all the ways you could improve things. Perhaps someone else here has time to throw at that, though. 

 

I can almost guarantee that it'll make zero noticeable difference if you restructure some of your animations to use GSAP's keyframes feature. I wouldn't burn time on that. 

 

I see you're using clip-path which may be part of the problem for Safari. Each browser has its own strategies for rendering things and some are far better at optimizing than others. I'd recommend experimenting with eliminating certain targeted effects one-by-one to see which make the biggest difference. Like try ditching clip-path and see if that significantly boosts Safari performance. 

 

Oh, I also noticed you're using filters. Those are TERRIBLE for performance. I'd strongly recommend ditching those if you can. Often it's possible to get a similar effect by applying an effect in Photoshop to a raster image, and just loading that instead of trying to do a filter live in the browser. A normal PNG file, for example, will render way faster than an element with a filter on it, especially if you're animating that element. 

 

If you've got any GSAP-specific questions, we'd be happy to help. 

[TrulyNewbie]

Thank you for your compliment (it has made my day) and thanks for your advice! I removed the filter and it worked! Thank you so much. Bless you