How to add Monogrid-like animations in WordPress?

[Anil Gupta]

Hi,

I want to add animations like the Monogrid website (https://monogrid.com/) to a WordPress site.

How can I do this in WordPress?
Should I use GSAP, any plugin, or custom code?

Please guide.
Thank you.

[mvaneijgen]

Hi @Anil Gupta welcome to the forum!

 

We love helping with GSAP-related questions, but unfortunately we just don't have the resources to provide free general consulting, logic troubleshooting, or "how do I recreate this cool effect I saw on another site?" tutorials. Of course anyone else is welcome to post an answer - we just want to manage expectations.  

 

Do you have any specific animations you're talking about? I see a lot happening on that site, but adding them to Wordpress would be no issue, at least if you are in control of creating the PHP and HTML, you're using an out of the box page builder then it would a lot harder, because then you're less in control of what code gets loaded.

 

A lot of the effects I see are probably done with canvas and shaders, which GSAP not directly creates, but it can definitely aid in animating the values you setup. I would suggest looking in to Three.js and Pixi.js. 

 

Definitely not the easiest thing in the world, so if this is your first time working with GSAP I would start with something easier like checking out this awesome getting started guide https://gsap.com/resources/get-started/

 

Hope it helps and happy tweening! 

[Anil Gupta]

Hi,
Thank you for the clarification and for the guidance.

I understand your point. I’m mainly interested in smooth scroll-based animations and text transitions similar to the hero and section reveal animations on the Monogrid website.

I’m working with a custom WordPress theme, so I do have control over the PHP, HTML, and JS. I’m still learning GSAP, so I’ll start with simpler animations and go through the getting-started guide you shared.

Thanks again for pointing me in the right direction. Really appreciate it.

[mvaneijgen]

Cool! Adding smooth scroll to a site is as easy as loading our ScrollSmoother plugin on the page and wrapping the content in a view divs https://gsap.com/docs/v3/Plugins/ScrollSmoother/ than adding data-scroll-speed with some values gets you already 90% of the way there. 

 

Adding text animation is a bit more involved, but not by much. Just load SplitText https://gsap.com/docs/v3/Plugins/SplitText/ and ad some tweens to your text is not that complicated. 

 

Giving the getting started guide a once over isn't a bad idea, you might be surprised what all is possible!

 

Hope it helps and happy tweening!