GSAP Skew
Up Animation

<style>
.block {overflow: hidden;}[hover-block="duplicate"] {
position: absolute;
 top: 0%;
 left: 0%;
 right: 0%;
 bottom: 0%;
 }
</style>

<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.11.3/gsap.min.js"></script>
<script>
window.addEventListener("DOMContentLoaded", (event) => {
 $('[hover-block="component"]').each(function () {
   let block = $(this);
   let blockContent = block.find(".block-content");
   let blockImg = block.find('[hover-block="img"]');
   let imgColorPrimary = block.attr("hover-block-logo-color");
   let imgColorHover = block.attr("hover-block-logo-color-hover");
   let hoverColor = block.attr("hover-block-hover-color");    blockImg.css("color", imgColorPrimary);    blockContent.clone().attr("hover-block", "duplicate").appendTo(block);    let duplicateBlock = block.find('[hover-block="duplicate"]');
   duplicateBlock.css("background-color", hoverColor);
   duplicateBlock.find('[hover-block="img"]').css("color", imgColorHover);    let hoverAnimation = gsap.timeline({ paused: true });    gsap.set(duplicateBlock, { clipPath: `circle(0% at 50% 50%)` });    $(block).on("mouseenter", function (event) {
     // find coordinates of mouse
     let bounds = event.target.getBoundingClientRect();
     let x = event.clientX - bounds.left;
     let y = event.clientY - bounds.top;
     let blockWidth = block.width();
    let blockHeight = block.height();      let hoverX = (x / blockWidth) * 100 + "%";
     let hoverY = (y / blockHeight) * 100 + "%";      hoverAnimation.fromTo(
       duplicateBlock,
       { clipPath: `circle(0% at ${hoverX} ${hoverY})` },
       {
         clipPath: `circle(141.7% at ${hoverX} ${hoverY})`,
         duration: 1.2,
         ease: "power4.out"
       }
     );      hoverAnimation.play();
   });    $(block).on("mouseleave", function (event) {
     // find coordinates of mouse
     let bounds = event.target.getBoundingClientRect();
     let x = event.clientX - bounds.left;
     let y = event.clientY - bounds.top;
     let blockWidth = block.width();
    let blockHeight = block.height();      let hoverX = (x / blockWidth) * 100 + "%";
     let hoverY = (y / blockHeight) * 100 + "%";      hoverAnimation.fromTo(
       duplicateBlock,
       { clipPath: `circle(141.7% at ${hoverX} ${hoverY})` },
       {
         clipPath: `circle(0% at ${hoverX} ${hoverY})`,
         duration: 0.8,
         ease: "expo.out"
       }
     );      hoverAnimation.play();
   });
 });
});
</script>