Mind-Blowing Elementor Trick – Animated Images Entrance Effects Never Before!

				
					<script>
// to make gifs from video - https://ezgif.com/
// to get free videos to convert to gifs - https://www.vecteezy.com/

(function($) {
    $(document).ready(function() {
        const $maskImages = $('.custom-viewport-mask-image');
        
        
        
        
        // Initial setup to make all images invisible
        $maskImages.css({
            'opacity': '0',
            'transition': 'opacity 0.3s ease'
        });
        
        const observer = new IntersectionObserver((entries) => {
            entries.forEach(entry => {
                if (entry.isIntersecting) {
                    const $target = $(entry.target);
                    const $elementorElement = $target.find('.elementor-widget-container');
                    // Make this specific image visible
                    $target.css('opacity', '1');
                    
                                   const backgroundImage = $elementorElement.css('background-image');
                    
                                  if (backgroundImage && backgroundImage !== 'none') {
                        let cleanUrl = backgroundImage.replace(/^url\(["']?/, '').replace(/["']?\)$/, '');
                 cleanUrl = cleanUrl + `?t=${Date.now()}`;
                        
                
                    $target.css({
                        'mask-image': `url(${cleanUrl})`,
                        'mask-size': 'cover',
                        'mask-repeat': 'no-repeat',
                        'mask-position': 'center',
                        
                    });
                    
                    
                    }
                  
                    observer.unobserve(entry.target);
                }
            });
        }, {
            threshold: 0.2
        });

        // Observe each image individually
        $maskImages.each(function() {
            observer.observe(this);
        });
    });
})(jQuery);
</script>