Recently I accepted a request from my client to animate her logo. You can see the result at the website https://minddivers.com. This is a WordPress website built with the Divi theme by someone else. My role is to maintain and improve it. Here are a few of the challenges I faced and how I solved them, from creation to display.

Some of the more popular ways to create animations for websites includes JavaScript, an SVG file, or a movie file. The person I hired to create the animation wasn’t familiar with how to do what was needed in JavaScript, and WordPress doesn’t have great support for SVG files, so we went with the creation of a .mp4 file.

The logo being animated has a circular area with a sketch of ocean waves behind a scuba diver’s head positioned just above the water line. We wanted the waves to animate, washing over the scuba diver who maintains the head above water despite the waves. The entire animation needed to come in under 5 seconds. The shorter the better.

The animation talent I hired took the Adobe Illustrator file of the logo and created the needed animation at the needed screen resolution and the needed file size. The problem was that the rendering process changed the blue background slightly, causing a mismatch with the blue background of the website’s header. This created a blue square of a different color to surround the logo. One of the options not available with an MP4 file is to make the file’s background transparent, which would have let the blue website header to show through. Instead we had to render out the movie until we got as close as possible to the blue we needed.

Then there was the issue of placing the movie in the header without triggering Divi to present player controls. We didn’t want any controls or movie player outline. We just wanted the movie to play once, automatically, each time the screen refreshes. The only option for that was to designate the movie as a background movie playing within the container (or div) next to the menu in the header. However, doing so caused the movie to loop endlessly. To fix that, I turned to Divi support who furnished me with some code for making this stop. That code is located Divi…Theme Options…Integration and looks like this:

<!-- Stop Header Logo Animation After One Iteration -->
<script>
(function($) {
    $(document).ready(function() {
        $('.stop_bg_video video').each(function() {
            $(this).removeAttr('loop');
            $(this).mediaelementplayer({
                autoRewind: false
            });
        });
	setTimeout(function(){
		$(window).trigger('resize');
	},500); 
    });
})(jQuery);
</script>

For this to work, the div containing the background movie needs to have a class of stop_bg_video.

I’m always looking to improve how I do things, which is why I’m researching how to get SVG files to work in WordPress instead. The file sizes are very small and there are no background colors to worry about because you can have transparent backgrounds. I’ll write another article about that once I’ve made progress.