Using with Gutenberg & Blocks

[Pete G]

Hi there,

While I have a basic understanding of HTML and CSS is there any guidance for beginners like myself on using GSAP on a WordPress site using Gutenberg blocks.

I would love to learn how to do this: 

Further down...mikel suggestions and provides samples.

I am of course not ready to tackle this yet however keen to learn.
From mikel's suggestions I can see the HTML setup and can see why the CSS is there.

Its taking apart this so that the elements works on a WordPress page using rows and blocks which of course can have CSS classes etc.

I understand some of what is being done and why (watching many videos on this site and Creative Coding Club) ....I just have no way of knowing how to get this onto a WordPress page.

Any direction would be great. Thank you. Pete


 
 

[OSUblake]

Hi Pete, 

 

What's a Gutenberg site? 

[Pete G]

Hi there,
Sorry I should have said WordPress Gutenberg Block editor.

[OSUblake]

Sorry, I don't know of any resources to help out with that, but maybe someone else will chime in that knows of some good tutorials.

 

It would probably be better to explore WordPress resources for something like this, but instead of searching for how to do a GSAP animation, search for something a little more generic, like how to add custom HTML, CSS, and JavaScript. Once you can get that get going, it should be pretty straightforward to add in some GSAP magic.

 

[Cassie]

No code solutions are great until you need to add some code ?

https://wpshout.com/quick-guides/wordpress-gutenberg-html/ <- this looks like a good start though.

There's likely some youtube videos out there too!