Motion logo

This could be used to showcase a logo with an entrance animation

In order to achieve it you will find below the various codes to be used. Despite using Bricks builder, I tried to list up all the necessary steps to complete the animation to be the most universal as much as possible. Therefore I am close to what you will find in any IDE. For Bricks builder, please follow the HTML/CSS structure so you can add-up divs and give them CSS instead of putting it into the code element in order to avoid FOUC as the code element is loaded lastly within the page priority list.

For CSS, please note that I am considering that you are using a builder hence: no margin/padding reset has been applied and the font is not defined.

First let’s load GSAP and ScrollTrigger if necessary:

<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.10.3/gsap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.10.3/ScrollTrigger.min.js"></script>

HTML:

<div class="mls-section">
  <div class="mls-ctn">
    <img class="mls-logo" src="pictures/logo-vector-white.svg" />
    <span class="mls-under"></span>
  </div>
</div>

CSS:

:root {
  --primary-rtg: #202020;
  --secondary-rtg: #9b6bf7;
}
.mls-section {
  display: flex;
  flex-direction: row;
  align-items: flex-start;
  background-color: var(--primary-rtg);
  justify-content: center;
  height: 100vh;
  width: 100%;
}
.mls-ctn {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  height: 100%;
  width: 100%;
}
.mls-logo {
  width: 50%;
  height: auto;
  transform: scale(5) rotate(100deg);
  opacity: 0;
  transform-origin: 0 50%;
  margin-bottom:200px;
}
.mls-under {
  width: 0%;
  height: 10px;
  background-color: var(--secondary-rtg);
  border-radius: 50px;
  opacity: 0;
}

JavaScript:

document.addEventListener("DOMContentLoaded", function (event) {
  //gsap.registerPlugin(ScrollTrigger);

  const ml = gsap.timeline({
    //scrollTrigger: ".mls-ctn",
  });
  ml.to(".mls-logo", {
    rotation: 0,
    opacity: 1,
    scale: 1,
    duration: 1.5,
    ease: "linear",
  });
  ml.to(".mls-under", {
    width: "33%",
    opacity: 1,
    duration: 1,
  });
  ml.to(".mls-logo", {
    rotation: 16,
    transformOrigin: "0,0",
    ease: "bounce",
  });
  ml.to(".mls-logo", {
    rotation: 0,
    transformOrigin: "0,0",
    ease: "bounce",
    y: 200,
  });
});