<svg class="hidden">
  <defs>
    <path id="n-path" fill="#fff" d="M42.3 1c3.4 0 6.3 0 8.6.4 2.2.3 4.3 1 6.2 1.7C59 4 61 5.4 62.6 7c1.8 1.5 3.7 3.6 6 6.3l162 205.2c-.5-6.5-1-13-1.3-19-.3-6.3-.4-12-.4-17.5V1h69.6v341.5h-41.2c-6 0-11.3-1-15.5-2.8-4.3-2-8.4-5.3-12.3-10.3L68.7 126c.5 5.8 1 11.6 1 17.3.5 5.7.7 11 .7 16v183.2H.4V1h42z"/>
    <path id="o-path" d="M342.22 243.5c-8.52 21.26-20.5 39.74-36 55.45-15.46 15.7-34.1 28-55.9 36.92-21.8 8.9-46 13.37-72.56 13.37-26.57 0-50.8-4.46-72.68-13.37-21.88-8.9-40.6-21.22-56.15-36.92-15.56-15.7-27.6-34.2-36.1-55.45C4.3 222.24.03 199.27.03 174.57c0-24.7 4.26-47.67 12.8-68.93 8.5-21.25 20.53-39.7 36.1-55.33 15.55-15.6 34.27-27.9 56.15-36.8C126.96 4.6 151.18.18 177.76.18c26.57 0 50.75 4.5 72.56 13.48 21.8 9 40.44 21.3 55.9 36.93 15.5 15.63 27.48 34.07 36 55.33 8.52 21.25 12.78 44.15 12.78 68.7 0 24.7-4.26 47.66-12.78 68.9zm-68.34-68.93c0-16.88-2.2-32.08-6.56-45.6-4.38-13.52-10.67-24.97-18.88-34.35-8.2-9.37-18.25-16.56-30.12-21.57-11.88-5-25.4-7.5-40.56-7.5-15.32 0-28.96 2.5-40.92 7.5-11.95 5-22.03 12.2-30.24 21.57-8.2 9.38-14.5 20.83-18.87 34.35-4.38 13.52-6.57 28.72-6.57 45.6 0 17.04 2.2 32.32 6.57 45.84 4.37 13.58 10.67 25 18.87 34.4 8.2 9.38 18.3 16.53 30.24 21.45 11.96 4.94 25.6 7.4 40.92 7.4 15.16 0 28.68-2.46 40.56-7.4 11.87-4.9 21.92-12.06 30.12-21.44s14.5-20.82 18.88-34.34c4.37-13.5 6.56-28.8 6.56-45.83z"/>
    <path id="g-path" d="M209.91 285.465c8.44-1.875 16.412-4.376 23.914-7.502V226.15h-33.76c-5.002 0-8.91-1.33-11.723-3.986-2.81-2.657-4.22-6.018-4.22-10.08v-43.61h121.45V312.66c-8.75 6.41-17.85 11.92-27.31 16.53-9.45 4.61-19.53 8.4-30.24 11.37-10.7 2.97-22.11 5.16-34.23 6.566-12.11 1.407-25.12 2.11-39.03 2.11-25.01 0-48.14-4.415-69.396-13.246-21.256-8.832-39.66-21.023-55.212-36.575-15.55-15.552-27.74-33.995-36.572-55.33C4.728 222.75.315 199.58.315 174.57c0-25.476 4.22-48.882 12.66-70.217 8.44-21.335 20.513-39.74 36.22-55.213 15.71-15.473 34.7-27.508 56.97-36.105C128.44 4.44 153.33.14 180.84.14c14.224 0 27.587 1.173 40.09 3.517 12.505 2.345 24.032 5.55 34.583 9.613 10.55 4.063 20.202 8.91 28.955 14.535 8.753 5.627 16.568 11.723 23.445 18.287l-22.976 34.933c-2.188 3.283-4.806 5.862-7.854 7.737-3.048 1.876-6.37 2.814-9.964 2.814-4.69 0-9.54-1.563-14.54-4.69-6.25-3.75-12.15-6.994-17.7-9.73-5.55-2.734-11.22-4.962-17-6.68-5.78-1.72-11.88-2.97-18.29-3.752-6.41-.782-13.6-1.172-21.57-1.172-14.85 0-28.21 2.618-40.09 7.854-11.88 5.236-22 12.62-30.36 22.155-8.37 9.54-14.81 20.99-19.35 34.35-4.53 13.37-6.8 28.25-6.8 44.67 0 18.13 2.5 34.23 7.5 48.3s11.92 25.95 20.75 35.64c8.83 9.69 19.303 17.077 31.416 22.157 12.113 5.08 25.36 7.62 39.74 7.62 10.94 0 20.63-.94 29.07-2.813z"/>
  </defs>
</svg>
<div class="wrapper">
  <!-- P -->
  <div class="letter-wrapper letter-wrapper-p">
    <div class="cube cube-p">
      <div class="face top"></div>
      <div class="face left"></div>
      <div class="face front"></div>
    </div>
    <svg class="letter-p" viewBox="0 0 256 343">
      <g fill="none" fill-rule="evenodd">
        <path class="p1" d="M80 342.5H.5V1H80v341.5z" fill="#DF4959"/>
        <path class="p2" d="M76.6 228.3V1H118c24 0 44.6 2.7 62 8.4 17 5.8 31.3 13.6 42.5 23.6 11 10 19.4 21.8 24.7 35.4 5.3 13.6 8 28.3 8 44 0 17-2.8 32.8-8.2 47-5.4 14.2-13.8 26.4-25 36.6-11.3 10-25.5 18-42.8 23.7-17.3 5.8-37.7 8.6-61.3 8.6H76.3z" fill="#DF4959"/>

        <path class="phole" d="M80 168.5h41c20.8 0 35.6-5 44.7-14.7 9-10 13.6-23.6 13.6-41.3 0-7.8-1.2-15-3.5-21.3-2.4-6.5-6-12-10.7-16.6-4.5-4.6-10.5-8-18-10.6-7-2.5-15.6-3.8-26-3.8H80v108.3z" fill="#672f56"/>
        <path class="phole" d="M80 168.5h41c20.8 0 35.6-5 44.7-14.7 9-10 13.6-23.6 13.6-41.3 0-7.8-1.2-15-3.5-21.3-2.4-6.5-6-12-10.7-16.6-4.5-4.6-10.5-8-18-10.6-7-2.5-15.6-3.8-26-3.8H80v108.3z" fill="#a83956"/>
        <path class="phole" d="M80 168.5h41c20.8 0 35.6-5 44.7-14.7 9-10 13.6-23.6 13.6-41.3 0-7.8-1.2-15-3.5-21.3-2.4-6.5-6-12-10.7-16.6-4.5-4.6-10.5-8-18-10.6-7-2.5-15.6-3.8-26-3.8H80v108.3z" fill="#e14756"/>
        <path class="phole" d="M80 168.5h41c20.8 0 35.6-5 44.7-14.7 9-10 13.6-23.6 13.6-41.3 0-7.8-1.2-15-3.5-21.3-2.4-6.5-6-12-10.7-16.6-4.5-4.6-10.5-8-18-10.6-7-2.5-15.6-3.8-26-3.8H80v108.3z" fill="#f67958"/>
        <path class="phole" d="M80 168.5h41c20.8 0 35.6-5 44.7-14.7 9-10 13.6-23.6 13.6-41.3 0-7.8-1.2-15-3.5-21.3-2.4-6.5-6-12-10.7-16.6-4.5-4.6-10.5-8-18-10.6-7-2.5-15.6-3.8-26-3.8H80v108.3z" fill="#FFF"/>
      </g>
    </svg>
  </div>

  <!-- A -->
  <div class="letter-wrapper letter-wrapper-a">
    <svg class="letter-a" viewBox="0 0 173 343">
      <g>
        <path d="M173 265.8h-65l-20 59.6c-1.6 4.3-4.7 8.3-9.2 11.8-4.5 3.5-10 5.3-16.6 5.3H.2L132.6 1H173v264.8z" fill="#DF4959"/>
      </g>
    </svg>
    <svg class="letter-a-flip" viewBox="0 0 220 343">
      <g>
        <path d="M220 342.5h-61.6c-6.8 0-12.5-1.6-17-4.8-4.4-3.2-7.5-7.3-9.2-12.3L112 265.8H47V.8h40.6L220 342.6z" fill="#DF4959"/>
        <path class="triangle" d="M.4 212h93.3l-31.4-93.6-7-21c-3-8-5.6-16.8-8.2-26.2-2.3 9.6-5 18.4-7.6 26.5-2.6 8-5 15.2-7.5 21L.3 212z" fill="#a83956"/>
        <path class="triangle" d="M.4 212h93.3l-31.4-93.6-7-21c-3-8-5.6-16.8-8.2-26.2-2.3 9.6-5 18.4-7.6 26.5-2.6 8-5 15.2-7.5 21L.3 212z" fill="#e14756"/>
        <path class="triangle" d="M.4 212h93.3l-31.4-93.6-7-21c-3-8-5.6-16.8-8.2-26.2-2.3 9.6-5 18.4-7.6 26.5-2.6 8-5 15.2-7.5 21L.3 212z" fill="#f67958"/>
        <path class="triangle" d="M.4 212h93.3l-31.4-93.6-7-21c-3-8-5.6-16.8-8.2-26.2-2.3 9.6-5 18.4-7.6 26.5-2.6 8-5 15.2-7.5 21L.3 212z" fill="#FFFCFC"/>
      </g>
    </svg>
  </div>

  <!-- N -->
  <div class="letter-wrapper letter-wrapper-n">
    <svg class="letter-n" viewBox="0 0 299 343">
      <g>
        <mask id="n-mask" stroke="none">
          <use xlink:href="#n-path"/>
        </mask>
        <use xlink:href="#n-path"/>
        <circle fill="#a83956" mask="url(#n-mask)" cx="1" cy="342" r="459"/>
        <circle fill="#e14756" mask="url(#n-mask)" cx="1" cy="342" r="459"/>
        <circle fill="#f67958" mask="url(#n-mask)" cx="1" cy="342" r="459"/>
        <circle fill="#DF4959" mask="url(#n-mask)" cx="1" cy="342" r="459"/>
      </g>
    </svg>
  </div>

  <!-- G -->
  <div class="letter-wrapper letter-wrapper-g">
    <div class="ball"></div>
    <svg class="letter-g" viewBox="0 0 308 350">
      <g fill="none" fill-rule="evenodd">
        <mask id="g-mask" fill="#fff">
          <use xlink:href="#g-path"/>
        </mask>
        <use xlink:href="#g-path"/>
        <circle fill="#DF4959" mask="url(#g-mask)" cx="157" cy="0" r="210"/>
      </g>
    </svg>
  </div>

  <!-- O -->
  <div class="letter-wrapper letter-wrapper-o">
    <svg class="letter-o" viewBox="0 0 355 350">
      <g fill="none" fill-rule="evenodd">
        <mask id="o-scale-mask" fill="#fff">
          <use xlink:href="#o-path"/>
        </mask>
        <use xlink:href="#o-path"/>
        <circle fill="#DF4959" r="200" cx="0" cy="0" mask="url(#o-scale-mask)"/>
      </g>
    </svg>
    <svg class="letter-o-path" viewBox="0 0 355 350"><use fill="none" xlink:href="#o-path"/></svg>
  </div>
</div>
html, body {
  display: flex;
  height: 100vh;
  width: 100vw;
  flex-direction: column;
}
html, body, .wrapper {
  transform-style: preserve-3d;
}
.wrapper {
  margin: auto;
  height: 8rem;
  transform: translateZ(100px);
}
svg {
  height: 100%;
  overflow: visible;
}
[class^="letter-"] {
  float: left;
}
.letter-wrapper {
  margin-bottom: 1rem;
  height: 100%;
  position: relative;
  &-a {
    perspective: 400px;
  }
  &-g {
    margin-left: 1rem;
  }
  &-o {
    margin-left: .8rem;
    perspective: 400px;
    transform-style: preserve-3d;
  }
}
.letter {
  &-n {
    margin-left: .74rem;
  }
  &-a {
    margin-left: -.7rem;
    &-flip {
      margin-left: -1.2rem;
      .triangle {
        will-change: transform;
      }
    }
  }
  &-o {
    position: relative;
    &, & ~ svg {
      stroke-dashoffset: -1320;
      stroke-dasharray: 1320;
      path {
        fill: none;
      }
      use {
        transform: scale(.98) translateY(2px) translateX(2px);
      }
    }
    &-path {
      position: absolute;
      left: 0;
      width: 100%;
      height: 100%;
    }
  }
}

.cube {
  opacity: 0;
  width: 2rem;
  height: 2rem;
  position: absolute;
  background: #672f56;
  will-change: transform;
  transform: rotateX(60deg) rotateZ(0deg);
  transform-style: preserve-3d;
  .face {
    width: 100%;
    height: 100%;
    position: absolute;
    left: 0;
    top: 0;
    &.top {
      transform: translateZ(2rem);
      background: #a83956;
    }
    &.left {
      transform: rotateY(-90deg);
      transform-origin: 0 50%;
      background: #e14756;
    }
    &.front {
      transform: rotateX(-90deg);
      transform-origin: 50% 100%;
      background: #f67958;
    }
  }
  &-p {
    margin-left: -2px;
  }
}

.ball {
  width: 1rem;
  height: 1rem;
  background: #e14756;
  border-radius: 50%;
  position: absolute;
  will-change: transform;
  bottom: 0;
  left: 0;
  right: 0;
  margin: auto;
}

.hidden {
  display: none;
}

.wrapper {
  margin-top: auto;
}
const letterP = document.querySelector('.letter-p')
const p1      = letterP.querySelector('.p1')
const p2      = letterP.querySelector('.p2')
const phole   = letterP.querySelectorAll('.phole')
const cubeP   = document.querySelectorAll('.cube-p')

const letterA     = document.querySelector('.letter-a')
const letterAFlip = document.querySelector('.letter-a-flip')
const triangle    = letterAFlip.querySelectorAll('.triangle')

const letterN = document.querySelector('.letter-n')
const circleN = letterN.querySelectorAll('circle')

const letterG = document.querySelector('.letter-g')
const ball    = document.querySelector('.letter-wrapper-g .ball')
const circleG = letterG.querySelector('circle')

const wrapperO = document.querySelector('.letter-wrapper-o')
const letterO  = document.querySelector('.letter-o')
const pathO    = document.querySelector('.letter-o-path')
const circleO  = wrapperO.querySelector('circle')

function resetProps(timeline) {
  timeline.set(p1, { scaleY: 0 })
    .set(p2, { scaleX: 0 })
    .set(phole, { scaleX: 0 })
    .set(letterA, {
      rotationY: '90deg',
      transformOrigin: '100% 50%',
      opacity: 0
    })
    .set(letterAFlip, {
      rotationY: '-90deg',
      transformOrigin: '0 50%',
      opacity: 0
    })
    .set(triangle, {
      transformOrigin: '50% 100%',
      scaleY: 0
    })
    .set(circleN, { attr: { r: 0 } })
    .set(cubeP, { y: 112, scaleZ: 0, opacity: 0 })
    .set(letterG, { opacity: 1 })
    .set(circleG, { attr: { r: 0 } })
    .set(letterO, { opacity: 0 })
    .set(pathO, { opacity: 0 })
    .set(wrapperO, { rotationY: 30, rotationX: 30, opacity: 0 })
    .set(circleO, { attr: { r: 0 } })
    .set(ball, { y: 0, scale: 0 })
}

function animateP(timeline, delay = 0) {
  timeline.to(p2, 1, {
      scaleX: 1,
      ease: 'Power4.easeOut'
    }, 1.1 + delay)
    .to(cubeP, .2, { opacity: 1 }, delay)
    .to(cubeP, 1, {
      y: -20,
      scaleZ: 1,
      ease: 'Expo.easeOut'
    }, delay)
    .to(cubeP, 1.4, {
      rotationX: '90deg',
      rotationY: '90deg',
      rotationZ: '0',
      ease: 'Power4.easeOut'
    }, .1 + delay)
    .to(cubeP, .4, {
      y: 112,
      ease: 'Power4.easeIn'
    }, .3 + delay)
    .to(cubeP, .2, {
      scaleZ: .4,
      ease: 'Back.easeIn'
    }, .52 + delay)
    .to(cubeP, 1, {
      scaleZ: 3.988,
      ease: 'Elastic.easeOut'
    }, .7 + delay)

  for (let i = 0; i < phole.length; ++i) {
    timeline.to(phole[i], 1, {
      scaleX: 1,
      ease: 'Power4.easeOut'
    }, i * 2 / 10 + 1.2)
  }
}

function animateA(timeline, delay = 0) {
  timeline.to(letterA, 2, {
      rotationY: '0',
      ease: 'Elastic.easeOut'
    }, .2 + delay)
    .to(letterAFlip, 2, {
      rotationY: '0',
      ease: 'Elastic.easeOut'
    }, .7 + delay)
    .to(letterA, .1, {opacity: 1}, .2 + delay)
    .to(letterAFlip, .1, {opacity: 1}, .7 + delay)

  for (let i = 0; i < triangle.length; ++i) {
    timeline.to(triangle[i], .4, {
      scaleY: 1,
      ease: 'Power4.easeOut'
    }, i * 2 / 10 + .8 + delay)
  }
}

function animateN(timeline, delay = 0) {
  for (let i = 0; i < circleN.length; ++i) {
    timeline.to(circleN[i], 1.4, {
      attr: { r: 459 },
      ease: 'Power4.easeOut'
    }, i * 2 / 10 + .5 + delay)
  }
}

function animateG(timeline, delay = 0) {
  timeline
    .to(ball, .5, {
      y: -170,
      scale: 1.5,
      ease: 'Power2.easeOut'
    }, .2 + delay)
    .to(ball, .4, {
      y: -110,
      scale: 1,
      ease: 'Power2.easeIn'
    }, .6 + delay)
    .to(circleG, .4, {
      attr: { r: 352 },
      ease: 'Power4.easeOut'
    }, 1 + delay)
}

function animateO(timeline, delay = 0) {
  timeline
    .to(wrapperO, .8, {
      rotationY: 45,
      opacity: 1
    }, 0 + delay)
    .to(wrapperO, 3, {
      rotationY: 0,
      ease: 'Elastic.easeOut'
    }, .8 + delay)
    .to(wrapperO, 3, {
      rotationX: 0,
      ease: 'Elastic.easeOut'
    }, .9 + delay)
    .to(letterO, 1, {
      opacity: 1,
      strokeDashoffset: 0,
      strokeWidth: 5,
      stroke: '#DF4959'
    }, .4 + delay)
    .to(pathO, 1, {
      opacity: 1,
      z: -30,
      strokeDashoffset: 0,
      strokeWidth: 5,
      stroke: '#2F4550'
    }, .2 + delay)
    .to(pathO, 1, {
      opacity: 1,
      z: 0,
      strokeWidth: 0
    }, 1.2 + delay)
    .to(circleO, 1, {
      attr: { r: 430 },
      ease: 'Power4.easeOut'
    }, 1.2 + delay)
}

function init() {
  const tl = new TimelineMax()

  resetProps(tl)
  animateP(tl, 0)
  animateA(tl, 0)
  animateN(tl, 0)
  animateG(tl, 0)
  animateO(tl, 0)
  
  // .2 for slowmo!
  tl.timeScale(1)
}

init()
View Compiled

External CSS

  1. https://cdnjs.cloudflare.com/ajax/libs/sanitize.css/2.0.0/sanitize.min.css

External JavaScript

  1. https://cdnjs.cloudflare.com/ajax/libs/gsap/1.18.2/TweenMax.min.js