How I revamped my homepage using scroll animations with GSAP
Tags: vue, webdev, showdev, javascript
Published: 2021-03-15 22:17:47

---
title: How I revamped my homepage using scroll animations with GSAP
published: true
description: Introduction into web animation library GSAP
tags: #vue #webdev #showdev #javascript
cover_image: https://images.unsplash.com/photo-1583365978529-042d9f46dccc?ixid=MXwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHw%3D&ixlib=rb-1.2.1&auto=format&fit=crop&w=1050&q=80
---

Have you ever looked at a website or any content on the web and think: "I would love to be able to do something like that!" I usually have that feeling when I see anything animated like the newest Disney motion picture or interactive formats like [visual essays from Pudding](https://pudding.cool/2017/05/song-repetition/).

When I stumbled upon the [GSAP](https://greensock.com/gsap/) library, I took the chance to rebuild my [homepage](https://www.schmowser.de/) from scratch in order to whip some smooth UX on it like the examples above. The goal is to have all information on one page to be provided bit by bit through scrolling.

___

# Setup

GSAP can animate everything JavaScript can touch. They say it interacts well with the common Frontend frameworks. So, I setup a [Vue 3 project with Vite](https://v3.vuejs.org/guide/installation.html#vite) and got started. GSAP can be installed via npm: `npm install gsap`

___

# Simple example: Loading bar

I want to showcase GSAP's ScrollTrigger features by implementing a loading bar that enters the screen when scrolling down. The output should look similar to this:

![Alt Text](https://s4.gifyu.com/images/backtotoploadingbar.gif)

First, we need an element to move. So, we define an CSS element `loading-bar`: 
```css
.loading-bar {
  width: 100vw;
  height: 50px;
  background-color: white; 
  color: darkslategrey;
  font-size: larger;
}
```
Moving the bar 100 pixels to the right for example is fairly simple. Import the gsap dependency and use the `.to` function to determine where the element should end up on the screen. GSAP takes care of the corresponding property manipulation for you!
```javascript
import { gsap } from 'gsap';

gsap.to(".loading-bar", {
  scrollTrigger: ".loading-bar",
  x: 100
});
```
The first argument tells GSAP which element should be manipulated. The property `scrollTrigger` makes clear when the animation should start. In this case, you want it to move to the right when `.loading-bar` enters the screen. 

___

# Timelines for versatility

We learned the first steps to create our animation. But when to run that code? A solution would be once the instance of the component has been mounted. So, we put it in the corresponding [lifecycle hook](https://vuejs.org/v2/api/#mounted):
```javascript
export default {
  mounted: () => { 
    const tl = gsap.timeline()
    tl.from('.loading-bar', { xPercent: -100, duration: 2 })
  }
}
```
Notice that we used a [Timeline](https://greensock.com/docs/v3/GSAP/Timeline) here because it makes organizing animation steps easier when handling more CSS elements. Imagine writing multiple `gsap.to()`s which would make your code hard to read.

Also, we switched from `gsap.to()` to Timeline's `.from` function. It is just the other way around this time. Now, our bar will come *from* off-screen (left) and slide into the original position.

___

# ScrollTrigger

We are missing the trigger for our animation which we will deliver through the ScrollTrigger Plugin. You need to import and register it.

```javascript
import { ScrollTrigger } from "gsap/ScrollTrigger";

export default {
  mounted: () => { 
    gsap.registerPlugin(ScrollTrigger);

    const tl = gsap.timeline()
    tl.from('.loading-bar', { xPercent: -100, duration: 2 })

    ScrollTrigger.create({
      animation: tl,
      trigger: ".background-panel",
      start: "top top",
      end: "+=1000",
      pin: true,
      scrub: true,
    })
  }
}
```
You see that the trigger element is a `.background-panel` element that I defined to function as a canvas for the animated loading bar. Let's go through the other properties.

`start`: You pass two keywords here. Here, for example, the animation starts when the top of the viewport reaches the top of the background panel. This ensures that the background panel is in full view before the animation starts.

`end`: This determines when the animation ends. This increment means that you need to scroll 1000 pixels to see the full animation evolving. This gives the user the feeling that s/he in scrolling "in place".

`pin`: If set to true, the trigger element (here: the background) is pinned throughout the animation.

`scrub`: If set to true, you can scroll up and the animation is reversed!

The different effects will become clearer once you see the result on my [homepage](https://www.schmowser.de/). Caution: It is not mobile-optimized yet!

___

# Verdict

I was astonished by the speed and versatility of animating with GSAP. I even added a Parallax effect to my website among other things.

![Alt Text](https://s4.gifyu.com/images/schmowserdeanimation.gif)

Feel free to tell me what you think of the animations on my [website](https://www.schmowser.de/). And go check out GSAP yourself! There is plenty of [documentation](https://greensock.com/docs/v3/Plugins/ScrollTrigger) and [showcases](https://greensock.com/showcase/) on their website. It is definitely one of the smoothest frameworks I picked up this year!

___

Photo by <a href="https://unsplash.com/@gensahub_style?utm_source=unsplash&utm_medium=referral&utm_content=creditCopyText">Gensa Hub</a> on <a href="/s/photos/animation?utm_source=unsplash&utm_medium=referral&utm_content=creditCopyText">Unsplash</a>