CSS clip-path animation on hover

Ask the community
, , ,
1

i spent the whole day trying to create this CSS clip-path reveal animation on hover in Wix Studio. The idea is that when hovering a logo inside a repeater, a fullscreen background image reveals using a circle clip-path expansion, and then reverses cleanly on mouse out. Same interaction in CodePen. However, after trying tons of way adapting the logic to Velo, the image appears glitchy , the clip-path doesnt animate at all, and on mouse out the image doesnt reset.

Working in
Wix Studio Editor,CMS, etc.

Site link
test site link

What I’ve tried so far
I’ve tried handling the animation fully in CSS, adding delays, and using requestAnimationFrame, but the issue remains. are there any recommended workarounds? i have used clip path on click interactions in past wix projects, so i am assuming clip path itself is supported.

Extra context
codepen : reference link

$w.onReady(() => {
const bg = $w(‘#bg’); //fullscreen img placeholder
const dataset = $w(‘#hoverItem’); //cms images stores in hoveritem

$w(‘#hoverScroller’).onItemReady(($item, itemData) => {
const trigger = $item(‘#item’); //hover logo item


trigger.onMouseIn(() => {
  if (itemData.bgImage) {
    bg.src = itemData.bgImage; 
    bg.customClassList.add('clippath'); // css circle clippath on hover
  }
});

trigger.onMouseOut(() => {
  bg.customClassList.remove('clippath'); 
});
});
});



#bg{
  position: fixed;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background-size: cover;
  background-position: center center;
  background-repeat: no-repeat;
  clip-path: circle(0% at center);
  opacity: 0;
  transition: clip-path 1.5s ease, opacity 0.4s ease;
}

/* add class to animate */
#bg.clippath{
  clip-path: circle(150% at center);
  opacity: 1;
 
}
2

OK, I found the solution to the clip-path. However, unlike in CodePen, in Wix I can’t smoothly hover one item after another to reveal the image. Hovering the next item just gets stuck, and the reveal looks very unsmooth.

.clippath{
  position: fixed;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background-size: cover;
  background-position: center center;
  background-repeat: no-repeat;
  clip-path: circle(0% at center);
  transition: clip-path 1.4s ease, opacity 0.5s ease;
  opacity: 0;
  will-change: clip-path;
}

/* add class to animate */
.expand-clippath{
  clip-path: circle(150% at center);
   transition: clip-path 1.4s ease, opacity 0.5s ease;
    transition-delay: .1s;
      opacity: 1;
    will-change: clip-path;
 
}

$w.onReady(() => {
    const bg = $w('#bg'); // fullscreen image placeholder
    const bgWrapper = $w('#bgWrapper'); // image wrapper

    // Start hidden
    bgWrapper.hide();
    bg.customClassList.add('clippath');

    $w('#hoverScroller').onItemReady(($item, itemData) => {
        const trigger = $item('#item');

        trigger.onMouseIn(() => {
            if (itemData.bgImage) {
                bg.src = itemData.bgImage;
                bgWrapper.show();
             
                bg.customClassList.add('expand-clippath');
            }
        });

        trigger.onMouseOut(() => {
            // reverse animation
            bg.customClassList.remove('expand-clippath');

            // hide after animation ends
            setTimeout(() => {
                bgWrapper.hide();
            }, 500); 
        });
    });
});
3

I think you might need some sort of queue mechanism, so that as you move over the repeater items, it’s not jumpy and queues the requests (it might need to drop ones in the middle if you’re mousing over a lot and they haven’t played)