Subtle animation effects in online documentation

A few (subtle!) animation effects when scrolling can make even an online documentation a little bit more lively. This can be done with just a little bit of CSS.

However, what must always be ensured despite animation is that the information the users are looking for is displayed as directly and quickly as possible. Some users do not like or cannot tolerate too much movement on the screen. Animations should therefore only be executed if the respective user has not restricted or prevented the display of animations in their operating system. This is taken care of in CSS by the query prefers-reduced-motion, which all of the following examples respect.

Example 1: Subtly animated links

In the following two links, the underlining under the link does not immediately appear completely, but animates from left to right or from the inside to the outside.

The animation will only run if, for example, under Windows you have not turned off the Show animations in Windows option in the System Preferences under Ease of Access > Display.

Try it!

Hover the mouse cursor over this animated link.

Implementation for example 1

For the left-to-right animation, add the following CSS code to the CSS file used by your online documentation or to the head section of your page template:


a a:visited {
  text-decoration: none;
  position: relative;
  color: #069;
}
a:hover {
  text-decoration: none;
}
a:after, a:visited:after {
  content: '';
  height: 1px;
  position: absolute;
  bottom: 0;
  left: 0;
  width: 0%;
  background: #069;
  transition: 0.2s;
}
a:hover:after, a:visited:hover:after {
  width: 100%;
}
@media (prefers-reduced-motion) {
 .a:after, a:visited:after {
   transition: 0s;
 }
}

For the center-out animation, add the following CSS code to the CSS file used by your online documentation or to the head section of your page template:


a {
  position: relative;
  color: #069;
  text-decoration: none;
}
a:hover {
  color: #069;
  text-decoration: none;
}
a::before {
  content: "";
  position: absolute;
  display: block;
  width: 100%;
  height: 1px;
  bottom: 0;
  left: 0;
  background-color: #069;
  transform: scaleX(0);
  transition: transform 0.2s;
}
a:hover::before {
  transform: scaleX(1);
}
@media (prefers-reduced-motion) {
 a::before {
   transition: transform 0s;
 }
}

Example 2: Smooth scrolling

For links within a page, you can very easily activate animated scrolling (“smooth scrolling”) in CSS. The display then does not jump directly to the linked target, but scrolls there automatically with a visible animation.

Just click on one of the links in the content overview to this page in the upper left corner. There you can observe the effect.

Like in example 1 the animation is only run if you have not turned off the Show animations in Windows option in the System Preferences under Ease of Access > Display.

The duration of the animation depends on the browser and cannot be controlled.

Implementation for example 2

Add the following CSS code to the CSS file used by your online documentation or to the head section of your page template:


html {scroll-behavior: smooth}
@media (prefers-reduced-motion) {
  html {scroll-behavior: auto}
}

Example 3: Animated appearance of objects

Another animation effect that is usually not annoying because it does not slow down users is the animated popping up of images or text blocks when scrolling.

As in examples 1 and 2 the animation is only run if you have not turned off the Show animations in Windows option in the System Preferences under Ease of Access > Display.

Keep scrolling down and observe the images that appear and the text that appears at the end.

##### ###### ###### ######## ## ###### ######## ### ####### ####### ### ######## ########## ########### ### #### ######## ## #### ### ###### ########### ###### ##### ## ##### ### #### #### ########### ######## ############ ### ###### ########## ##### ###### ####### ### #### ##### ##### ######### #### ### ##### ######## ########## ##### ##### ######## ####### ### ######### ##### ##### ####### ##### ####### ###### ######### #### ####### ### #### ###### ##### ####### ### ######## # ######### ##### ############ #### ####### #### ##### ### ######### #### ######### ### ####### ####### #### # #### ######## ############# ### ###### ###### ####### ## ####### ### ######## #### ##### ##### ## ####### ##### #### ######## ###### ######### ########## ######### ##### ## #### ######### #######.

Fade-in

Fade-in-bottom

Slide-left

Slide-right

Works just as well for text

#### ######## ## #### ### ###### ########### ###### ##### ## ##### ### #### #### ########### ######## ############ ### ###### ########## ##### ###### ####### ### #### ##### ##### ######### ####

Implementation for example 3

This solution is based at its core on a tutorial by Jemima Abu using a combination of CSS and JavaScript.

Step 1: Add the following CSS code to the CSS file used by your online documentation or to the head section of your page template:


.js-scroll {
  opacity: 0;
  transition: opacity 500ms;
}
.js-scroll.scrolled {
  opacity: 1;
}
.scrolled.fade-in {
  animation: fade-in 1s ease-in-out both;
}
.scrolled.fade-in-bottom {
  animation: fade-in-bottom 1s ease-in-out both;
}
.scrolled.slide-left {
  animation: slide-in-left 1s ease-in-out both;
}
.scrolled.slide-right {
  animation: slide-in-right 1s ease-in-out both;
}
@keyframes slide-in-left {
  0% {
    transform: translateX(-100px);
    opacity: 0;
  }
  100% {
    transform: translateX(0);
    opacity: 1;
  }
}
@keyframes slide-in-right {
  0% {
    transform: translateX(100px);
    opacity: 0;
  }
  100% {
    transform: translateX(0);
    opacity: 1;
  }
}
@keyframes fade-in-bottom {
  0% {
    transform: translateY(50px);
    opacity: 0;
  }
  100% {
    transform: translateY(0);
    opacity: 1;
  }
}
@keyframes fade-in {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}
@media (prefers-reduced-motion) {
  .js-scroll {
    opacity: 1;
  }
  .scrolled {
    animation: none !important;
  }
}

Step 2: Place each object that you want to animate between the following two HTML snippets:


<div class="scroll-element js-scroll fade-in">


</div>

Depending on which animation effect you want to achieve, you can also replace fade-in with fade-in-bottom or with slide-left or with slide-right.

Step 3: At the end of the topic or at the end of your page template, include the following JavaScript code:


<script>
const aniscrollElements = document.querySelectorAll(".js-scroll");
var anithrottleTimer;
const anithrottle = (callback, time) => {
  if (anithrottleTimer) return;
  anithrottleTimer = true;
  setTimeout(() => {
    callback();
    anithrottleTimer = false;
  }, time);
}
const anielementInView = (el, dividend = 1) => {
  const elementTop = el.getBoundingClientRect().top;
  return (
    elementTop <=
    (window.innerHeight || document.documentElement.clientHeight) / dividend
  );
};
const anielementOutofView = (el) => {
  const elementTop = el.getBoundingClientRect().top;
  return (
    elementTop > (window.innerHeight || document.documentElement.clientHeight)
  );
};
const anidisplayScrollElement = (element) => {
  element.classList.add("scrolled");
};
const anihideScrollElement = (element) => {
  element.classList.remove("scrolled");
};
const anihandleScrollAnimation = () => {
  aniscrollElements.forEach((el) => {
    if (anielementInView(el, 1.25)) {
      anidisplayScrollElement(el);
    } else if (anielementOutofView(el)) {
      anihideScrollElement(el)
    }
  })
}
window.addEventListener("scroll", () => { 
  anithrottle(() => {
    anihandleScrollAnimation();
  }, 250);
});
</script>