How do I add custom CSS animations for specific Gutenberg blocks?

Question

I am not building a theme from scratch and am using a given Wordpress template that allows for full site editing with Gutenberg block editor.

I have been able to add custom CSS (using the Additional CSS feature in Wordpress) that allows me to tweak things site-wide, but not for specific blocks.

For example, on my homepage I have an introduction like this:

Hello, I am a writer, designer, artist 

Currently as a paragraph block.

What I would like to do is to do a scroll animation for the words writer / designer / artist, that looks like this example: https://codepen.io/yoannhel/pen/DMzjog

I've looked at the code there but can't figure out how to apply it to that specific paragraph block only. I tried editing it as an html block, following the code there, and adding a custom css class, but it doesn't work.

Regardless, it would be super helpful to know how to do custom css with specific blocks on my website without going into editing the native theme code as I am using one provided to me.

I'm pretty new to all this, so tips and pointers are really appreciated. Thank you all.

Answer 1

Many blocks allow you to add a class and/or an ID. If you select the block in the Editor, then look on the right side of the screen under the Advanced tab, it will often show "HTML Anchor" (which is an ID) and "Additional CSS class(es)". If the effect is something you plan to repeat, a class is often a good way to go - say, word-animation or something descriptive enough that it's not likely to conflict with other CSS on your website.

As to how to add the CSS itself, there are a variety of ways. Many themes allow you to go to Appearance > Customize, then into an Additional CSS area, and you can add your CSS there. If your theme doesn't support that, you can either look into a plugin that allows you to add in your custom CSS, or else create a child theme. The child theme doesn't require a lot of code but can sometimes feel more intimidating than the Customizer or a plugin that just lets you write it in.