GSAP in Bricks: a concrete example

Schermata 2022-10-13 alle 10.49.18

In this tutorial, we’re going to create a custom timeline with different popular GSAP animations and integrate it into the Bricks Builder.

Table of Contents

Introduction

We released a full GSAP introduction recently. It’s a long article with tons of “how-to” content.

Now it’s time to practice the theory! Here is a concrete example of a Hero section using one single timeline and six different popular tweens to create a pleasant and modern animation.

Requirements

Everything set and working from this article.

DOM Tree

Here is the DOM tree for reference:

Setting the data-attributes

The timeline container

The first thing we want to do is to create a new timeline on the Section element and assign a name – in our case tl1.

Let’s set the following attributes:

  • data-tl-container: true
  • data-tl-name: tl1

The tweens

We are going to set up six different animations on our inner elements. All of them will be attached to the timeline we just created with custom orders, positions, options, types, and selectors.

Let’s dive into it!

Sliding background color

The first animation is the background-color of the section going from left to right. Since all the tweens need to be children of our timeline container, I created a block element called Wrapper and will animate the inset box-shadow property.

In the style settings, I set my desired final box-shadow:

And then I added the following attributes:

  • data-tl-name: tl1
  • data-tl-tween: from
  • data-tl-tween-order: 0
  • data-tl-tween-options:
{
   "options":{
      "boxShadow":"0vw 0px 0px 0px #e5e5cb inset",
      "duration":"1.5",
      "ease":"Expo.easeInOut"
   }
}

Since we are using a from animation type, the script will set the inner box-shadow width to 0vw as an initial state and will animate the width until it reaches the final state – which in my example is 70vw. I also set a custom duration and easing.

Image Reveal

Now let’s create the image drop effect. We are going to target the Right col element and apply a custom animation on the clip-path property. The initial state of the clip-path will hide the element entirely. The final state is showing a fully visible rectangle.

Here are the attributes:

  • data-tl-name: tl1
  • data-tl-tween: fromTo
  • data-tl-tween-order: 1
  • data-tl-tween-position: <
  • data-tl-tween-options:
{
   "options":{
      "from":{
         "clipPath":"polygon(0% 0%, 100% 0%, 100% 0%, 0% 0%)"
      },
      "to":{
         "clipPath":"polygon(0% 0%, 100% 0%, 100% 100%, 0% 100%)",
         "duration":"1.5",
         "ease":"Expo.easeInOut"
      }
   }
}

Note the < as my custom position value: we are telling GSAP to start animating this tween at the same time as the previous tween – so they appear to be animated simultaneously. We also set the same duration as our previous tween, so they will start and finish at the same time.

Image Zoom Out

Let’s create a zoom-out effect on the Image element itself. To do so, we’ll set the initial state of the image to be scaled 1.5x larger than the final state. To create the parallax effect, make sure to set the overflow as hidden on the Col Right element:

Here are the attribute settings on the image element:

  • data-tl-name: tl1
  • data-tl-tween: from
  • data-tl-tween-order: 2
  • data-tl-tween-position: <
  • data-tl-tween-options:
{
   "options":{
      "scale":"1.5",
      "duration":"3.5",
      "ease":"Power4.easeOut"
   }
}

While this zoom animation will start at the same time as the tweens set earlier, the duration is more than doubled compared to the previous tweens – so it will keep rescaling the image after the first tweens’ animations are finished.

Header text reveal

This one animation is a little bit trickier than the other ones, so hang on tied!

What we want to accomplish here is to apply a stagger animation to each letter of our header text. To do that, we’ll need to enqueue a small library called Splitting.js that will wrap each letter into a span container which will also include a .char class that we’ll easily be able to target for our animations.

So, first of all, download the library here and enqueue the splitting-lite.min.js file to your page. Then add the following JavaScript code:

window.addEventListener('DOMContentLoaded', () => {
   const splitChars = document.querySelectorAll('.split-chars');
   splitChars.forEach(target => Splitting({target: target}));
})

and the following CSS:

.split-chars .word {
   display: inline-block;
   line-height: 1em;
   overflow: hidden;
}

.split-chars .char {
   display: inline-block;
}

Important note: both the library and the JS scripts above need to be run before the GSAP JavaScript Helper script.

Now, the splitting script will run on all the elements of our page that contain the class .split-chars.

Let’s add that class to our header element:

Note that we also added an .header class. That will be useful to apply different animations to the characters of the header and the basic text.

Let’s have a look at the generated DOM:

Great! Now we are ready to target the single letters as our custom selectors. Here are the attribute settings applied on the Header element:

  • data-tl-name: tl1
  • data-tl-tween: fromTo
  • data-tl-tween-order: 3
  • data-tl-tween-position: > -2.8
  • data-tl-tween-selector: .header.split-chars .char
  • data-tl-tween-options:
{
   "options":{
      "from":{
         "yPercent":"100"
      },
      "to":{
         "yPercent":"0",
         "stagger":"0.02"
      }
   }
}

Basically, we are translating each letter from bottom to top with a staggering effect of 0.02.

Did you note that the comparator sign of our position attribute is reversed compared to the previous tweens? That means that we want to start the staggering animation 2.8 seconds before the previous tween’s animation ends.

Basic Text reveal

Let’s repeat the same logic for the Basic text element, but this time without staggering effects.

Let’s add the .text and .split-chars classes to the Basic Text element:

and the following data-attributes:

  • data-tl-name: tl1
  • data-tl-tween: fromTo
  • data-tl-tween-order: 4
  • data-tl-tween-position: > -0.3
  • data-tl-tween-selector: .text.split-chars .char
  • data-tl-tween-options:
{
   "options":{
      "from":{
         "yPercent":"100"
      },
      "to":{
         "yPercent":"0",
      }
   }
}

Button slide up & background color animations

For our final animation, we’ll show an example of multiple tweens applying to the same element: We’ll first slide up the Icon List element, and then run a background animation.

To do that we’ll have to add 2 different JSON objects separated by ;

Here are the attributes settings:

  • data-tl-name: tl1
  • data-tl-tween: fromTo
  • data-tl-tween-order: 5
  • data-tl-tween-position: > -0.1
  • data-tl-tween-options:
{
   "options":{
      "from":{
         "yPercent":"40",
         "autoAlpha":"0"
      },
      "to":{
         "yPercent":"0",
         "autoAlpha":"1"
      }
   }
};{
   "options":{
      "boxShadow":"rgb(211, 211, 186) 0px 0px 0px 0px inset"
   },
   "type":"from",
   "position":"> -0.5"
}

On the first JSON object, we are animating both the translateY and autoAlpha (understand opacity) properties to create the slide-up animation.

On the second JSON object, we animate the inset box-shadow as shown in our first tween.

Conclusion

If everything is working correctly, here is the final result:

Happy tweening!

Leave the first comment