GreenSock: Staggered Animations & Animating SVG

Topics covered in this JavaScript tutorial:

Animating SVG, Transform Origin, Stagger: Animating Multiple Elements from a Single Tween

Exercise Preview

Exercise Overview

In this exercise, you’ll learn how to animate SVG (Scalable Vector Graphics) and how to use GSAP’s amazing stagger property to create awesome animations with very little code.

Getting Started

1. For this exercise we’ll be working with the GSAP-SVG-Stagger folder located in Desktop > Class Files > JavaScript Class. Open that folder in your code editor if it allows you to (like Visual Studio Code does).
2. In your code editor, open svg-stagger.html from the GSAP-SVG-Stagger folder.

3. Preview svg-stagger.html in a browser.

   This is the same Noble Desktop logo you’ve see in the previous exercises, but the HTML is set up differently so we can animate the individual elements within the logo, rather than only the logo as a whole.

4. Back in your code editor, let’s get acquainted with the HTML. Notice the following:

   • Instead of an img tag like we used in the previous exercises, we copied and pasted all the SVG code from the .svg file into our HTML. This will allow us to refer to specific parts of it!

     FYI, we did not write this SVG code. It was generated by our design app (Adobe Illustrator, Figma, Adobe XD, Sketch, etc.)

   • In the SVG you’ll see <g> tags, which stands for group. They were created and named in our design app which turned them into IDs when exporting the SVG.

   • Notice the various IDs and nested structure of the groups inside the SVG logo:

     — noble-desktop
          noble (the letters of the word “noble”)
          desktop (the letters of the word “desktop”)

     — n-background (the rounded black rectangle behind the colored n)
     — n (the colored n)

Creating a Timeline & Fixing a Display Issue

1. We’ve already linked this file to the GSAP .js file, so in the script tag at the bottom of the file, add the following bold code to instantiate a new timeline:

   <script>
      let tl = gsap.timeline();
   </script>
   

2. Before we animate, we must see a problem where the SVG elements will be cropped if they go outside the SVG element. To see this, let’s move something with GSAP. To instantly set a property (without animating it), we can use .set (instead of .from and .to that we used before). This does not have a duration as it happens instantly.

   Add the following bold code to move the entire word group a bit to the right:

   <script>
      let tl = gsap.timeline();
      tl.set('#noble-desktop', {x:50})
   </script>
   

3. Save and reload the page in the browser.

   Notice the right side of desktop is being cut off because it’s protruding beyond the boundaries of the SVG container. Luckily we can fix this easily with CSS.

4. Back in your code editor, from the css folder open main.css

5. In the #logo rule, add the following bold code:

   #logo {
      overflow: visible;
      width: 100%;
      max-width: 700px;
      height: auto;
   }
   

6. Save and reload the page in the browser.

   Now you should be able to see the entire logo, even the part that sticks out of the SVG container.

7. Switch to svg-stagger.html in your code editor and replace the .set line of code with the tween shown below in bold:

   <script>
      let tl = gsap.timeline();
      tl
      .from('#noble-desktop', {duration:.4, scale:0, x:-5})
   </script>
   

8. Save and reload the page in the browser.

   The words are being scaled up (and moved over slightly from left to right).

   We don’t like how the scaling is being done from the top (of the left side). It would look better if they were scaled from the vertical center (of the left side).

Transform Origin

1. In your code editor, add the following bold property and don’t miss the comma!

   .from('#noble-desktop', {duration:.4, scale:0, transformOrigin:'left center', x:-5})
   

   NOTE: transformOrigin also accepts percent and pixel values, so these both work:
   transformOrigin:'0% 50%'
transformOrigin:'left center'

2. Save and reload the page in the browser.

   That looks better with it scaling up from the vertical center (of the left side).

Stagger: Animating Multiple Elements from a Single Tween

The g tag in SVG stands for group. Inside the noble-desktop group we have 2 groups: noble and desktop (each group contains together the letters for that word). Let’s animate those 2 groups instead of the entire Noble Desktop.

We’ll use the CSS selector for direct descendant > to target only the groups directly inside noble-desktop (so it doesn’t target groups within those groups).

1. Back in your code editor, add > g as shown below in bold:

   .from('#noble-desktop > g', {duration:.4, scale:0, transformOrigin:'left center', x:-5})
   

2. Save and reload the page in the browser.

   Notice how both of the words animate at the same time. While that’s interesting, we want the words to animated one after the other.

   Instead of making two different animations in our timeline as we did in the previous exercise, because these will always be the same animations applied to multiple elements sequentially, we can use a stagger.

3. In your code editor, add the following bold code for the stagger property (again don’t miss the comma):

   .from('#noble-desktop > g', {duration:.4, scale:0, stagger:1, transformOrigin:'left center', x:-5})
   

4. Save and reload the page in the browser.

   • The first word animates, there’s a 1 second delay (from the stagger), and then the second work animates.
   • That’s cool, but it will be even more impressive when we animation each letter one at a time!

5. In your code editor, reduce the stagger amount to a very short 0.03 seconds:

   .from('#noble-desktop > g', {duration:.4, scale:0, stagger:0.03, transformOrigin:'left center', x:-5})
   

6. Change > g to * so GSAP targets any element inside the noble-desktop group (* is a wildcard that means anything):

   .from('#noble-desktop *', {duration:.4, scale:0, stagger:0.03, transformOrigin:'left center', x:-5})
   

7. Save and reload the page in the browser.

   Each letter animates the same way, but with a slight delay between the animations creating a wave of animated letters. Now that’s sweeet!

8. To finish this tween, in your code editor add a back ease (don’t miss the comma!):

   .from('#noble-desktop *', {duration:.4, scale:0, stagger:0.03, transformOrigin:'left center', x:-5, ease:'back.out'})
   

   NOTE: The stagger property can be used on any element, not just SVG like we’re working with in this example.

9. Save and reload the page in the browser.

   Easing is a simple way to change the feeling of an animation. This really adds some bubbliness to it.

Repeating the Animation

Let’s make the animation repeat forever, with a slight delay between repeats so you can appreciate the logo for a little while after the animation finishes.

1. Inside the gsap.timeline() method, add the following bold code:

   let tl = gsap.timeline( {repeat:-1, repeatDelay:1} );
   

2. Save and reload the page in the browser.

   The animation should now repeat indefinitely.

Animating the Rest of the Logo

The n icon of the logo needs to be animated.

1. Let’s start by scaling up the black rectangle background. Below the first tween, add a second shown below in bold:

   .from('#noble-desktop *', {duration:.4, scale:0, stagger:0.03, transformOrigin:'left center', x:-5, ease:'back.out'})
   .from('#n-background', {duration:.3, scale:0, transformOrigin:'right center', ease:'back.out'})
   

2. Save and reload the page in the browser.

   • Ignore the colored part of the n for now, we’ll animate that next.
   • Notice the rounded black rectangle (behind the n) now animates after noble desktop.

3. All that’s left is the colored parts of the n. We’ll use a stagger so they appear one after the other. Below the last tween, add another as shown below in bold:

   .from('#noble-desktop *', {duration:.4, scale:0, stagger:0.03, transformOrigin:'left center', x:-5, ease:'back.out'})
   .from('#n-background', {duration:.3, scale:0, transformOrigin:'right center', ease:'back.out'})
   .from('#n *', {duration:.2, scale:0, transformOrigin: 'center center', stagger:0.03, ease:'back.out'})
   

4. Save and reload the page in the browser.

   The logo animation is now done.

   The colored parts of the n should appear sequentially in a quick animation. Isn’t it amazing you can do that part with just one line of GSAP code? And the entire logo animation is only a few lines of code. GSAP is indeed very powerful.

Optional Bonus: Finessing Timing with a Position Parameter

Even though the black rectangle background animates immediately after the noble desktop letters are done, it still feels slow. Let’s start the black rectangle animation slightly earlier.

1. Add a position parameter that makes the black rectangle (n-background) start a little earlier using a relative value as shown below in bold. Again do not miss that comma!

   .from('#n-background', {duration:.3, scale:0, transformOrigin:'right center', ease:'back.out'}, '-=0.3')
   

2. Save and reload the page in the browser.

   It’s subtle, but nicer with the faster timing. Having the animations slightly overlap can be a nice way to speed up your animations and make them more fluid.