Elementor WOW Entrance Animation/Effect with Image and Text

 

 

JavaScript code snippet for WOW Entrance Animation:

<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script>

var transitionDelay = 2000

var $ = jQuery
$(document).ready(function(){

$('.drifting-text .elementor-heading-title').html(function (i, html) {
    var chars = $.trim(html).split(' '),
        html = ''
        
    chars.forEach(function(word){

        var w = ''
        word.split('').forEach(function(letter){
            w += '<span>' + letter + '</span>'
        })
        html += '<span>' + w + '</span> '
    })
    return html.trim()
})

$('.drifting-text .elementor-heading-title span span').each(function(){
    $(this).css('transition-delay', transitionDelay + 'ms')
    transitionDelay += 50
})
})

$(window).on('load', function(){
    $('body').addClass('loaded')
})

</script>

 

CSS code snippet on Main Container:

/* Middle Image Animation */

selector{
    animation-name: none;
    visibility: visible;
}
selector .middle-image img{
    transform: scale(1.5);
    transition: all 2s linear;
    will-change: transform;
}
body.loaded selector.animated .middle-image img{
    transform: scale(1.02);
}
selector .middle-image .elementor-widget-container{
    overflow: hidden;
    transform: scale(2);
    clip-path: polygon(0 100%, 100% 100%, 100% 100%, 0% 100%);
    transition: all 2s ease-in-out;
    will-change: transform, clip-path;
}
body.loaded selector.animated .middle-image .elementor-widget-container{
    transform: scale(1);
    clip-path: polygon(0 0, 100% 0, 100% 100%, 0% 100%);
}

/* Side Image Animation */

selector:not(.animated) .elementor-widget-image:not(.middle-image) .elementor-widget-container,
body:not(.loaded) selector .elementor-widget-image:not(.middle-image) .elementor-widget-container{
    opacity: 0;
    transform: scale(1);
    will-change: opacity, transform;
}
body selector .elementor-widget-image:not(.middle-image) .elementor-widget-container{
    opacity: 1;
    transition: all 0.7s ease-in-out 1.8s;
}

/* Text Animation */

selector:not(.animated) .drifting-text,
body:not(.loaded) selector .drifting-text{
    opacity: 0;
}
selector .drifting-text span{
    display: inline-block;
}
selector .drifting-text span span{
    opacity: 0;
    transform: translateY(20px);
    transition: all 1s ease-in-out;
    will-change: opacity, transform;
}
body.loaded selector.animated .drifting-text span span{
    opacity: 1;
    transform: translateY(0);
}