Animate an object on-scroll

#beginners #css #javascript #animation

For a recent project I wanted to include an image that rotated when you scrolled up or down. After doing some research I found there are multiple ways to do this: Using only css, using javascript, using libraries and so on.

This short tutorial will focus on the easy and short way to add in an animated scroller. If you're building a small website or project and want to include one:

This is the place to be!

(For large-scale projects, I recommend checking out additional tutorials for more optimized solutions).

Setting up your object

We want to set up our object. This can be a general image: from an icon to a vector shaped object. I recommend using a vector shaped image as they are highly editable (if you so desire), or otherwise a PNG for transparancy support.

We'll contain our object inside of a div for ease of use and clarity and place it within our html code. (Usually at the top)

<div id="scrollContainer">
  <img src="../../../public/img/scrollObject.svg" alt="scrollObject" id="scrollObject">
</div>

We can include as many objects as we want but to keep it simple we'll work with this one.

Positioning

Now where do we want to position our object? This is usually defined by the goal of our object. What do we want it to achieve:

A small subtle icon at the bottom right
A scrolling position indicator
A fancy animation
A big indicator to catch our visitors' eye
...

As we want to just add a small, fun animation while scrolling. It makes sense to put it at the bottom right of our page.
In our css we write some of the following styling:

#scrollObject{
  position: fixed;
  right: 3vw;
  bottom: 3vh;
  top: auto;
  width: 7vh;
  height: auto;
  transition: 0.1s ease-out;

The main thing we want to do is keep our object in the same place when scrolling so we add position: fixed;
Some other attributes we use are right, top, bottom etc. We Use these to position our object and give it some space/margins next to the edge. You can play with these as much as you like untill you reach your desired position for your project.

We use viewport units (Viewport height & Viewport width) to keep our object responsive. Something you always want to keep in mind.

Animation

Finally we want to animate our object. Some pretty, simple animations can be achieved through css, but we want our object to move based on our scrolling actions. For this we will include a very short and simple block of Javascript code.

let scrollObject = document.getElementById("scrollObject");
window.addEventListener("scroll", () => {   
scrollObject.style.transform="rotate("`${window.pageYOffset}`"deg)";
});

You can include this in your linked JS files, or if you're building something small, include it in a script tag at the bottom of your html page.

Look at the result to check out the animation, and If you wish to slow it down (or speed it up), you can include it inside of a simple mathematical expression. You can include this inside of the rotate function, or make a seperate variable for it if you wish to reuse this speed for more objects, like so:

let scrollSpeed = window.pageYOffset / 2;
let scrollObject = document.getElementById("scrollObject");
window.addEventListener("scroll", () => {
scrollObject.style.transform="rotate("`${scrollSpeed}`"deg)";
});

We can also use the window.pageYOffset data as a means to adjust or define other animations (eg. changeing the animation or image shown based on the window position). You can call this data with a simple console.log(windows.pageYOffset); if you want use it to get started.

There we go, we have a simple animated image when scrolling!

Bonus: mobile
For responsiveness I decided to change the position of my scrolling icon and made it replace the image in my navigation to still show off this neat animation!

@media only screen and (max-width: 600px) {
  #scrollObject{
    transition: 0.2s ease-out;
    margin-left: -4vh;
    width: 8vh;
    height: auto;
    top: 10px;
    left: 50%;
  }

Just use a simple media-query to reposition, resize,... et voila!

You might have noticed I've added a transition timing and ease option, this is to make the image appear and dissapear smoothly when going from desktop to mobile sized screens.

This results in the following:

If you're working in a vue project, as I was: try to include this either as a seperate component. Or code it into your App.vue, as you will want it to be on top of every view available.