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

So if you follow along in the video, I refer to this blog post for you to enter code at certain points, so below is everything you will need!

Alternatively

You can download the complete template here

Some Mask Examples I Used In The Tutorial

Website to free videos to make into gifs

Online Gif Creator

The Following are the css class names I used in the tutorial:

				
					custom-viewport-mask-image

The Following code goes into the Slider Container (reboot-slider):

				
					<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>