Wix Studio Hover Text Animation[Code]

<div class="wrapper">

  <div class="hero">

    <h1 class="hero__heading">Travel Guide</h1>

  </div>



  <div class="hero hero--secondary" aria-hidden="true" data-hero>

    <p class="hero__heading">Plan Your Tour</p>

  </div>

</div>



<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.5.1/gsap.min.js"></script>



<style>

  @import url("https://fonts.googleapis.com/css?family=Montserrat:700");



  * {

    box-sizing: border-box;

  }



  body {

    font-family: Montserrat, sans-serif;

    margin: 0;

    padding: 0;

    background-color: rgb(9, 14, 23);

    color: #ffffff;

    overflow-x: hidden;

  }



  .wrapper {

    position: relative;

    width: 100%;

  }



  .hero {

    min-height: 100vh;

    padding: clamp(1rem, 2vw, 5rem);

    display: flex;

    align-items: center;

    justify-content: center;

    text-align: center;

  }



  .hero--secondary {

    --mask: radial-gradient(circle at var(--x, 70%) var(--y, 50%), black 15%, transparent 0);

    position: absolute;

    top: 0;

    left: 0;

    width: 100%;

    height: 100%;

    background: linear-gradient(45deg, #FF5733, #FFC300, #DAF7A6);

    color: rgb(9, 14, 23);

    -webkit-mask-image: var(--mask);

    mask-image: var(--mask);

    pointer-events: none;

  }



  .hero__heading {

    font-size: clamp(2rem, 5vw, 8rem);

    text-transform: uppercase;

    margin: 0;

    max-width: fit-content;

  }

</style>







<!-- JS: Mouse movement interaction -->

<script>

  const hero = document.querySelector('[data-hero]');



  window.addEventListener('mousemove', (e) => {

    const { clientX, clientY } = e;

    const x = Math.round((clientX / window.innerWidth) * 100);

    const y = Math.round((clientY / window.innerHeight) * 100);



    gsap.to(hero, {

      '--x': `${x}%`,

      '--y': `${y}%`,

      duration: 0.3,

      ease: 'sine.out',

    });

  });

</script>