Amazing Animation Techniques with GSAP

greensockweb animation


Split text from phrase to animate character individually

const mySplitText = new SplitText("#quote", {type:"words,chars"}),
//an array of all the divs that wrap each character
const chars = mySplitText.chars;

Add data-splitting to element

<div data-splitting>ABC</div>

Cylinder Rotation Effect

.element {
  /* make the center of origin behind the characters */
  transform-origin: center center -100px;
  /* comment this out to see the back of the letters */
  backface-visibility: hidden;
  animation: rotate 5s linear infinite;
@keyframes rotate {
  from {
    transform: rotateX(0deg);
  to {
    transform: rotateX(360deg);

Create custom easing function using GreenSock Ease Visualiser

Infinite looping

  • use linear ease
  • animate until the ending point is the same as starting point, then restart the animation

Masking using svg mask

    <mask id="jm-mask">
      <path d="..." />
  <rect class="stage" width="716" height="1020" fill="red" mask="url(#jm-mask)"/>