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:
Let's start converting the start button animation.
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
.
duration
In 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.
Cannon animates its rotation
property by -25
degree, and brings back to its original position. Here's how the cannon sequence plays:
We will use GSAP timeline
to:
timeline
In 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
.
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.
stagger
We used to write staggered tween with GSAP 2 using staggerTo
or staggerFromTo
methods.
tl.staggerFromTo("#bubbles circle", 1, {}, {}, 0.15);
Unlike GSAP 2, GSAP 3 provides a stagger
attribute 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
.
When we sequence tweens with timeline
, they get chained one after the other - without any gap or overlap.
We can add position parameter to:
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.
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 functions
With 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.
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.
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.
© 2020 Krutie Patel