Performance problems with animating opacity + x.

[EvilMegaDroid]

Hello guys.
I'm having a weird performance issue on my portfolio when I access it via mobile. Animation performance lags the first time it runs and also sometimes it starts dropping frames. I have a high-end device so I kinda think Its probably a problem on my implementation.
The lag starts when I use the buttons and the animation starts.

Website url: https://andreahasani.com/
js file: https://andreahasani.com/static/js/main.js

Would appreciate some help.

[GreenSock]

Hm, it's pretty tough to troubleshoot a live site like that with so much going on. What exactly is lagging? The text reveal? The scroll? It looks like you're not even using GSAP for the animation of the text, so I'm not quite sure what to say. There's some odd GSAP code in there too with things like ease:"fadeOut" (there's no such thing). I'd also recommend changing from visibility:hidden to visible instead of display:none to block because visibility doesn't affect document flow, thus it's much easier for the browser performance-wise. I doubt that's the main issue, though. Maybe it's more related to the TypeIt thing you're using to do the text animation. (?)

 

If you're still having trouble, maybe try isolating things in a codepen demo and slowly build it up until you hit problems - that can really help identify the main culprit. 

 

Happy tweening!

[EvilMegaDroid]

I kinda tried visibility but it somehow doesn't show up my panels. Also I will still have to change height since I animate that and display: none; its a simple way to DOM to use the height of the next panel.
Do you have any kind of suggestion on how I can debug this properly?
I thought that option was there. Made the switch from velocity. Will look at gsap docs for ease.

I'm probably doing a bad implementation for it to cause some slow.

[GreenSock]

We'd love to help, but I'm a little unclear about what your specific question is. Could you clarify? 

 

Oh, and I didn't mean to imply you must use visibility instead of display - sometimes it's totally appropriate to use display:none to block. 

 

I think that once you grasp the basics of GSAP, you'll be really glad you switched from Velocity (not that it's "bad" by any means). Have you gone through the "getting started" guide? https://greensock.com/get-started-js

 

Again, if you have any GSAP-specific questions we'd be happy to help. A codepen demo would greatly increase your chances of getting an answer too

 

Happy tweening!