Animation Observer - Part One

   
   
 bulma  css  javascript  
 frontend  
Related Articles

SVG Bezier Path Animation

Animation Observer

Table of Content

Preface

Goal: Trigger animation on scroll using intersection observer.

I have been impressed by how easy can be done using CSS only.

Two very cool CSS library that I use in my blog are

  1. animate.css
  2. hover.css

Still amazed by this animate.style library, I need a way to show the animation,’ over and over again. For example, when the element shown by scrolling up and down, I want the animation to be replayed again.

Note that, we do not need to do anything with hover.css. The hover triggered well with pure css.

Intersection Observer

Since by the time this article is written, there is no pure CSS approach to do such thing, I need javascript to trigger the animation, by using scroll event.

The method has an API called intersection observer

1: General Preview

This is what javascript animate observer that we want to achieve. To make it easier for you to get the idea, you can examine the video below.

2: Page Preparation

I’m using Bulma tutorial made years ago, with a few enhacement.

Source Code

The last Bulma step is Tutor 06, and for this tutorial I give it a name as Tutor 07.

The source code can be found below:

Adding Image

You can just clone the repository, and open the html example in browser, along with the CSS and JS. Without any need to compile the CSS.

However this below, is additional SCSS, to differ from our last tutorial.

.layout-base
  padding-top: 0.5rem
  padding-bottom: 0.5rem

#sitedesc_image
  width: 500px
  height:100px
  max-width: 100%
  background: transparent url(../images/blue-sfme.png) no-repeat left top
  background-size: 100% auto
  float: none
  margin-top: 0
  margin-bottom: 10px
  margin-right: auto
  margin-left: auto

Now we can apply the html.

    <main role="main" 
          class="column is-full">

      <div class="zoomIn"
              id="sitedesc_image"></div>

      <section class="main-wrapper blue">
        <div class="blog white z-depth-3 hoverable">
          ...
        </div>
      </section>

    </main>

Here is what we want to achieve.

Site Description

We are going to make this bounce later.

3: Animate CSS

To make the animation works, you can examine the CSS for each effect.

HTML Head

First add this stylesheet in the HTML head.

  <link rel="stylesheet" type="text/css"
        href="css-71/animate-zoom.css">

Stylesheet: Keyframe

I grabbed the stylesheet from the original CSS, and strip down for tutorial purpose.

The stylesheet contain keyframes, and the related classes.

@keyframes zoomIn {
  from { opacity: 0.3; transform: scale(0.3, 0.3); }
  50%  { opacity: 1; }
}

@keyframes zoomOut {
  from { opacity: 1; }
  50%  { opacity: 0.3; transform: scale(0.3, 0.3); }
  to   { opacity: 0.5; }
}

Stylesheet: Classes

And of course, the class itself, in verbose format.

.zoomIn_hover:hover,
.zoomIn {
  animation-duration: 5s;
  animation-delay: 2s;
  animation-fill-mode: both;
  animation-name: zoomIn;
  animation-iteration-count: 3;
  animation-timing-function: ease;
  animation-direction: normal;
}

And the shorter brief format if you like.

.zoomOut_hover:hover,
.zoomOut {
  animation: zoomOut 4s ease 1s 4 alternate;
}

You can learn about animation in w3schools.com or anywhere. Just google or duckduckgo. I won’t go further to explain the animation behind the scene.

HTML: Animate: Zoom In

Now you can add zoom in animation, by adding class.

      <div class="zoomIn"
              id="sitedesc_image"></div>

And also its hover sidekick.

<div class="justify-content-center">
   <img src="images/one-page.png"
      class="zoomIn_hover"
        alt="business card">
</div>

With the result as below:

HTML: Animate: Zoom Out

And also this weird zoom out animation.

      <div class="zoomOut"
              id="sitedesc_image"></div>

With the result as below:

4: Hover CSS

The same applied with hover animation. I stripped the script for tutorial purpose.

The stylesheet contain keyframes, and the related classes.

HTML Head

First add this stylesheet in the HTML head.

  <link rel="stylesheet" type="text/css"
        href="css-71/hover-buzz.css">

Stylesheet: Keyframe

/* Buzz */
@keyframes hvr-buzz {
  50% {
    transform: translateX(3px) rotate(2deg);
  }
  100% {
    transform: translateX(-3px) rotate(-2deg);
  }
}

Stylesheet: Classes

And of course, the class itself, in verbose format.

.hvr-buzz {
  display: inline-block;
  vertical-align: middle;
  transform: perspective(1px) translateZ(0);
  box-shadow: 0 0 1px rgba(0, 0, 0, 0);
}
.hvr-buzz:hover, .hvr-buzz:focus, .hvr-buzz:active {
  animation-name: hvr-buzz;
  animation-duration: 0.15s;
  animation-timing-function: linear;
  animation-iteration-count: infinite;
}

HTML: Animate: Hover Buzz

Just add hvr-buzz class.

<p>
  <a class="button is-dark hvr-buzz
            blue-grey darken-2 hoverable mb-1"
     href="#">Articles Sorted by Month</a>
  <a class="button is-dark hvr-buzz
            blue-grey darken-1 hoverable mb-1"
     href="#">Articles Sorted by Tag</a>
</p>

With the result as below:

Pretty cool right?

What is Next ?

This should be enough for animation introduction. We are going to continue with intersection observer.

Consider continue reading [ Animation Observer - Part Two ].

Thank you for reading.