javascript html css css-transitions webflow

Slow Bouncy Effect on Hover using CSS and JS

I have this reference website called pipe.com and I'm so impressed with the bounce effect of the first section after the banner (see attached photo and please try to hover on the card on their website).

I'm having difficulty on achieving the same effect. Is there anyone who can guide me to do this? I'm building the website on WebFlow

Right now I have this:

document.addEventListener("DOMContentLoaded", function() {
  const item1 = document.getElementById("item1");
  const items = document.querySelectorAll(".item");

  item1.classList.add("initial");

  items.forEach(item => {
    if (item.id !== "item1") {
      item.addEventListener("mouseenter", () => {
        if (window.innerWidth > 786) { // Only apply hover effects if screen width is larger than 768px
          items.forEach(i => i.classList.remove("hovered"));
          item.classList.add("hovered");
          item1.classList.remove("initial");
          
          const initialContent = item1.querySelector('.initial-content');
          const hiddenContent = item1.querySelector('.hidden-content');
          
          if (initialContent) 
            initialContent.style.display = 'none';
            
          if (hiddenContent) 
            hiddenContent.style.display = 'block';
        }
      });

      item.addEventListener("mouseleave", () => {
        if (window.innerWidth > 786) { // Only apply hover effects if screen width is larger than 768px
          items.forEach(i => i.classList.remove("hovered"));
          item1.classList.add("initial");
          
          const initialContent = item1.querySelector('.initial-content');
          const hiddenContent = item1.querySelector('.hidden-content');
          
          if (initialContent) 
            initialContent.style.display = 'block';
            
          if (hiddenContent) 
            hiddenContent.style.display = 'none';
        }
      });
    }
  });
});


var mobilevideo = document.getElementsByTagName("video")[0];
mobilevideo.setAttribute("playsinline", "");
mobilevideo.setAttribute("muted", "");

.ccontainer {
  display: flex;
  justify-content: space-between;
  padding: 20px;
  gap: 15px;
  height: 100%;
  flex-direction: row;
}

.item {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
  width: 30%;
  border-radius: 20px;
  overflow: hidden;
  color: #030043;
  text-align: left;
  position: relative;
  background: linear-gradient(180deg, #F0EEF3 0%, #B3C8FF 100%);
  font-family: Everett, sans-serif;
}

.item.hovered {
  width: 54%;
  background-color: #e0e0e0;
  /*animation: horizontalBounce 0.5s;*/
}

#item1.initial {
  width: 54%;
  background-color: #e0e0e0;
  /*animation: horizontalBounce 0.5s;*/
}

.content {
  z-index: 99;
  flex: 1;
  height: 110%;
  padding: 55px 20px 20px;
}

.image {
  display: none;
  width: 320px;
  height: auto;
  margin-top: 2rem;
  margin-bottom: -5px;
}

.item#item1.initial .image,
.item.hovered .image {
  display: block;
}

button {
  color: white;
  padding: 4px 30px;
  font-size: 18px;
  line-height: 35px;
  gap: 10px;
  border: none;
  background: linear-gradient(90deg, #0063EC 0%, #012681 100%);
  border-radius: 100px;
  font-family: Everett, sans-serif;
  position: absolute;
  bottom: 1.3rem;
}

.content p,
.heading2 {
  font-family: Everett, sans-serif;
  font-weight: 500;
  font-size: 30px;
  margin: 15px 0 10px;
  color: #030043;
}

.cont ul {
  margin: 1rem 0;
  padding-left: 5px;
  list-style-type: none;
  /* Remove the default list style */
}

.cont ul li {
  list-style-image: url('https://uploads-ssl.webflow.com/66ac6355674df55afff1135a/66be3617b3d309575b7840e0_Vector.png');
  margin: 0 0 9px 20px;
  /* Adjust margin as needed */
  line-height: 22px;
  color: #030043;
  font-size: 14px;
}

.cont p {
  line-height: 23px;
  color: #030043;
  max-width: 320px;
  font-size: 14px;
}

button a {
  color: #fff;
}

button:hover {
  background-color: #0056b3;
}

.item.hovered .initial-content {
  display: none;
}

.item.hovered .hidden-content {
  display: block;
}

.hidden-content {
  display: none;
}

.initial-content {
  display: block;
}

.cont {
  display: flex;
  flex-direction: column;
  height: 90%;
}

.initial-content,
.hidden-content {
  height: 80%;
}

@keyframes horizontalBounce {
  0%,
  20%,
  50%,
  80%,
  100% {
    transform: translateX(0);
  }
  40% {
    transform: translateX(-5px);
  }
  60% {
    transform: translateX(10px);
  }
}

@media (max-width: 768px) {
  .cont ul {
    display: none;
  }
  #item1.initial {
    width: 100%;
  }
  #item1.initial .content .initial-content,
  #item1.initial .content .image {
    display: none;
  }
  #item1.initial .content .hidden-content {
    display: block;
  }
  .item#item1.initial .image,
  .item.hovered .image {
    display: none;
  }
  .ccontainer {
    flex-direction: column;
    align-items: center;
  }
  .item {
    width: 100%;
    margin-bottom: 20px;
    display: flex;
    flex-direction: column;
  }
  .item.hovered {
    width: 100%;
  }
  .image {
    width: 85%;
    height: auto;
    display: none;
    margin-left: 50px;
    margin-top: 1.5rem;
  }
  .content {
    padding: 20px 20px 5px;
  }
  button {
    position: relative;
    width: 100%;
    margin-top: 1.4rem;
  }
  .initial-content button {
    bottom: 1.5rem;
    position: absolute;
    width: 79%;
  }
  #item1 .initial-content button {
    bottom: 1.5rem;
    position: absolute;
    width: 79%;
  }
  #item1 .hidden-content button {
    margin-top: 4rem;
  }
  /* .initial-content {
            display: none;
        }
        .hidden-content {
            display: block;
        }*/
}

@media (max-width: 480px) {
  .item {
    padding: 10px 0 0 10px;
    min-height: 330px;
  }
  h2 {
    font-size: 18px;
  }
  .heading-2 span {
    padding-right: 7px;
  }
}

<div class="ccontainer">
  <div class="item" id="item1">
    <div class="content">
      <div class="hidden-content">
        <img src="https://uploads-ssl.webflow.com/66ac6355674df55afff1135a/66b0cbe1e7741c9e30daf857_Icon.png" alt="icon" />
        <p class="heading2">Property Owners</p>
        <div class="cont">
          <p>Keyper unlocks an array of services that help you manage your property with unparalleled efficiency, from financing options to portfolio monitoring and market insights.
          </p>
        </div>
        <a href="/property-owner"><button>Learn more</button></a>
      </div>
      <div class="initial-content">
        <img src="https://uploads-ssl.webflow.com/66ac6355674df55afff1135a/66b0cbe1e7741c9e30daf857_Icon.png" alt="icon" />
        <p class="heading2">Property Owners</p>
        <div class="cont">
          <p>Keyper unlocks an array of services that help you manage your property with unparalleled efficiency, from financing options to portfolio monitoring and market insights.
          </p>
          <ul>
            <li>Cash out on your tenant’s outstanding rent any time and receive it digitally.</li>
            <li>Track your property's valuation & activity and that of properties like yours. </li>
            <li>Experience full-service property management. Buying, selling, leasing & financing. We'll handle it all.</li>
          </ul>
        </div>
        <a href="/property-owner"><button>Learn more</button></a>
      </div>
    </div>
    <img src="https://uploads-ssl.webflow.com/66ac6355674df55afff1135a/66c7048bbd323fa74ca1f934_Property%20Owner%20Image.png" class="image" alt="Image 1">
  </div>
  <div class="item" id="item2">
    <div class="content">
      <div class="initial-content">
        <img src="https://uploads-ssl.webflow.com/66ac6355674df55afff1135a/66b0cbe1e7741c9e30daf857_Icon.png" alt="icon" />
        <p class="heading2">Tenants</p>
        <div class="cont">
          <p>Say hello to pain free rent! With Keyper, you can pay your yearly rent in 12 installments by card. It’s what we like to call Rent Now, Pay Later or RNPL for short.</p>
        </div>
        <a href="https://t.realkeyper.com/tenants"><button>Learn more</button></a>
      </div>
      <div class="hidden-content">
        <img src="https://uploads-ssl.webflow.com/66ac6355674df55afff1135a/66b0cbe1e7741c9e30daf857_Icon.png" alt="icon" />
        <p class="heading2">Tenants</p>
        <div class="cont">
          <p>Say hello to pain free rent! With Keyper, you can pay your yearly rent in 12 installments by card. It’s what we like to call Rent Now, Pay Later or RNPL for short.</p>
          <ul>
            <li>Enjoy monthly rent payments, no matter your landlord’s terms.</li>
            <li>Drop the cheque book and unlock bank rewards when you pay by card.</li>
            <li>Find the perfect home that meets your preferred payment terms on Keyper’s marketplace.</li>
          </ul>
        </div>
        <a href="https://t.realkeyper.com/tenants"><button>Learn more</button></a>
      </div>
    </div>
    <img src="https://uploads-ssl.webflow.com/66ac6355674df55afff1135a/66c7048ca48207cc04c4aeac_Tenants%20Image.png" class="image" alt="Image 2">
  </div>
  <div class="item" id="item3">
    <div class="content">
      <div class="initial-content">
        <img src="https://uploads-ssl.webflow.com/66ac6355674df55afff1135a/66b0cbe1e7741c9e30daf857_Icon.png" alt="icon" />
        <p class="heading2">Partners</p>
        <div class="cont">
          <p>Grow your sales with Keyper! Elevate your clients’ experience with an array of services designed to help them manage their property. The best part? You’ll earn a commission for every property you refer.</p>
          <!--a href="https://keyper-website-4.webflow.io/partners"--><button>Learn more</button>
          <!--/a-->
        </div>
      </div>
      <div class="hidden-content">
        <img src="https://uploads-ssl.webflow.com/66ac6355674df55afff1135a/66b0cbe1e7741c9e30daf857_Icon.png" alt="icon" />
        <p class="heading2">Partners</p>
        <div class="cont">
          <p>Grow your sales with Keyper! Elevate your clients’ experience with an array of services designed to help them manage their property. The best part? You’ll earn a commission for every property you refer.</p>
          <ul>
            <li>Earn a minimum of AED 2,000 for each successful referral.</li>
            <li>Close deals faster by offering tenants the option to pay their rent monthly.</li>
            <li>Your clients are always yours to keep.</li>
          </ul>
        </div>
        <!--a href="https://keyper-website-4.webflow.io/partners"--><button>Learn more</button>
        <!--/a-->
      </div>
    </div>
    <img src="https://uploads-ssl.webflow.com/66ac6355674df55afff1135a/66c7048be2b6c800111808fc_Partners%20Image.png" class="image" alt="Image 3">
  </div>
</div>

Solution

For the bouncy effect use transition with cubic-bezier easing.
You can always animate (transition) the flex property. No JavaScript is necessary, just use CSS :hover and transition. The magic is also achieved in this example by using Container Type and enlarging the items on hover to the width related to the container in cqw unit:

* {margin: 0; box-sizing: border-box; }

.container {
  display: flex;
  gap: 0.5em;
  container-type: size;
  
  .item {
    flex: 1;
    background: var(--bg, #aaa);
    border-radius: 1em;
    padding: 2em;
    transition: flex 0.6s cubic-bezier(0.6, 0, 0.5, 1.3);
    height: min-content;
    overflow: hidden;
    
    .item-content {
      width: 50cqw; /* Set desired width */
    }
    
    &:hover {
      flex: 50cqw; /* Transition flex to that same width */
    }
  }
}

<div class="container">
  <div class="item" style="--bg:#0bf;">
    <div class="item-content">
      <h2>Property owners</h2>
      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Totam enim explicabo, accusamus hic nesciunt facilis minima a tempora voluptas ratione voluptatem beatae quam! At vel eveniet asperiores, dicta suscipit omnis.</p>
    </div>
  </div>
  <div class="item" style="--bg:#bf0;">
    <div class="item-content">
      <h2>Tenants</h2>
      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Totam enim explicabo, accusamus hic nesciunt facilis minima a tempora voluptas ratione voluptatem beatae quam! At vel eveniet asperiores, dicta suscipit omnis.</p>
    </div>
  </div>
  <div class="item" style="--bg:#f0b;">
    <div class="item-content">
      <h2>Partners</h2>
      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Totam enim explicabo, accusamus hic nesciunt facilis minima a tempora voluptas ratione voluptatem beatae quam! At vel eveniet asperiores, dicta suscipit omnis.</p>
    </div>
  </div>
</div>