Magnify Elements On Mouse Hover – Mac Animation

Preview:

Description:

Mac Animation is a JavaScript library that applies a smooth magnifying effect to elements on mouse hover. Inspired by Mac bottom navigation bar.

How to use it:

1. Load the macNavAnimation.js JavaScript library in the document.

<script src="macNavAnimation.js"></script>

2. Add the CSS class ‘block’ to the parent container. That’s it.

<ul class="block">
  <li><i class="fab fa-facebook fa-2x"></i></li>
  <li><i class="fab fa-twitter fa-2x"></i></li>
  <li><i class="fab fa-pinterest fa-2x"></i></li>
  <li><i class="fab fa-linkedin fa-2x"></i></li>
  <li><i class="fab fa-whatsapp fa-2x"></i></li>
  <li><i class="fab fa-tumblr fa-2x"></i></li>
  ...
</ul>

3. Customize the hover effect.

const range = 4;
const amplifier = 55;
const childSmallestValue = 64;