Elementor Animated Circle Background Effect

 

 

CSS code snippet on the Container:

selector{
    --radius: 300px;
    --heading-blur: 10px;
    --text-delay: 1.2s;
}
selector{
    --x: 50%;
    --y: 50%;
}
selector .focus-overlay{
    clip-path: circle(0 at var(--x) var(--y));
    transition: all 0.2s linear;
}
selector.hover .focus-overlay{
    clip-path: circle(var(--radius) at var(--x) var(--y));
}


/* Heading Animtion */

selector .elementor-widget-heading{
    filter: blur(var(--heading-blur));
    transition: all 2s ease-in-out;
    opacity: 0.75;
}
selector.animated .elementor-widget-heading{
    filter: blur(0);
    opacity: 1;
}


/* Text and Button Animtion */

selector .elementor-widget-text-editor,
selector .elementor-widget-button{
    transform: translateY(30px);
    transition: all 1s ease-in-out var(--text-delay);
    opacity: 0;
    animation: none;
}
selector.animated .elementor-widget-text-editor,
selector.animated .elementor-widget-button{
    transform: translateY(0);
    opacity: 1;
}

@media (max-width: 767px){
selector > *{
    clip-path: none !important;
}
}

 

 

JavaScript code snippet:

<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script>
var $ = jQuery
$(document).ready(function(){
   
$(".focus-section").on('mousemove', function(e){
   var parentOffset = $(this).offset(),
   x = e.pageX - parentOffset.left,
   y = e.pageY - parentOffset.top
   
   $(this).addClass('hover')
   
   $('.focus-section').css({
       '--x': x + 'px',
       '--y': y + 'px',
       
   })
})

$(".focus-section").on('mouseleave', function(){
  $(this).removeClass('hover')
})

})
</script>