Creating dynamic web animations with gsap

Introduction to GSAP3.0

This article covers the basics of creating stunning web design animation using gsap. At the end of this article, readers should be able to implement simple animations to UI elements using gsap.
GreenSock Animation Platform (GSAP) is a powerful JavaScript library that allows developers to implement cool and fun animations in their web designs.
It is a general web design rule to keep the web page as simple as possible while not compromising website efficiency. This is to give users a great user experience while exploring web pages. The use of animations in web design overrides this rule however, it has proved to add to a great user experience rather than complicate it.
Scientific study reveals that visuals are processed 60,000 times faster in the brain than texts. This underscores that one of the easiest ways to ensure web users are immersed in the individual UI elements is to pair concepts with meaningful visuals.

Prerequisite

• Basic understanding of HTML

• Basic understanding of CSS

Getting started with GSAP

Install GSAP to create fun animations. Installing GSAP unlocks a powerful set of tools for creating advanced animations and interactive experiences on the web. There are a few ways to install GSAP:

• npm

• Yarn

• and a simple script tag.
  Check installation guides on the GSAPofficial documentation.

GSAP methods

GSAP uses several methods. However, there are two important methods developers should get familiar with.

gsap.to()

The gsap.to() method is the most common method for creating animation in GSAP because it allows you to define the destination values (and most coders think to animate to certain values).
This method takes two parameters, the first is the target(UI element) you want to animate. This can be selector texts such as “.class”, “#id”, etc. The second parameter is the variable, an object containing all the values you want to animate. Common properties include delay, duration, opacity, position on either the x or y-axis, ease, stagger, etc.

    <script>
        gsap.to(".box", {
            x:500, //specifies the value to which the box UI animates on the horizontal axis
            duration:1, // specifies the time taken for the animation to be complete.
        })
    </script>

This code animates the UI element with the class name of ‘box’ with properties such as its position on the x-axis and the duration of the animation.

gsap.from()

Just as with the gsap.to method, gsap.from is a common method for creating animations. It differs from the to() method in that it allows you to define where the values start and then animate to the current state. This method is perfect for animating objects onto the screen.

    <script>
        gsap.from(".box", {
            y:-200, //specifies the value to which the box UI animates on the vertical axis
            duration:1,
        })
    </script>

Below is a code snippet from my portfolio highlighting how each UI element is animated. I used the gsap.from() method in the majority of the animations, passing in the target, and properties.

    <script>
        gsap.from("#span",{
            opacity:0,
            x: -20,
            ease: Expo.easeInOut
        })

        gsap.from("nav ul li", {
                opacity: 0,
                x: -20,
                delay:0.4,
                ease: Power3.easeInOut
            })

        gsap.from(".hero span", {
                opacity: 0,
                duration:0.4,
                y: -50,
                delay:0.4,
                ease: Power3.easeInOut
            })
        gsap.from(".hero h1", {
                opacity: 0,
                duration:0.4,
                y: -60,
                delay:0.5,
                ease: Power3.easeInOut
            })
        gsap.from(".hero p", {
                opacity: 0,
                duration:0.4,
                y: -60,
                delay:0.6,
                ease: Power3.easeInOut
            })
        gsap.from(".hero button", {
                opacity: 0,
                duration:0.4,
                x: -10,
                delay:0.6,
                ease: Power3.easeInOut
            })
        gsap.from(".hero img",{
                opacity: 0,
                duration:0.4,
                y: -60,
                delay:0.8,
                ease: Power2.easeInOut
            })
        gsap.from(".featured--heading",{
                opacity: 0,
                x: -100,
                delay:0.9,
                ease: Power3.easeInOut
            })
        gsap.from(".featured--para",{
                opacity: 0,
                x: -100,
                delay:0.9,
                ease: Power3.easeInOut
            })
        gsap.from(".project--card div",{
                scrollTrigger:".project--card div",
                duration:1,
                opacity: 0,
                y: -60,
                delay:1,
                ease: Power3.easeInOut
            })
        gsap.from(".collabo",{
                scrollTrigger:".collabo",
                opacity: 0,
                duration:0.4,
                y: -60,
                delay:1.1,
                ease: Power3.easeInOut
            })
    </script>

Conclusion

In this article, we have just scratched the surface of the actual capabilities of GSAP, I encourage you to read the GSAP documentation, dedicate ample time to practice, and have fun creating jaw-dropping animations that astonish your audience.