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!

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.

TweenMax.to("#gsap2", 1.5, {});

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.

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.

var tl = new TimelineMax();

var tl = gsap.timeline();

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

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.

tl.staggerFromTo("#bubbles circle", 1, {}, {}, 0.15);

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.

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!

{
  y: "random(-100, -130)",
  x: "random(100, 200)"
}

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.

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.