How To Use Website Animation

This is not only informative on how to do animations with examples but it is also my own little testing ground. This first one was simply creating a GIF at the link below for my logo. The only problem with using a GIF it will hurt your load time. This particular file is 400kb … the same image png file with no animation is only 20kb.

Online Logo Generator I used – https://www.textstudio.co/

Website animations are great to capture your audience’s attention. But you have to be careful in the use. Some animations work great on a desktop computer but do not work well on a mobile phone. Another thing to consider when using animations is that it requires much more code and can affect your website loading time. The average person spends only a few seconds waiting for the page to load before moving on to something more interesting. The website animation examples I am going to show you are supplied by the various WordPress plugins I am using.

• Neve – I am using the Neve WordPress theme which includes animations.
• Gutenberg Blocks and Template Library by Neve theme

Broken Image Assembly

This is an example of using animation with a graphic broken into pieces equally to complete a presentation. I found this neat little online tool to accomplish breaking the graphic first.
https://www.imgonline.com.ua/eng/cut-photo-into-pieces.php
Then I just used the built animations with Neve’s theme

I used the section block divided into 5 and put in each piece of my graphitic. I set the background on each section black for contrast on this example. As you can see the black background of the section shows where the photo caption goes. If you do not want to see that then set the background the same as the page. You could use other animations. If there are spaces between the images then set the “overall content width” of the section smaller.

Loading Animations – these come with the Neve WordPress theme

You can use these animations either with text or on images. I am going to add a SECTION and display the effects on text-only of one example. Each animation effect comes with various options. Since all the effects activate on the scroll I set the delay to 1 second and to slower so you have time to see them. If you want to see again refresh the page.

FLIP CARD ROLLOVER ANIMATION by OTTER

HERE YOU ADD TEXT

There are a lot more animations you can use but do not over do it.

SLIDE SHOW

VIDEO

Another popular trend is to use video. I have tried it but prefer not to because even the shortest video takes a few seconds to download. This is one I used for a construction website.