GSAP's Bread and Butter, from(), to(), and fromTo() Animations

If you're getting started with GSAP, the first thing you'll want to wrap your head around are simple tweens, which come in the form of the from(), to(), and fromTo() methods.

These methods live on the GSAP object, and take two parameters, targets (typescript type TweenTarget) and vars (typescript type TweenVars).

  1. targets: This specifies the things that you want to animate, and is very flexible with what you give it. You can pass a CSS selector like '.class-name', an id like '#id-name', direct references, or even an array of references. GSAP uses document.querySelectorAll() under the hood, so if you pass it a target of classname '.box', everything on your page with that class name will be targeted by the tween. If you need to be more specific about your target, consider using an id or attribute over a class name.
  2. vars: This parameter is an object which contains all of the properties you want to animate, such as {borderRadius: 5, height: 0, color: white}. It also takes special properties like duration, delay, ease, and onComplete.

Out in the wild, a from tween might look something like this:

See the Pen GSAP Timeline Simple Example by Web Bae (@webisbae) on CodePen.

Let's examine what's going on with this code:

  • We get access to the gsap object when we import the library. The from() method is called with gsap.from(), which animates an element from a set of starting properties to its current properties (i.e. how you styled it in Webflow) using an easing function. In this case, it will animate all elements with the class "bread".
  • ".bread" is the CSS selector (a class name in this case) for the target element(s).
  • The object literal {} contains the animation properties and values.
  • opacity: 0 sets the initial opacity of the element to 0, making it invisible.
  • y: 200 tells gsap that we want to animate our loaf of bread FROM a position 200px down to its original position.
  • duration: 1 specifies the duration of the animation in seconds.
  • ease: "power3.out" sets the easing function to "power3.out", which is a cubic easing function that starts slow and accelerates towards the end of the animation.
  • repeat: -1 sets the animation to repeat indefinitely. Good for you, the viewer, to see the animation repeat in this example.
  • repeatDelay: 1 specifies the delay between each repetition of the animation, in seconds.

Overall, this code animates all elements with the class "bread" by gradually increasing their opacity FROM 0 to 1, and moving them FROM a position 200 pixels down the Y-axis over a duration of 1 second. The animation will repeat indefinitely with a delay of 1 second between each repetition, using a cubic easing function that starts slow and accelerates towards the end.

Go the other way with gsap.to()

What happens if we simply change from() to to() and swap out bread for some butter?

See the Pen Simple GSAP from() by Web Bae (@webisbae) on CodePen.

With one little change, we've essentially reversed our animation - we have complete control but are working in the opposite DIRECTION. Rather than animating from our specified options, we are animating TO these same options. GSAP takes the starting position to be the elements original setup as specified by our HTML and CSS (or how we styled it in Webflow), and uses Javascript to tween it TO a new final position.

A Tween is what does all the animation work - think of it like a high-performance property setter. You feed in targets (the objects you want to animate), a duration, and any properties you want to animate and when its playhead moves to a new position, it figures out what the property values should be at that point applies them accordingly. - GSAP Docs

Total Control with fromTo()

We can combine the powers of from() and to() to give total control of our start and end positions using fromTo(). When we do this, we steal the element away from its position specified by our HTML and CSS (Webflow styled position) and take total control with gsap (Javascript). However, our positions are still RELATIVE to where we left our element by default (i.e. 0px refers to its default point, not an absolute 0px position on screen). GSAP has the steering wheel now and we're making pancakes animate!

See the Pen Simple GSAP fromTo() by Web Bae (@webisbae) on CodePen.

Here's a rundown of the code. You'll notice we have two vars objects as parameters now - one for the from position and one for the to position.

  • gsap.fromTo() is a method that animates an element from a set of starting properties to a set of ending properties using an easing function. In this case, it will animate all elements with the class "pancakes".
  • ".pancakes" is the CSS selector for the target element(s).
  • The first object literal {} contains the starting animation properties and values, which include opacity: 0 (initial opacity set to 0), x: 0 (initial X position set to 0), and y: 200 (initial Y position set to 200 pixels down the Y axis).
  • The second object literal {} contains the ending animation properties and values, which include opacity: 1 (final opacity set to 1), x: 200 (final X position set to 200 pixels), and y: 0 (final Y position set to 0 pixels).
  • duration: 1 specifies the duration of the animation in seconds.
  • ease: "power3.out" sets the easing function to "power3.out", which is a cubic easing function that starts slow and accelerates towards the end of the animation.
  • repeat: -1 sets the animation to repeat indefinitely.
  • repeatDelay: 1 specifies the delay between each repetition of the animation, in seconds.

Overall, this code will animate all elements with the class "pancakes" by gradually increasing their opacity from 0 to 1, and moving them from their initial position at x: 0 and y: 200 to their final position at x: 200 and y: 0 over a duration of 1 second. The animation will repeat indefinitely with a delay of 1 second between each repetition, using a cubic easing function that starts slow and accelerates towards the end.

Tweens as variables

GSAP is object-oriented, and we can store our tween in a variable. Tweens have their own set of methods we can call, including:

  • tween.pause()
  • tween.seek(0.5)
  • tween.progress(0.2)
  • tween.play()

See the Pen Simple GSAP fromTo() by Web Bae (@webisbae) on CodePen.

Tween.pause()

The pause() method pauses the animation. Simple enough? You might want to pause your animation when a user performs some action on your page, like clicking a button.

Tween.seek()

The seek() method in GSAP v3 is used to change the current time of a tween to a specific point in time, specified as a decimal value between 0 and 1, representing a percentage of the tween's duration.

In the case of the code tween.seek(0.5), it seeks the tween to the halfway point of its duration. So, if the tween had a duration of 2 seconds, calling seek(0.5) would set the tween's time to 1 second.

This means that the tween will skip to the specified time and immediately animate the element(s) to their corresponding positions at that point in the tween. Any animations that should have happened before the seek point will be skipped, and any animations that should have happened after the seek point will be played as if they were starting from that point.

In summary, tween.seek(0.5) sets the time of a GSAP tween to halfway through its duration, causing the tween to immediately animate the element(s) to their corresponding positions at that point in the tween.

Tween.progress()

The progress() method in GSAP v3 is used to set the progress of a tween to a specific point in its animation, represented as a decimal value between 0 and 1.

In the case of the code tween.progress(0.2), it sets the progress of the tween to 20%, which means that the tween will play from its start position up to the 20% mark, and any animations that should have happened after that point will be skipped.

This method is different from the seek() method in that it only affects the progress of the tween, not the actual time of the tween. So, if the tween had a duration of 2 seconds, calling progress(0.2) would set the tween's progress to 20%, but the time of the tween would still be at the beginning (i.e., time 0).

In summary, tween.progress(0.2) sets the progress of a GSAP tween to 20%, causing the tween to play up to that point and skip any animations that should have happened after that point.

Tween.play()

Plays the tween! Enough said.

Do I Need to Store Tweens as Variables?

To simply fire off animations and let them run, there's no need to use variables. Tweens play immediately by default (though you can set a delay or paused value) and when they finish, they automatically dispose of themselves. Call gsap.from() as much as you want without worrying about cleanup. - GSAP Docs

Since tweens fire automatically once the code runs, you should be careful if your tweens aren't above the fold and don't repeat! You'll want to trigger them so that the user can actually see your carefully crafted masterpiece. And in walks ScrollTrigger...

Wrapping up

GSAP is an incredibly powerful Javascript (and Typescript) animation library, and the first step in putting it to use is understanding its bread and butter: tweens. GSAP's from(), to(), and fromTo() are the most common ways to define tweens, so start there. Once you have a strong handle on these, you're not far away from create fancy timeline animations and scroll-based adventures!

‍