4 July 2020

Convert bubble cannon animation from GSAP2 to GSAP3

In this article, we'll decipher the Bubble Cannon CodePen and break it down into smaller, digestible parts.

The CodePen below was created with GSAP 2 few years back, so we'll convert it into GSAP 3 codebase along the way, too. I think it's the best way to learn new syntax of GSAP 3 and take a baby step to really understand what's new!

Bubble Cannon with GSAP 2

The sequence starts when the user clicks the start button. Other than start button, the sequence is made up of four animations:

  • Lift the cannon
  • Release the bubbles
  • Fade the bubbles
  • Bring back down the cannon.

Let's start converting the start button animation.

Start button

Start button animates scale and opacity attributes of an SVG circle over the duration of 1.5 seconds.

Here's what's new with duration.

durationIn GSAP 2, duration was set as a second argument.
TweenMax.to("#gsap2", 1.5, {});
In GSAP 3, duration is set as an attribute.
gsap.to("#gsap3", { duration: 1.5 });

Below, you can see the duration in action, in both GSAP 2 and 3 to animate the start button.

GSAP 2 and 3 - Start Button

Cannon

Cannon animates its rotation property by -25 degree, and brings back to its original position. Here's how the cannon sequence plays:

  • Lift the cannon
  • Release and fade the bubbles
  • Bring back the cannon.

We will use GSAP timeline to:

  • sequence multiple tweens
  • control the order and timing of each chained tweens.
timelineIn GSAP 2, timeline was created using TimelineLite or TimelineMax for basic and advanced animation sequence respectively.
var tl = new TimelineMax();
Creating a timeline is simplified in GSAP 3, as there's only one way to go about it - using gsap.timeline().
var tl = gsap.timeline();
Learn more about GSAP 3 timeline.

The CodePen below shows the cannon tween added to the timeline.

GSAP 3 - Cannon

Staggered bubbles

Between the cannon is lifted and brought back, gradually each bubble's x and y position is updated and opacity is reduced to zero at the same time.

In GSAP, we can achieve this effect using stagger.

staggerWe used to write staggered tween with GSAP 2 using staggerTo or staggerFromTomethods.
tl.staggerFromTo("#bubbles circle", 1, {}, {}, 0.15);
Unlike GSAP 2, GSAP 3 provides a staggerattribute where you can set the stagger value in second.
tl.fromTo(
  "#bubbles circle",
  {},
  {
    stagger: 0.15,
  }
);

In the CodePen below, we're telling GSAP to release each bubble at 0.15 second interval by setting stagger: 0.15.

GSAP 3 - Bubbles

Positioning bubbles in a timeline

When we sequence tweens with timeline, they get chained one after the other - without any gap or overlap.

We can add position parameter to:

  • add gap between the two tweens or
  • create overlap between the two tweens or
  • even start two tweens at the same time.

In CodePen above, positionParam label is the position parameter that makes sure that both tweens starts at the same time.

  // Release bubbles
  .fromTo(
    "#bubbles circle",
    {},{},
    "positionParam"
  )
  // Fade bubbles
  .fromTo(
    "#bubbles circle",
    {},{},
    "positionParam"
  )

Without position parameter, all bubbles would've been emitted first, then the fade tween would've started.

Position parameter can be absolute number 1 or label positionParam and can also be relative number +=1 or label positionParam+=1. Learn more about Position parameter.

Random utility function

There's one utility feature, random(), that I think is worth mentioning here.

If you're like me, you'll always have this one utility function to find the random number between the given the range!

GSAP utility functionsWith GSAP 3, random() comes default as a utility function and it can be used in a string format to retrieve random number from a given range.
{
  y: "random(-100, -130)",
  x: "random(100, 200)"
}
There's a lot more you can do with random().Learn more about GSAP 3 utility functions.

Pause the timeline

Since we want to play an entire animation on button-click, we need to pause the timeline initially. And restart the sequence on-the-fly, when the button is clicked.

Good thing that timeline comes with special methods, such as pause() and restart(). So, after initialising the timeline, we can set pause to true as below:

let tl = gsap.timeline();
tl.paused(true);

Then, use restart() when the button is clicked, like below:

button.addEventListener("click", function (e) {
  tl.restart();
});

And finally, here's everything put together in a single pen - in GSAP 3 codebase.

Bubble Cannon with GSAP 3

Conclusion

We created this fun animation using only a handful of features, such as, timeline, stagger, position params and duration along with pause() and restart() methods.

Feel free to fork the CodePens above and tinker with random() utility function and duration attribute to examine different effects.

I hope you enjoyed reading this article. You can follow me on Twitter @KrutiePatel to get notified of new articles about Vue, Nuxt and GSAP.