Motion screwing

These social icons could most probably improve customer experience on your website compared with basic buttons.

In order to achieve them 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 buttons to be the most universal as much as possible. Therefore I am close to what you will find in any IDE. So for Bricks I used a code-block to build-up the buttons however I tried to cover the case Font Awesome is not loaded into your builder. For Bricks builder, please follow the HTML structure so you can add-up divs instead and add icon block (therefore Font Awesome) instead of the <i> tag.

I will start with the mandatory library to be loaded, Font Awesome in this case (in the head) and GSAP (in the footer, then I will show respectively the HTML, CSS and JavaScript.

For CSS, please note that I am considering that you are using a builder hence: no margin/padding reset has been applied, the font is not defined, the container div doesn’t have any background color and the <a> tag is not “unset”.

Load Font Awesome library if necessary, please adapt according to your builder:

<link
  rel="stylesheet"
  href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.1.1/css/all.min.css"
  integrity="sha512-KfkfwYDsLkIlwQp6LFnl8zNdLGxu9YAA1QvwINks4PhcElQSvqcyVLLD9aMhXd13uQjoXtEKNosOWaZqXgel0g=="
  crossorigin="anonymous"
  referrerpolicy="no-referrer"
/>

Load GSAP and ScrollTrigger:

<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="rtg-section">
  <a class="rtg-gsap" href="#">
    <span class="rtg-btn">
      <i class="fa-brands fa-facebook-f"></i>
    </span>
  </a>
  <a class="rtg-gsap" href="#">
    <span class="rtg-btn">
      <i class="fa-brands fa-instagram"></i>
    </span>
  </a>
  <a class="rtg-gsap" href="#">
    <span class="rtg-btn">
      <i class="fa-brands fa-twitter"></i>
    </span>
  </a>
  <a class="rtg-gsap" href="#">
    <span class="rtg-btn">
      <i class="fa-brands fa-linkedin-in"></i>
    </span>
  </a>
  <a class="rtg-gsap" href="#">
    <span class="rtg-btn">
      <i class="fa-brands fa-pinterest-p"></i>
    </span>
  </a>
</div>

CSS:

:root {
  --primary-rtg: #202020;
  --secondary-rtg: #91d500;
  --accent-rtg: #91b500;
  --col-txt-rtg: #fff;
  --transition-rtg: all 0.5s ease;
  --width-rtg: 90px; /* change button size*/
  --height-rtg: var(--width-rtg);
  --ext-border-rtg: 3px;
}
.rtg-section {
  display: flex;
  position: relative;
  flex-direction: row;
  align-items: center;
  background-color: var(--primary-rtg);
  justify-content: center;
  min-height: 50vh;
  width: 100%;
}
.rtg-btn {
  width: var(--width-rtg);
  height: var(--height-rtg);
  margin: 2rem;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  transition: var(--transition-rtg);
}
.rtg-gsap {
  transform: translate(-200%, -100%) scale(0);
  opacity: 0;
}
.rtg-btn::before {
  content: "";
  position: absolute;
  width: 100%;
  height: 100%;
  border: var(--ext-border-rtg) solid var(--col-txt-rtg);
  border-radius: 50%;
}
.rtg-btn::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 1%;
  background-color: var(--accent-rtg);
  height: 98%;
  width: calc(var(--width-rtg) / 6);
  transform: translateX(-50%);
  z-index: -1;
}
.fa-brands {
  width: 65%;
  height: 65%;
  display: flex !important;
  background-color: var(--col-txt-rtg);
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  font-size: calc(var(--width-rtg) / 2.2);
  transition: var(--transition-rtg);
  z-index: 12;
  color: var(--primary-rtg);
  box-shadow: rgba(50, 50, 93, 0.25) 0px 50px 100px -20px,
    rgba(0, 0, 0, 0.3) 0px 30px 60px -30px,
    rgba(10, 37, 64, 0.35) 0px -2px 6px 0px inset;
}
.rtg-btn:hover {
  transform: rotate(180deg);
}
.rtg-btn:hover .fa-brands {
  transform: rotate(-180deg);
  color: var(--secondary-rtg);
}
@media screen and (max-width: 767px) {
  .rtg-section {
    flex-direction: column;
  }
}

JavaScript:

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

  gsap.to(".rtg-gsap", {
    rotation: 720,
    opacity: 1,
    scale: 1,
    x: 0,
    y: 0,
    duration: 1,
    ease: "back",
    stagger: {
      each: 0.3,
      from: "end",
    },
       scrollTrigger: {
         trigger: ".rtg-gsap",
         start: "bottom bottom",
         toggleActions: "play reverse play reverse",
       },
  });
});