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;
}
}
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.
.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;
}
.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 */
}
