WPSyed

How to Shake Gutenberg Blocks When They Come Into View

by

Why might you want to shake blocks when they come into view? Can you guess?

I’ll give you a second…

…

To draw attention to them of course! A gentle shake animation catches the eye when the other content on the page is stationary.

I use it on WP to draw attention to opt-in forms, purchase buttons, etc.

In this guide, I’m going to show you how to shake Gutenberg blocks in a really easy way that you can reuse all over your site anywhere you want. Landing pages, sales pages, posts, etc.

Not just easy, but really fast. This code is well-coded, lean, and will not slow the load time of your site in a noticeable way. Performance is an important feature too.

Keep in mind, I will be going through each part to teach it to you — but you can simply copy and paste the code for your own use if you’re in a hurry.

Alright, enough buildup, let’s get into this.

  • The Shake Effect
  • HTML
  • CSS
    • The animated class
    • The delay-1s class
    • The keyframes
    • The shake class
  • JavaScript
    • The observer
    • What to observe
  • Adding This Code to Your WordPress Site
    • Setup the CSS
    • Setup the JS
    • Apply to your blocks
  • Done For You
  • Summary

The Shake Effect

This block should shake when it comes into view. Imagine having your call to action in this block.

The above block animates one second after it comes into view. Over the next few sections I’ll show you how to create this effect for your needs too.

HTML

While you will be applying this to a block, I want to show you what it boils down to in HTML.

HTML<div class="animated delay-1s [shake]">
    This block should shake when it comes into view. 
    Imagine having your call to action in this block.
</div>

You may immediately notice I put shake into square brackets — that’s because I’m showing you this in HTML — but the shake class will be added via JavaScript later.

Technically, you could leave shake there, but then it would shake immediately when the page is loaded — even if it isn’t within view of the reader.

We don’t want that, so we’ll use some JavaScript to “watch” when the element comes into view, then add the shake class — which will trigger the animation.

Let’s work on the CSS next.

CSS

We’re going to need three CSS classes and then some keyframes for the animation. Don’t worry, this is easier than you think.

.animated {
    animation: transform 1s ease-in-out;
}

.animated.delay-1s {
    animation-delay: 1s;
}

@keyframes shake {
    from,to {
        transform: translate3d(0,0,0);
    }

    10%,30%,50%,70%,90% {
        transform: translate3d(-15px,0,0);
    }

    20%,40%,60%,80% {
        transform: translate3d(15px,0,0);
    }
}

.shake {
    animation-name: shake;
}

Let’s unpack this a little bit. If you recall from the HTML, only the animated and delay-1s classes are applied at first.

The animated class

The animated class sets up the animation, or how the browser will interpolate the animation. In this case, it will work with the transform property and animate it over 1s, with a nice ease-in and ease-out so it doesn’t feel “jolty.”

We’ll also use this animated class later in the JavaScript.

The delay-1s class

Now delay-1s does exactly what it sounds like. It sets a delay so the animation won’t begin for 1 second after it loads.

Remember the animation hasn’t actually been told to run yet. We’re essentially setting it up.

The keyframes

Here is where we define the movement that will create the shake effect. Here is the keyframe CSS alone with some notes added:

@keyframes shake {
    from,to {
        transform: translate3d(0,0,0);
 /* set to original location */
    }

    10%,30%,50%,70%,90% {
        transform: translate3d(-15px,0,0);
 /* move 15px left */
    }

    20%,40%,60%,80% {
        transform: translate3d(15px,0,0);
 /* move 15px right */
    }
}

First, note after the @keyframes it is named shake. This is important because later we’ll use that to trigger the animation to run.

The from,to section is set to the same value: transform: translate3d(0,0,0); We’re doing this because we want the block to start in its original position and then also end up there too.

Then we do something tricky and set up some keyframes based on percentage. So at 10,30,50,70,90% of the way through the animation the block will be shifted 15 pixels to the left.

Then on 20,40,60,80% it is shifted 15 pixels right.

This is what produces the shake effect, but also notice there is not 100% value. This is because 100% is another way of saying to and we’ve already told the browser what to do.

The shake class

I want to say “and this is where the magic happens!” But really, we’re using this class as the trigger to start the animation.

Remember when I said pay attention to the shake right after the keyframe declaration? This is why.

The shake in animation-name: shake; points to those keyframes. It literally triggers those keyframes to begin their animation.

This is why we don’t apply the shake class to blocks, but instead let JavaScript do this so they can shake when they enter view.

JavaScript

In JavaScript we need to set up an observer that will watch the block we want to shake. This concept is getting into a bit of modern, advanced JavaScript, but don’t worry — you can copy and paste this and you’ll be fine.

JavaScriptlet observer = new IntersectionObserver((entries, observer) => { 
	entries.forEach(entry => {
		if(entry.isIntersecting){
			entry.target.classList.add('shake');
			observer.unobserve(entry.target);
		}
	});
}, {threshold: 1});
	
document.querySelectorAll('.animated').forEach(p => { observer.observe(p) });

The observer

In a nutshell, what is happening here is we instantiate an IntersectionObserer class and then tell it when an entry enters the viewport, add the shake class to it (and then stop observing it — we wouldn’t want that shake looping).

Now the observer is ready to observe, we simply need to tell it what to observe. For our purposes here we want it to watch all the blocks with animated assigned to it.

What to observe

We do this with document.querySelectorAll which loops over all the blocks with animated class and then tells the observer to observe them.

That’s pretty much it. You now have a functioning shake animation that will trigger once the block enters the reader’s view.

Adding This Code to Your WordPress Site

This is where it will be a bit tricky because while the CSS is simple, getting JavaScript into your WordPress isn’t as easy.

Setup the CSS

First lets get the easy part out of the way.

  • While logged in as admin, click “Customize” in the top menu
  • Choose the “Additional CSS” menu item (left side)
  • Paste the CSS code and save

Setup the JS

With the CSS out of the way we need to get the JavaScript into your site. This can be done using a plugin such as Simple Custom CSS & JS.

Install it and then follow the directions paste in the JavaScript code from this guide.

Apply to your blocks

After you have the CSS and JS setup you can start adding animated delay-1s to the blocks you want to shake when they enter the view of your reader.

Done For You

Strapped for time? Want all this done for you?

I put all this into a WordPress plugin so you can simply install, activate, and then add animated delay-1s to your blocks. Easy.

Super efficient — loads exceptionally fast (less than 700bytes), and just a single one-time payment for a lifetime license.$9 Buy Now!

No settings to mess with. Just works ‘out of the box.’

Summary

In this guide you learned about CSS animation setup and keyframes — plus how to use an InteractionObserver to watch when a block has entered the reader’s viewport.

These skills can be used to do much more and I hope you found this helpful.