ASI’s latest “Mocha” theme leverages animation on the home page as you can see here as you scroll down the page. This article describes CSS animation techniques.
Common examples of animated CSS include images swooping or fading in when you scroll down a page or a 3 line hamburger morphs into an “X” when it is clicked. Even a scroller of logos is readily doable with modern CSS. Although much of the CSS animation capability has been around for about 10 years, it seems to be coming into more widespread, heavy use in the last 2-3 years.
In this article we will cover some basic concepts you can use in your iMIS website using just some minor updates in your iMIS website theme. First, it is recommended that all changes to your iMIS website theme should be done in your own file. iMIS websites will automatically pick up all files with the .css extension that are saved in your “app_themes” folder. Since they load alphabetically it is recommended to name your file starting with “ZZ” to ensure your file loads last and takes precedent over the out of the box css files in your theme.
The Morphing Hamburger
In my first example, I will describe how to animate a hamburger menu to morph into an “X” on click as you can see on one of our client websites: https://www.aaf.org. The 2 main CSS properties to make this happen are “transform” property which tells the object to change it shape and “transition” is used to determine how the change will occur and how long the change will take. If you inspect the AAF website in Chrome and select the hamburger menu you can see the transition involves rotating the fist line 45 degrees and moving the Y axis of the lines. The second line rotates -45 degrees and the 3rd line disappears. The transition of .5s represents that it takes ½ a second to change or “morph” and the morphology method is “ease all” which means ease in and out. Pretty neat stuff and easy to do once you are familiar with CSS.
Scrolling Logos
The next example I will share is how you can create a scroller using only CSS. You can see an example of our iMIS client who has their premium business members placed into a logo scroller generated from IQA at the bottom of their homepage here: https://www.sirnet.org/. The properties used to make this happen are: “transform” and “animation”. The transform takes the value “translateX(100%)” to show items moving horizontal across the screen and the animation property takes values for a CSS “keyframes rule”, the number of seconds to make the move (how fast), the direction “linear” and for how long to keep repeating “infinite”.
For those of us who have been around for a while, animations like those described above used to require client-side JavaScript requiring more technical expertise. Adding some basic animation CSS knowledge is a great skill to have for webmasters who no longer need to write code to make it happen. Some great references if you want to learn more including: The World Wide Web Consortium and W3Schools page on CSS animations.
This week I migrated the new “Mocha” animations to another iMIS template in 3 easy steps. In our next edition I will provide instructions on how to put these animations into your current iMIS website.
