How to create a custom cursor Hover animation in WordPress Elementor with GSAP and glass blur effect
SHARE
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>
// Create the cursor element and add it to the DOM
const cursor = document.createElement('div');
cursor.classList.add('custom-cursor');
cursor.innerHTML = '<span>Try me!</span>'; // Text for the cursor when hovered
document.body.appendChild(cursor);
// Function for cursor movement
document.addEventListener('mousemove', (e) => {
gsap.to(cursor, {
x: e.clientX - cursor.offsetWidth / 2, // Centers the cursor
y: e.clientY - cursor.offsetHeight / 2, // Centers the cursor
duration: 0, // As fast as possible
ease: "power3.out"
});
});
// Capture interactive sections
const interactiveSections = document.querySelectorAll('.interactive-section');
// Event listener for mouseover events
interactiveSections.forEach(section => {
section.addEventListener('mouseenter', () => {
cursor.classList.add('active');
// First, let the cursor grow
gsap.to(cursor, {
width: 200,
height: 200,
duration: 0.3, // Smooth growth
ease: "power2.out",
onComplete: function() {
// Show the text after the cursor has grown
gsap.to(cursor.querySelector('span'), {
opacity: 1, // Show the text
duration: 0.2, // Fade-in duration
ease: "power2.out"
});
}
});
});
section.addEventListener('mouseleave', () => {
cursor.classList.remove('active');
// Let the cursor shrink
gsap.to(cursor, {
width: 40,
height: 40,
duration: 0.3, // Smooth shrinking
ease: "power2.inOut"
});
// Hide the text when the cursor shrinks
gsap.to(cursor.querySelector('span'), {
opacity: 0, // Hide the text
duration: 0.2, // Fade-out duration
ease: "power2.inOut"
});
});
});
</script>
CSS:
Put this into your Elementor Custom CSS or in your main container on the page
.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: rgba(255, 255, 255, 0.1); /* Glass blur effect */
backdrop-filter: blur(10px); /* Blur effect */
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;
}
.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: block; /* Show text when active */
text-align: center; /* Center the text */
}
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:
body {
cursor: none; } /* Versteckt den 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:
// 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:
/* 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;
}
}
