Hover Animation, Elementor, GSAP

How to create a custom cursor Hover animation in WordPress Elementor with GSAP and glass blur effect

Get the custom CODE for my tutorial:

GSAP/Javascript Code:

<script src="https://cdn.jsdelivr.net/npm/gsap@3.12.5/dist/gsap.min.js"></script>
  <script>
    // Erstelle das Cursor-Element und füge es dem DOM hinzu
    const cursor = document.createElement('div');
    cursor.classList.add('custom-cursor');
    cursor.innerHTML = '<span></span>';
    document.body.appendChild(cursor);
    gsap.set(cursor, { x: -100, y: -100 });
    
    if ('ontouchstart' in window || navigator.maxTouchPoints > 0) {
      cursor.style.display = 'none';
    } else {
      let throttleTimeout;
      document.addEventListener('mousemove', (e) => {
        if (!throttleTimeout) {
          throttleTimeout = setTimeout(() => {
            gsap.to(cursor, {
              x: e.clientX - cursor.offsetWidth / 2,
              y: e.clientY - cursor.offsetHeight / 2,
              duration: 0,
              ease: "none",
              force3D: true
            });
            throttleTimeout = null;
          }, 16);
        }
      });
      
      const interactiveSections = document.querySelectorAll('.interactive-section');
      
      interactiveSections.forEach(section => {
        section.addEventListener('mouseenter', () => {
          cursor.style.display = 'block';
          cursor.classList.add('active');
          
          const newText = section.getAttribute('data-text');
          if (newText) {
            cursor.querySelector('span').textContent = newText;
          } else {
            cursor.querySelector('span').textContent = 'Try me!';
          }
          
          gsap.to(cursor, {
            width: 200,
            height: 200,
            duration: 0.3,
            ease: "power2.out",
            force3D: true,
            onComplete: function() {
              gsap.to(cursor.querySelector('span'), {
                opacity: 1,
                duration: 0.2,
                ease: "power2.out",
                force3D: true
              });
            }
          });
        });
      
        section.addEventListener('mouseleave', () => {
          cursor.classList.remove('active');
          
          gsap.to(cursor, {
            width: 40,
            height: 40,
            duration: 0.3,
            ease: "power2.inOut",
            force3D: true
          });
      
          gsap.to(cursor.querySelector('span'), {
            opacity: 0,
            duration: 0.2,
            ease: "power2.inOut",
            force3D: true
          });
        });
      });
    }
  </script>

CSS:

Put this into your Elementor Custom CSS or in your main container on the page

Copy Text


 .custom-cursor {
      display: flex;
      justify-content: center !important;  
      align-items: center !important;        
      position: fixed;
      top: 0;
      left: 0;
      width: 40px;  
      height: 40px; 
      background: rgba(255,255,255,0.1); 
      backdrop-filter: blur(10px);
      -webkit-backdrop-filter: blur(10px);
      border-radius: 50%;
      border: 1px solid rgba(255, 255, 255, 0.3);
      pointer-events: none;
      z-index: 9999;
      transition: none;
      opacity: 1;
      will-change: transform; /* important for performance */
      backface-visibility: hidden; 
      transform: translate3d(0,0,0);
      box-sizing: border-box;
    }

    .custom-cursor span {
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
      display: none; /* hide*/
      font-size: 16px;
      color: white;
      line-height: 1.2;
      white-space: nowrap; 
    }

    .custom-cursor.active span {
      display: inline-flex; 
      align-items: center !important;  
      justify-content: center !important;  
    }

Additional Styling Alternatives:

1. Hide Standard-Cursor

If you want to hide the mouse cursor on the whole page and only show the custom cursor then add this to your CSS code:

Copy Text

body {
    cursor: none; } /* hides the standard cursor */

2. Show different texts on different containers:

In order to make this happen you need to add the attribute in each container and also adapt the GSAP Code a bit:

First add in the Advanced section of the container in the tab “Attributes” a custom attribute which needs to start with “data-” and then a “| ” and then comes the text you want to show. It would look like this if want to see the text “More information”:

data-text|More information

You can add different texts on each container/elements. Don’t forget to also add the class “interactive-section”.

Then adapt the GSAP Code:

Line 8: cursor.innerHTML = ‘<span></span>’; // Empty span initially

Add in Line 28/29 the code below:

Copy Text

 // Update the text inside the cursor based on the section's data-text attribute
        const newText = section.getAttribute('data-text');
        if (newText) {
            cursor.querySelector('span').textContent = newText; // Set cursor text dynamically
        } else {
            cursor.querySelector('span').textContent = 'Try me!'; // Fallback text
        }

3. Hide custom cursor on mobile and/or tablet:

Copy Text

/* Hide the custom cursor on mobile devices */
@media (max-width: 768px) {
    .custom-cursor {
        display: none;
    }
}

/* Hide the custom cursor on tablets and mobile devices */
@media (max-width: 1024px) {
    .custom-cursor {
        display: none;
    }
}

4. Add an image in the cursor as background

If you like to have an cursor with an image in the background instead of the glassmorphism background, you can just replace two lines of CSS Code. Use the code below instead of the initial CSS Code above.

The only thing which you will need to change in the code below is the URL of the image you want to add. Usually in your wordpress media library you can copy the URL of the image.

Line 10: Replace the green example URL with your image URL.

background: url(‘https://via.placeholder.com/200‘) no-repeat center center; /* Image as cursor background */

Instead of the Glass Morphism effect I have added a line of code to set the image to cover the cursor.

Copy Text

.custom-cursor {
    display: flex;
    justify-content: center;  /* Horizontally center */
    align-items: center;      /* Vertically center */
    position: fixed;
    top: 0;
    left: 0;
    width: 40px;
    height: 40px;
    background: url('https://via.placeholder.com/200') no-repeat center center; /* Image as cursor background */
    background-size: cover; /* Show full image in cursor  */
    border-radius: 50%;
    border: 1px solid rgba(255, 255, 255, 0.3);
    pointer-events: none;
    z-index: 1000;
    transition: all 0.2s ease;
    opacity: 1;
     will-change: transform; /* important for performance */
      backface-visibility: hidden; 
      transform: translate3d(0,0,0);
}

.custom-cursor span {
    display: none; /* Hide text by default */
    text-align: center; /* Ensure the text is centered */
    font-size: 16px;
    color: white;
    line-height: 1.2;
    padding: 10px;
}

.custom-cursor.active span {
      display: inline-flex; 
      align-items: center !important;  
      justify-content: center !important;  
    }