ReactJS show element on hover

Question

What's the best approach to achieving a lasting effect like in this gif ? I thought the framer-motion whileHover attribute would be my best chance, but I misunderstood how it works, I thought its possible to enter from and to parameters like in CSS animation.

I want to reveal the 'footer' either while the cursor hovers on it or when reaching a certain viewport height.

What's in the gif was made with keyframes animation in css.

I'd appreciate any hint, guide, link to a video on how to build such things.

Thanks in advance

Answer 1

I believe that you can achieve that exact effect using CSS only. This is often preferable, since javascript would bloat your code and be slower to execute.

You can see a way of achieving this effect in this fiddle

Basically, you can use the "hover" pseudoclass to make the aesthetic changes, and then use the "transition" property to animate them.

In the fiddle above, this is the code that actually does the trick:

/* setting base styles for the footer element */
footer {
  margin: 0 auto;
  width: 200px;
  transform: translateY(60px);
  transition: width 1s, transform 1s;
}

/* having an inner child will give that "truncated border radius" effect you see in the gif */
footer .inner {
  background-color: lightblue;
  padding: 3em;
  border-radius: 50%;
  transition: border-radius 1s;
}

/* Make changes using the "hover" pseudoclass */

footer:hover {
  transform: translateY(0px);
  width: 100%;
}

footer:hover .inner {
  border-radius: 0%;
}

Please be aware that the fiddle I posted is just a hint on how to build this component, but it still miss some features, like the handling of the footer text content itself (right now it won't work well if it's multiline) and accessibility.

Answer 2

See this solution using only css:

 * { margin: 0px; padding: 0px; box-sizing: border-box; font-family: Segoe UI, sans-serif; }.container { width: 100vw; height: 100vh; }.container main { width: 80%; height: 400px; margin: auto; border-radius: 30px; display: flex; justify-content: center; align-items: center; font-size: 3em; font-weight: 800; color: white; background: rgb(70, 100, 52); }.container footer { width: 100%; display: flex; justify-content: center; }.container footer.expand { width: 200px; height: 50px; background: royalblue; border-radius: 40px 40px 0 0; position: fixed; bottom: 0px; display: flex; justify-content: center; font-size: 1em; color: white; transition: 1000ms; }.container footer.expand:hover { width: 100%; animation-name: resize; animation-duration: 700ms; height: 150px; border-radius: 0; } @keyframes resize { 0% { height: 50px; border-radius: 60px 60px 0 0; } 50% { height: 160px; border-radius: 90px 90px 0 0; } 100% {height: 150px;} }

 <div class="container"> <main> this is your main feed </main> <footer> <div class="expand">^^^</div> </footer> </div>