Scroll Triggered CSS Animations

Here’s a simple example of an animation you can add to your WordPress website (and how to make it triggered by scrolling into view).

This is done using only code (so if your sick of adding new plugins don’t worry you won’t need any).

A Simple Animation

So here’s a simple animation that triggers as soon as a page/post is loaded:

Custom HTML

This is added to a page/post with a couple simple classes in a Custom HTML block:

<div class="at-container">
<div class="at-item1">Animation</div>
</div>

Additional CSS

Those classes are then styled/animated with some Additional CSS:

/**
 * ANIMATION
 * EXPERIMENTS
 */
div.at-container {
	display: flex;
	align-items: center;
	justify-content: center;
	height: 100%;
}

.at-item1 {
	color: #3079ed;
	font-weight:bold;
	font-size:3em;
	
	animation-name: focus-in-zoomout;
	animation-duration: 1s;
	animation-timing-function: ease;
	animation-delay: 0s;
	animation-iteration-count: 1;
	animation-direction: normal;
	animation-fill-mode: none;
}

@keyframes focus-in-zoomout {
	0% {
		letter-spacing:1em;
		transform:translateY(300px);
		filter:blur(12px);
		opacity:0;
	}
	100% {
		transform:translateY(0px);
		filter:blur(0);
		opacity:1;
	}
}

Triggering On Scroll

To trigger an animation when it scrolls into view you will need to use some JavaScript.

But don’t worry if you aren’t any good with this sort of thing, I have jammed it into a simple function.

JavaScript In A Function

This code is simply added to your theme/child-theme in “functions.php”.

/**
 * Animation Triggered When Scroll Into View!
 * (Triggers only on specific page/post!)
 * Post: 4703
 */
function wpb_hook_javascript() {
  if (is_single ('4703')) { 
    ?>
        <script type="text/javascript">
          // your javscript code goes here
          function scrollTrigger(selector){
		  let els = document.querySelectorAll(selector)
		  els = Array.from(els)
		  els.forEach(el => {
			addObserver(el)
		  })
		}
		function addObserver(el){
			// We are creating a new IntersectionObserver instance
			let observer = new IntersectionObserver((entries, observer) => { // This takes a callback function that receives two arguments: the elements list and the observer instance.
			  entries.forEach(entry => {
				// `entry.isIntersecting` will be true if the element is visible
			  if(entry.isIntersecting) {
				entry.target.classList.add('active')
				// We are removing the observer from the element after adding the active class
				observer.unobserve(entry.target)
			  }
			})
		  })
		  // Adding the observer to the element
		  observer.observe(el)
		}
		scrollTrigger('.at-item2')
        </script>
    <?php
  }
}
add_action('wp_head', 'wpb_hook_javascript');

Additional CSS

You will want to split the animation from the basic styling of the classes like this:

/**
 * ANIMATION
 * EXPERIMENTS
 */
div.at-container {
	display: flex;
	align-items: center;
	justify-content: center;
	height: 100%;
}

.at-item2 {
	color: #3079ed;
	font-weight:bold;
	font-size:3em;
}

@keyframes focus-in-zoomout {
	0% {
		letter-spacing:1em;
		transform:translateY(300px);
		filter:blur(12px);
		opacity:0;
	}
	100% {
		transform:translateY(0px);
		filter:blur(0);
		opacity:1;
	}
}

.at-item2.active {
	animation-name: focus-in-zoomout;
	animation-duration: 1s;
	animation-timing-function: ease;
	animation-delay: 0s;
	animation-iteration-count: 1;
	animation-direction: normal;
	animation-fill-mode: none;
}

Custom HTML

And then simply add the Custom HTML block to your page/post (not I have changed the name of one of the classes to show the difference here):

<div class="at-container">
<div class="at-item2">Animation</div>
</div>

Result

And this results in an animation that only runs when you scroll until it’s visible:

If this was helpful for you please leave a comment.

And feel free to suggest any other similar topics you would like explained!