Tweening

codepen practice page

Tween Methods

A tween is simply a method used to animate a property (or multiple properies) of an object over time. GSAP actually has three very descriptively named tween methods:

gsap.to(): Tweens an object from it's current state to a different state.

gsap.from(): Tweens an object from a state defined by the tween to it's current state

gsap.fromTo(): Tweens an object from a state defined in the tween to a different state.

gsap.to()

As stated above, the gsap.to() method allows you to animate an object from its current state to a new state over a specified duration. Let's start with an example. In the HTML section of our practice codepen page you'll see three circles, each with a different id and a class of ball.

In the JS section let's create variables for the three circles:

In order to animate an element you'll need to change one or more of it's presentation attributes using the following syntax:

gsap.to(<object>, {
    attr: {
      <property>: <value>,
      <property>: <value>,
      ...
    },
    // other animation properties
  });

The attr object can be used to animte valid svg presentation attribue. Let's say we want to move the red ball horizontally across the screen. To do so we'll need to tween the cx value like so:

We can animate all of the circles if we pass an array of objects instead of a single objects:

We can also animate using id and class names. Here's an example animating by id:

And even more powerfully, animating by class. The following tween will animate all of the circles, similar to the array example above:

The default duration of any tween is 0.5 seconds, but we can specify our own using the duration property. Let's set it to two seconds:

Right now the animation runs just one time, but we can change that using the repeat property and assigning a value. To get the animation to repeat infinitely, assign a value of -1.

We're not just limited to animating geometric properties. In the animation below we'll tween the fill , opacity and radius of each circle as well.

Tween properties

We can make our animation more interesting by adding special properties to our animation object. I've already shown you two - duration and repeat. Here are a few more that you'll probably use from time to time when using gsap.

duration: The duration of the animation from beginning to end

repeat: The number of times the animation repeats. A value of -1 makes the animation run indefinitely.

yoyo: This property is similar to the alternate CSS animation property, and it makes the animation run in the opposite direction every other time it repeats.

ease: This is basically the gsap version of the css timing function. You can find a number of interesting pre-defined easing functions and a visualizer for each function here.

stagger: When defining an animation for multiple objects, this property staggers the start time for each object by the designated amount.

stagger object: You'll notice that the repeat only occurs after all three of the staggered animations have completed. What if you want each ball to repeat/yoyo right away, instead of waiting for thee others? You'll need to use the stagger object, which gives you more fine-tuned control over the animation.

By using the stagger object and and defining the repeat and yoyo inside that object, you get a different result. The each property sets the delay in the start time for each sub-tween.

gsap.from()

The from method is used to animate an element from the designated state to it's current state. In the example below we're going to animate the balls from the same point. (470, 250).

gsap.fromTo()

The fromTo method is used to animate elements from one state to another.

I've created a codepen containing all the methods we just discussed. Go ahead and modify the code, and see the results!