Exploring Web Animations

Is it even worth it

I've always wondered how animations are done on websites. I thought this would be so cool to learn, but I was also doubtful about how much of it I would actually use. I did a brief search on what was possible and found instructions on how to make words go big then small, and how to make a newspaper rectangle spin and get smaller until it's gone. I dismissed this idea thinking there is probably something more practical I can learn.

Another day, I gave animations another shot and came across this article. It showed examples of really cool things you can do: loading, welcoming, scrolling, image galleries, and visual feedback. It also included different libraries, which helped clear up how mysterious where animations come from is. I looked up more libraries and found even more:

• GreenSock (GSAP)
• ScrollMagic
• Velocity.js
• mo.js
• anime.js
• vivus.js
• Popmotion
• three.js
• scrollReveal.js
• WickedCSS
• tuesday
• CSShake
• Animate Plus
• Bounce.js
• Hover.css

There are so many libraries I am overwhelmed. Some seem like they were more oriented towards doing a specialization while others were larger libraries with more options.

I looked up what library people prefer to use, and I found GSAP mentioned a lot so I decided to roll with it. It has a lot of capabilities, and you can also include plugins that do more specific tasks. It seems like I would be able to do a lot of different things with this library if I learned how to use it. There is a lot of documentation with examples of code, visual examples of how the animation looks, and Youtube tutorial videos. They also show a lot of amazing things people have created.

Using GSAP

“Animation ultimately boils down to changing property values many times per second, making something appear to move, fade, spin, etc. GSAP snags a starting value, an ending value and then interpolates between them 60 times per second.” -Getting Started with GSAP

To include GSAP, add this code to your HTML file before you include your JavaScript file:

<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.10.4/gsap.min.js"></script>
<script src="index.js"></script>

A tween is one of the foundations of GSAP. It is basically a line of code with information about how you want to animate an object. Here is their example of what a tween looks like:
gsap.to(".box", {rotation: 27, x: 100, duration: 1});

I copied and pasted tweens from GSAP documentation into CodePen, and played around with how the code worked. Every example I show here is from the GSAP documentation JavaScript examples. Some things I changed to match the HTML I made. Here is the first animation I copied, which is text fading:

Html:
<h1>Hello World</h1>

JavaScript:
gsap.to("h1", {duration: 5, opacity: 0.3});

This is a .to() method. The duration is how long it takes to get to that opacity so the opacity starts at 1.0 and goes to 0.3. There are also the .from() and .fromTo() methods. Here is the same example, but with the .from() method.

JavaScript:
gsap.from("h1", {duration: 5, opacity: 0.3});

The duration is how long it takes to get from that opacity so the opacity starts at 0.3 and goes to 1.0.

Here is an example for basic movement horizontally and vertically:

• move left:
  gsap.to("h1", {duration: 1, x: -100});

• move right:
  gsap.to("h1", {duration: 1, x: 100});

• move up:
  gsap.to("h1", {duration: 1, y: -100});

• move down:
  gsap.to("h1", {duration: 1, y: 100});

*The y: -100 to move up and y: 100 to move down are not typos. It is negative to go up.

Here is an example of how to make things move in a sequence. Whichever line in the JavaScript comes first will move first in this example:

HTML:

<h1>First Movement</h1>
<h2>Second Movement</h2>
<h3>Third Movement</h3>

JavaScript:

var tl = gsap.timeline({repeat: 30, repeatDelay: 1});
tl.to("h1", {duration: 1, x: 200});
tl.to("h2", {duration: 1, x: 200, scale: 0.2});
tl.to("h3", {duration: 1, x: 200, scale: 2, y: 20});

When putting in properties, they have to be in camelCase. For example, for "font-size" you would put "fontSize". This is an example with many properties. I played around with each property trying to figure out what they do.

gsap.to("h1", 2, 
{
    scale: 0.1, 
    y: 60,
    yoyo: true, 
    repeat: -1, 
    ease: "power1.inOut",
    delay:1,
    stagger: 
    {
      amount: 1.5, 
      grid: "auto",
      from: "center"
    }
 });

This makes the text yoyo back and forth from the top left towards the bottom right of the screen

• gsap.to("h1", 2 : The 2 is the duration. Apparently, you don't need to specify "duration" here.
• scale: 0.1 : The scale is the size of the text.
• yoyo: true : When I made yoyo false, the text did not move back to where it initially started.
• repeat: -1 : This makes the movement repeat infinitely. I made repeat a positive 1, and the movement only repeated one time.
• ease: "power1.inOut" : The ease is the style of the movement. There are different options like elastic, bounce, and sine. There is a visual display if you scroll down to the "Easing" section of how each ease works with a graph of how fast the movement is for each.
• delay:1 : Delay is how long until the movement starts.
• stagger : The amount of stagger is how long the text stays at that point in between each yoyo. I'm not entirely sure what the "grid" and "from" do at this point.

Here is the code I made for a color changing background gif I wanted to use as the header image for this post. I published it, and instead of the colors fading, the colors were shattering so I replaced it with just an image.

CSS:
background-color: #F8D6FF;

JavaScript:

ar tl = gsap.timeline({repeat: 3});

tl.to("h1", 
{
  duration: 1, 
  backgroundColor: "#F8D6FF"
});

tl.to("h1", 
{
  duration: 2,
  backgroundColor: "#D8C3E8"
});

tl.to("h1", 
{
  duration: 2,
  backgroundColor: "#E9E1FE"
});

tl.to("h1", 
{
  duration: 2,
  backgroundColor: "#C3C3E8"
});

tl.to("h1", 
{
  duration: 2,
  backgroundColor: "#D6E1FF"
});

tl.to("h1", 
{
  duration: 1, 
  backgroundColor: "#F8D6FF"
});

It creates a sequence of transitions from one color to the next, starting with the original background color from the CSS file.

Looking Forward

These are the first steps to learning how to make fun visualizations. GSAP also has information on how to incorporate it in React. We will be learning that soon so I will have to take a look at that as well. I'm going to start looking into more of their recommendations on what I should know and utilizing their plugins. Eventually, I'd also like to branch out and see how to use other libraries.