GSAP + Vue

Animation is one of the most important aspects of modern web design. It is a functional and effective way to improve user experience.

GreenSock Animation Platform (GSAP) is a powerful, robust, high-speed and lightweight JavaScript library that can be used to create performant and engaging animations.

Installation

via npm 

npm install gsap

via yarn

yarn add gsap

Usage

import into your components

import { gsap } from 'gsap';

A Tween(Similar to css keyframes), simply put, is what does all the animation work. It is a single movement in an animation caused by a change in properties.

gsap.method('element', duration, vars)
  • method: This refers to the GSAP method you'd like to Tween with.
  • element: This is the element that we want to animate. It can be a simple variable or an array if we want to animate multiple elements.
  • duration: This represents the duration of the animation, it is defined in seconds.
  • vars: This is an object with key/value pairs of different properties that we want to change over the duration. They can be CSS properties, but it's important to note that they should be written in in camelCase format. That is, padding-bottom as paddingBottom.

Methods in GSAP

Methods are used to define the start and final values of an animation.

gsap.to()

This method animates the element from their current/default values to the values specified in the object parameter (vars).

example:

  gsap.to('.block', 3, {
     x: 200,
     borderRadius: '50%',
     backgroundColor: 'orange',  
  });

gsap.from()

This method animates the element from the values specified in the object parameter (vars) to the current/default values. It acts as the reverse of the to method.

example: gsap.from('.circle', 3, { y: 200, borderRadius: '50%', backgroundColor: 'orange',
});

gsap.fromTo()

This method allows you to specify both the starting and final values. This is done by using two objects which represent these values respectively. It is a combination of both the from() and to() methods.

Example:

  gsap.fromTo('.block-circle', 3, {
      borderRadius: '8px',
      backgroundColor: 'purple',
    },
    {
      borderRadius: '50%',
      backgroundColor: 'orange',  
    }
  );

Working Examples

https://codepen.io/ToluAdegboyega/pen/wvmJYxZ

This Tutorial is a snippet from an artcle (GreenSock Animation Platform (GSAP) x Vue) published by @ToluAdegboyega_