Hover Animation, Elementor, GSAP
How to create an Inverted Color Custom Cursor Animation in Elementor
SHARE
Custom Cursor
Elementor Setup
- Create a new Page
- Add Three Sections or use your existing layout
- The section in the middle will become our “Interactive-section” in which the custom cursor becomes active
- Add your Layout in the interactive section
- Add HTML Widget at the bottom of the interactive-section container
- Add GSAP Code from below
- Go to the Interactive-section main container and go to Advanced tab and use Custom CSS (Elementor Pro Users) and add the CSS code from below. If you don’t want to see the normal cursor see my variations and also add there the additional code. Elementor Free users can add the code to the Custom CSS of Elementor and not directly in the Container widget.
- Save and preview: Note that Javascript is usually only visible on the Preview and Live Pages.
How the mix-blend-mode "difference" works
The mix-blend-mode: difference is a powerful tool for creating dynamic visual effects. It calculates the absolute difference between the colors of overlapping elements.
For each color channel (Red, Green, Blue), the formula is:
Formula:
Difference = | Foreground Color - Background Color |Example 1: Yellow Cursor on Yellow Text
When both the cursor and the text are yellow (rgb(255, 255, 0)):
- Red Channel:
|255 - 255| = 0 - Green Channel:
|255 - 255| = 0 - Blue Channel:
|0 - 0| = 0
Resulting Color:
rgb(0, 0, 0) (Black)Example 2: Yellow Cursor on Blue Text
Cursor Color: Yellow (rgb(255, 255, 0))
Text Color: Blue (rgb(0, 0, 255))
Calculations:
- Red Channel:
|255 - 0| = 255 - Green Channel:
|255 - 0| = 255 - Blue Channel:
|0 - 255| = 255
Resulting Color:
rgb(255, 255, 255) (White)Key Takeaways:
- If the cursor and background colors are identical, the result is black.
- Complementary colors, such as yellow and blue, result in white.
GSAP Code Blend Mode Cursor Tutorial:
<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');
document.body.appendChild(cursor);
if ('ontouchstart' in window || navigator.maxTouchPoints > 0) {
// Verstecke den benutzerdefinierten Cursor für Touch-Geräte
cursor.style.display = 'none';
} else {
// 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: "none"
});
});
// Capture interactive sections
const interactiveSections = document.querySelectorAll('.interactive-section');
// Show Custom Cursor only in specific sections
interactiveSections.forEach(section => {
section.addEventListener('mouseenter', () => {
cursor.style.display = 'block'; // Show custom cursor
cursor.classList.add('active');
// Cursor grows when hovering over section
// Cursor grows when hovering over section
gsap.to(cursor, {
width: 200,
height: 200,
duration: 0.3,
ease: "power2.out"
});
});
section.addEventListener('mouseleave', () => {
cursor.style.display = 'none'; // Hide custom cursor
cursor.classList.remove('active');
});
});
// Hide cursor outside interactive sections
document.addEventListener('mousemove', (e) => {
const inInteractiveSection = Array.from(interactiveSections).some(section =>
section.contains(e.target)
);
if (!inInteractiveSection) {
cursor.style.display = 'none'; // Hide custom cursor
}
});
}
</script>
CSS Code:
If you want to see the standard cursor in the “interactive-section” then delete the style for the interactive-section on the last three rows.
Change here the background color for the Custom Cursor in Line 10 !!! It is set to white in code below.
.custom-cursor {
display: flex;
justify-content: center; /* Horizontally center */
align-items: center; /* Vertically center */
position: fixed;
top: 0;
left: 0;
width: 0px;
height: 0px;
background: #ffffff;
mix-blend-mode: difference;
border-radius: 50%;
border: 1px solid rgba(255, 255, 255, 0.3);
pointer-events: none;
z-index: 9999;
transition: all 0.2s ease;
opacity: 1;
}
.interactive-section{
cursor: none;
}Variations
1. Show a smaller custom cursor on the whole page
Make sure to add a height and width in the CSS Code and in the GSAP code. Make sure to have the same values. It ensures to have start values for the custom cursor. => Line 8 and 9.
If you want to see the standard cursor in the “interactive-section” then delete the style for the interactive-section on the last three rows.
Change here the background color for the Custom Cursor in Line 10 !!! It is set to white in code below.
.custom-cursor {
display: flex;
justify-content: center; /* Horizontally center */
align-items: center; /* Vertically center */
position: fixed;
top: 0;
left: 0;
width: 20px;
height: 20px;
background: #ffffff;
mix-blend-mode: difference;
border-radius: 50%;
border: 1px solid rgba(255, 255, 255, 0.3);
pointer-events: none;
z-index: 9999;
transition: all 0.2s ease;
opacity: 1;
}
.interactive-section{
cursor: none;
}<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');
document.body.appendChild(cursor);
if ('ontouchstart' in window || navigator.maxTouchPoints > 0) {
// Verstecke den benutzerdefinierten Cursor für Touch-Geräte
cursor.style.display = 'none';
} else {
// 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: "none"
});
});
// Capture interactive sections
const interactiveSections = document.querySelectorAll('.interactive-section');
// Show Custom Cursor only in specific sections
interactiveSections.forEach(section => {
section.addEventListener('mouseenter', () => {
cursor.style.display = 'block'; // Show custom cursor
cursor.classList.add('active');
// Cursor grows when hovering over section
// Cursor grows when hovering over section
gsap.to(cursor, {
width: 200,
height: 200,
duration: 0.3,
ease: "power2.out"
});
});
section.addEventListener('mouseleave', () => {
cursor.classList.remove('active');
// Back to Standard Size
gsap.to(cursor, {
width: 20,
height: 20,
duration: 0.2,
ease: "power2.out"
});
});
});
}
</script>
2. Hide Normal Mouse cursor on all page
Add the following in your CSS code of the page. It will hide the custom cursor.
body {
cursor: none;
}
