I've created a section in my website that has a hover over effect where it uses clip-path to show content behind it a div. I've managed to get all of that setup correctly so it's showing me the content behind but for some reason the jQuery that I've used doesn't seem to update the :root variable so that the clipping path tracks the mouse position. I've tested this in CodePen and it all works fine with the example I used so I'm a bit confused. This example does use an image to clip but I've tested on mine and if you manually input the coords it achieves the required effect.
My code is as follows:
<div class="w-full text-container" id="text-container">
<p id="hidden-first" class="first text-white lg:text-4xl">SEO</p>
<p id="hidden-second" class="second text-white lg:text-4xl">Paid Search</p>
<p id="hidden-third" class="third text-white lg:text-4xl">Paid Social</p>
<p id="hidden-fourth" class="fourth text-white lg:text-4xl">Content</p>
</div>
<div class="w-full text-container" id="behind-container">
<p id="first" class="text-dark-blue-th lg:text-4xl">SEO</p>
<p id="second" class="text-dark-blue-th lg:text-4xl">Paid Search</p>
<p id="third" class="text-dark-blue-th lg:text-4xl">Paid Social</p>
<p id="fourth" class="text-dark-blue-th lg:text-4xl">Content</p>
</div>
My CSS:
:root {
--clip-position: center;
}
#behind-container {
mask:url("data:image/svg+xml,%3Csvg version='1.1' id='Layer_1' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' x='0px' y='0px' viewBox='0 0 32 32' style='enable-background:new 0 0 32 32;' xml:space='preserve'%3E%3Cstyle type='text/css'%3E .st0%7Bfill:%23E72278;%7D%0A%3C/style%3E%3Ccircle class='st0' cx='16' cy='16' r='15.8'/%3E%3C/svg%3E%0A")no-repeat;
mask-size:200px 200px;
mask-position:var(--clip-position);
background: $pink;
}
#text-container {
background: $dark-blue;
}
My jQuery:
const $cImg = $('#behind-container');
const $body = $('body');
$body.on('mousemove', function(e) {
$cImg.css('--clip-position', `${(e.pageX - 100)}px ${(e.pageY - 100)}px`);
});
When I test it using vanilla JS, it seems to think that the mouse coords are coming in as null, which is even more confusing. And I've tried removing the root variable and then it just sits in the default position on the left.