YYC Software - Blog on Static Website

January 28th, 2023

Moving away from Static Website content. Lets look at using CSS transitions to provide a more immersive user experience and create simple animations on any website.

In this post we will be focusing on a simple fade in animation that is triggered every time an element is scrolled into view.

To do this we will utilize an IntersectionObserver which is a built in javascript object. This will be fired anytime our viewport crosses the location of where our object is. Let's look at the javascript.

  const observer = new IntersectionObserver(
  function (entries) {
    // Loop over the entries
    entries.forEach(function (entry) {
      // If the element is visible
      if (entry.isIntersecting) {
        // Add the animation class
        entry.target.classList.add('animate');
      }
      else {
        entry.target.classList.remove('animate');
      }
    });
  }
);
                
document.querySelectorAll(".animation-object").forEach((i) => {
  if (i) {
    observer.observe(i);
  }
});

Let's break this down a bit. First we create our IntersectObserver and define what happens when it's triggered. We have to loop through each entry to find which element is intersecting using the isIntersecting function. If we are intersecting we will add a class called animate and if we are not we will remove that class. If you only wanted your animation to happen once per page load just remove the else part of this function.

Now with our observer defined we need to add objects for it to listen to. So we look for any element on our page with the class animation-object. For all those elements we want the observer to fire when the viewport intersects.

Okay that seems straight forward enough. Now we need the css to actually do something with these objects. Take a look at the code below.

.fade-in { 
  opacity: 0; 
  transition: 1000ms all ease-in-out; 
}
.fade-in.animate { 
  opacity: 1; 
}

Here we have a fade-in class which is our initial start state with a clear object (opacity = 0). We also use the transition shorthand, this will describe how we move to the animate state, we'll come back to this. Next we have the .fade-in.animate class. If you recall from earlier we add the animate class when we want our animation to start in our javascript file. This defines our end state which is an object with opacity of 1.

The transition element is a css shorthand. The first item is our transition-duration, so we want our fade in to last one second. Next is our transition-property which allows us to pick specific properties that are effected by the transition. We want ours to effect everything so we pick all. Lastly is our transition-timing-function which we want our animation to start slow and end slow but pick up speed in the middle. I would recommend going through the w3schools article on transitions here.

That leaves us just one step. Add the appropriate classes to the object we want to animate like below.

<div class="hero-content animation-object fade-in">

The animation-object property tells our javascript we want to animate this object when it scrolls into view and the fade-in property tells our css which animation it should use. You can see the results in my gif below. Feel free to play with different transitions. Next time we will look at CSS animations and see how they differ from transitions.

Gif showing a fade in CSS transition on the YYC Software homepage

If you have any questions feel free to submit using the contact form at the bottom of this page and we will get right back to you as soon as we can. Thanks for reading!

CSS Transitions

January 28th, 2023