customization – 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.

Any tips and pointers really appreciated. Thank you all.

0
aristhought 4 weeks 2022-08-30T17:58:21-05:00 0 Answers 0 views 0

Leave an answer

Browse
Browse