Slow Bouncy Effect on Hover using CSS and JS

Jake · August 27, 2024, 11:15am

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>

Raveguy · August 29, 2024, 1:21pm

You’re on the right track with your current code, but Webflow offers a more user-friendly way to achieve the bounce effect and content reveal animation on your first section. Here’s how you can achieve it entirely within Webflow:

Using Webflow Interactions:

Go to the section containing the cards and enter the “Interactions” panel.
Create a new interaction named “On Hover” triggered by “Mouse Enter” on any card element (e.g., .item ).

Animating Width and Scale:

Within the “On Hover” interaction, add two animations:

Animate Width: Set the animation target to the hovered card (e.g., Current Item > Width ). Change the width from its initial value (e.g., 30%) to a wider value (e.g., 54%). You can control the animation duration (e.g., 0.5s) and easing (e.g., CubicBezierInOut) in the settings.
Animate Scale (Optional): Add a subtle scaling animation to the hovered card. Set the animation target to Current Item > Transform and adjust the scale values slightly (e.g., from 1 to 1.02) with the same duration and easing as the width animation.

Content Reveal:

Still within the same “On Hover” interaction, add actions to show and hide content based on hover state:

Show Hidden Content: Use an “Add Class” action targeting the hidden content element (e.g., .hidden-content ) inside the hovered card. This will display the detailed information when the card is hovered over.
Hide Initial Content: Likewise, use a “Remove Class” action targeting the initial content element (e.g., .initial-content ) inside the hovered card. This will hide the basic information on hover.

Animate Image (Optional):

If you want the image to appear or move on hover, create a separate animation in the “On Hover” interaction targeting the image element (e.g., .item > .image ). You can adjust its opacity (from 0 to 1) or use a transform animation to create a subtle slide-in effect.

Preview and Refine:

Preview the interaction in Webflow’s Designer mode and refine animation durations, easing curves, and content reveal timing to achieve the desired bounce and content transition effect.
Consider adding a similar interaction named “On Mouse Leave” triggered by “Mouse Leave” to reverse the animations and hide the detailed content when the mouse leaves the card.

Advantages:

Webflow’s visual interface makes creating and editing animations easier than using code.
Preset animations can be a good starting point.
Changes through Webflow don’t modify your original code.

Additional Tips:

Use media queries to adjust the layout and interaction behavior for smaller screens.
Consider using a pre-loader to avoid content jumping before images are loaded.

By following these steps, you can achieve the desired visual effect without using any custom code, keeping your Webflow project clean and user-friendly.