Animation

For the page "Sport News" I added the page class "animation" (in the menu item - the class will be added to the body element) and wrote a Javascript function in user.js. The function looks for all elements with the class "blog-item" (these are the single posts in the blog) and adds the class "inview" when they become visible while scrolling. The "IntersectionObserver" takes care of checking whether the elements are in the ViewPort.

In the user.css file I then defined an animation for the elements. There is a great tool that creates such animations: Animista

user.js

document.addEventListener('DOMContentLoaded', function () {

	const items = document.querySelectorAll('.animation .blog-item');

	const inview = function(entries){
		entries.forEach(entry => {
			if(entry.isIntersecting){
			entry.target.classList.add('inview'); 
			} else{
				entry.target.classList.remove('inview'); 
			}
		});
	}
	const io = new IntersectionObserver(inview);
	for(let i=0; i < items.length; i++){
		io.observe(items[i]);
	}

});

user.css

.animation .blog-item.inview {
	-webkit-animation: scale-up-hor-center 0.4s cubic-bezier(0.390, 0.575, 0.565, 1.000) both;
	        animation: scale-up-hor-center 0.4s cubic-bezier(0.390, 0.575, 0.565, 1.000) both;
}
/* ----------------------------------------------
 * Generated by Animista on 2022-12-1 12:3:36
 * Licensed under FreeBSD License.
 * See http://animista.net/license for more info. 
 * w: http://animista.net, t: @cssanimista
 * ---------------------------------------------- */

/**
 * ----------------------------------------
 * animation scale-up-hor-center
 * ----------------------------------------
 */
@-webkit-keyframes scale-up-hor-center {
  0% {
    -webkit-transform: scaleX(0.4);
            transform: scaleX(0.4);
  }
  100% {
    -webkit-transform: scaleX(1);
            transform: scaleX(1);
  }
}
@keyframes scale-up-hor-center {
  0% {
    -webkit-transform: scaleX(0.4);
            transform: scaleX(0.4);
  }
  100% {
    -webkit-transform: scaleX(1);
            transform: scaleX(1);
  }
}