Animate headings in WordPress

A heading or paragraph plays one entrance as it scrolls into view. Words can rise in turn, letters can decrypt, or the whole line can type itself out.

Type

An upgrade to Heading and Paragraph

Find it

Block settings, Advanced Animations

Phones

Plays on phones, apart from Hero Mode text

Speed

CSS effects run on styles alone

What you can change

The settings worth knowing.

Fourteen entrances in three families. Here is how they differ.

Swing on in

CSS effects

Whole-block entrances

Fade Up, Blur In, Clip Reveal, Zoom Fade, Flip In and Glitch move the block as one piece.

Every word finds its place

Word by Word

Words in turn

Word by Word, Stagger Fade and Assemble bring the words in one after another.

Loading your page

Script effects

Letters that change

Decrypt, Line Reveal, Pixel Reveal and Typewriter work on the letters themselves.

First in

Then me

Delay (ms)

Pace and delay

Durations run from 0.2 to 1.2 seconds, per word for word effects, with a delay of up to 2 seconds.

How to add it

Three steps. No new tool.

1

Install Grinner free

It’s on WordPress.org. Or go to Plugins, Add New, and search for Grinner Blocks.

2

Choose a heading

Any Heading or Paragraph on the page will do.

3

Pick an entrance

Open Advanced Animations, choose a CSS or script effect, set its pace, then publish.

Good to know

Fair questions.

They are a Grinner upgrade to the Heading and Paragraph blocks. The text plays one entrance as it scrolls into view, such as words rising in turn, letters decrypting or a line typing itself out. Use them to bring a heading to life without slowing the page.

Yes, with Hero Mode on the section. The heading is visible from the first paint, and desktop and tablet play the entrance over it.

Decrypt and Typewriter skip gradient text and headings with an icon, so the words just appear.

Over 60 words, word effects play as Fade Up instead.

The text appears at once and stays still.

Pairs well with

Try it with these.

Highlight words with a marker, underline, circle or serif italic, saved once for the whole site.

Numbers that count up or shuffle into place as they scroll into view.

Motion in your hero, with the first screen still drawn straight away.

Grinner grinning

Go make something
beautiful.

Free on WordPress.org · No Pro version