Help in GSAP optimization on wordpress platform

[borman13]

Hey, everybody. I am developing wordpress themes. In many projects I use GSAP animations. In large multi-page sites I face the problem of poor performance of GSAP scrolltriger property pin. Probably I am lacking experience to optimize it. Perhaps someone can share his experience how to better optimize animations in such projects (in the context of Wordpress and in general)? Perhaps it makes sense to separate all pages by block and load js-code animations only when there is a block? Thanks for any information

 

PS. To understand the Wordpress problem I will add. That in most sites I create my custom theme from scratch. Pages are separated by blocks. These blocks work with the help of ACF Gutenberg plugin.

[mvaneijgen]

Hi @borman13 welcome to the forum!

 

Personally I find it much easier to test on places like Codepen, it allows you to just easily fork your work so that you can rapidly test new ideas and best of all you don't have to worry about your framework (or platform) throwing errors. Then it is as simple as porting your code over to your theme and you have a known working version to test against. If any issues arise you then have a version you can share on place like this to ask for feedback

 

I also develop sites in Wordpress where GSAP is installed via NPM and loads in my Javascript files, this results in GSAP being accessible in all my Javascript files. I do not work with Gutenberg, but do also use ACF, I just check (if statement) in my JS files if the current element I'm targeting is on the page and then load the corresponding animation, so in theory on all my pages the same animations are being loaded, but it only executes if the corresponding element is on the page. I've never had GSAP being the culprit of being por performance, if this however is the case this then should also be the case if it is in an isolated environment (via a minimal demo) and we would love to see this to help you debug, but I have the feeling something else will be causing your performance issue. Take a look at the docs https://gsap.com/resources/mistakes  and https://gsap.com/resources/st-mistakes/to see if you maybe making any of these mistakes.

 

You can also try removing big chunks of your code base until the issue is gone, then start slowly in smaller chunks adding it back in until the issue is back again. This way you can pin point what is causing your issue and thus easier debug it. 

 

Hope it helps and happy tweening! 

[borman13]

1 hour ago, mvaneijgen said:

Hi @borman13 welcome to the forum!

 

Personally I find it much easier to test on places like Codepen, it allows you to just easily fork your work so that you can rapidly test new ideas and best of all you don't have to worry about your framework (or platform) throwing errors. Then it is as simple as porting your code over to your theme and you have a known working version to test against. If any issues arise you then have a version you can share on place like this to ask for feedback

 

I also develop sites in Wordpress where GSAP is installed via NPM and loads in my Javascript files, this results in GSAP being accessible in all my Javascript files. I do not work with Gutenberg, but do also use ACF, I just check (if statement) in my JS files if the current element I'm targeting is on the page and then load the corresponding animation, so in theory on all my pages the same animations are being loaded, but it only executes if the corresponding element is on the page. I've never had GSAP being the culprit of being por performance, if this however is the case this then should also be the case if it is in an isolated environment (via a minimal demo) and we would love to see this to help you debug, but I have the feeling something else will be causing your performance issue. Take a look at the docs https://gsap.com/resources/mistakes  and https://gsap.com/resources/st-mistakes/to see if you maybe making any of these mistakes.

 

You can also try removing big chunks of your code base until the issue is gone, then start slowly in smaller chunks adding it back in until the issue is back again. This way you can pin point what is causing your issue and thus easier debug it. 

 

Hope it helps and happy tweening! 

Hi. Thanks for the feedback. I didn't upload to Codepen and didn't give a code example, as it's a more summary question) You load the static GSAP file still at the moment of layout inside the builder and then use it? Am I right? Why not use a CDN?

Maybe the problem is that my gsap code is not the most optimized. Can you tell me where I can get my code reviewed by more experienced developers? Maybe it's not free? If possible, can you show examples of your work exactly wordpress? Thx

[mvaneijgen]

14 minutes ago, borman13 said:

I didn't upload to Codepen and didn't give a code example, as it's a more summary question)

Still if you have an issue and think it is caused by GSAP or its plugins I highly recommend recreating it in an isolated environment (minimal demo), so that we can help you debug

 

There is nothing I would write differently for a small or a large site or outside or inside Wordpress, so again your performance issues are probably not caused by GSAP it self. Or you are doing something fundamentally  wrong, but we can't judge this if we don't have a minimal demo.

 

8 minutes ago, borman13 said:

You load the static GSAP file still at the moment of layout inside the builder and then use it? Am I right? Why not use a CDN?

I bundle all my JS in one big file with all the plugins I need for that particular site. Everything that is not the home page gets lazy loaded and I don't use a CDN, because that is not possible with all the premium plugins. I also want to easily update which is a nice process with NPM.

 

7 minutes ago, borman13 said:

Can you tell me where I can get my code reviewed by more experienced developers? Maybe it's not free? 

Check out our jobs and freelance forum https://gsap.com/community/forums/forum/15-jobs-freelance/ 

 

And check the docs https://gsap.com/resources/Wordpress/ for what is more the Wordpress way of doing things. 

 

Hope it helps and happy tweening!