Create this Social Menu with Stagger Animation in Elementor

 

 

CSS Code Snippet on Icon List Widget:

selector{
    --hover-background-color: #ffffff;
    --hover-background-speed: 500;
    --letter-animation-difference: 40;
}
selector{
    position: relative;
    z-index: 1;
    display: flex;
    justify-content: center;
}
selector .elementor-icon-list-item,
selector .elementor-icon-list-item a{
    flex-direction: column;
    padding-bottom: 0 !important;
}
selector .elementor-icon-list-item a{
    -webkit-tap-highlight-color: transparent;
}
selector .elementor-icon-list-text{
    position: relative;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
}
selector .elementor-icon-list-text:after{
    content: "";
    position: absolute;
    inset: 0;
    background: var(--hover-background-color);
    z-index: -1;
    transform: scaleX(0);
    transform-origin: right;
    transition: transform calc(var(--hover-background-speed)*1ms) cubic-bezier(1, 0, 0.5, 1);
}
selector .elementor-icon-list-item:hover .elementor-icon-list-text:after{
    transform: scaleX(100%);
    transform-origin: left;
}
selector .elementor-icon-list-item span.word{
    overflow: hidden;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
}
selector .elementor-icon-list-item span.word-up,
selector .elementor-icon-list-item span.word-down{
    display: flex;
    flex-direction: row;
}
selector .elementor-icon-list-item span.letter{
    display: inline-block;
    transition: transform 0.4s ease calc(var(--letter-delay));
}
selector .elementor-icon-list-item:hover span.letter{
    transform: translateY(-100%);
}

 

JavaScript Code Snippet for Social Menu with Stagger Animation:

<script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
<script>
if(!MDWNonce101){
    
var MDWNonce101 = true

$(document).ready(function() {

// Stagger Menu Hover effect

$('.mdw-stagger-menu').each(function(){

    var $this = $(this),
        items = '.elementor-icon-list-text',
        letterTime = ($this.css('--letter-animation-difference') ? parseInt($this.css('--letter-animation-difference').trim()) : 40)/1000

    $this.find(items).each(function () {

        var words = $(this).text().split(' ')

        $(this).html('')

        for (var i = 0; i < words.length; i++) {
            var newSpan = $('<span>').addClass('word'),
                wordUp = $('<span>').addClass('word-up'),
                wordDown = $('<span>').addClass('word-down'),
                letters = words[i].split('')
            
            for (var j = 0; j < letters.length; j++) {
                wordUp.append($('<span>').addClass('letter').text(letters[j]))
            }

            for (j = 0; j < letters.length; j++) {
                wordDown.append($('<span>').addClass('letter').text(letters[j]))
            }

            newSpan.append(wordUp)
            newSpan.append(wordDown)

            $(this).append(newSpan)

            if( i < words.length - 1 ) { $(this).append('&nbsp;') }
        }

        $(this).find('.word').each(function(){
            $(this).outerHeight($(this).children().eq(0).outerHeight())
        })
        $(this).find('.word-up .letter').each(function(i){
            $(this).css('--letter-delay', `${0.1+ i * letterTime}s`)
        })
        $(this).find('.word-down .letter').each(function(i){
            $(this).css('--letter-delay', `${0.1+ i * letterTime}s`)
        })        
    })
})

function setWordHeight(){
    $('.mdw-stagger-menu .word').each(function(){
        $(this).outerHeight($(this).children().eq(0).outerHeight())
    })
}

$(window).on('resize', function(){
    setWordHeight()
    setTimeout( setWordHeight, 500 )
})


// Mousemove Eye Effect

$('body').on('mousemove', function(e) {

    var eye = $('.mdw-eye-effect'),
        mouseX = e.pageX,
        mouseY = e.pageY

    eye.each(function(){

        var $this = $(this),
        circleX = $this.offset().left + $this.width() / 2,
        circleY = $this.offset().top + $this.height() / 2,
        angle = Math.atan2(circleY - mouseY, circleX - mouseX) * (180 / Math.PI)

        $this.find('.e-con, .e-container').css('transform', `rotate(${angle}deg)`)
    })
})

})
}
</script>

 

CSS Code Snippet on Container (mdw-stagger-menu):

selector{
    pointer-events: none;
}
selector .e-con,
selector .e-container{
    transition: none;
}
@media (max-width: 767px){
selector .elementor-widget-divider {
    --divider-border-width: var(--container-widget-width,30px) !important;
}
}