Space Logo

The Motion Page

Overview

With this week's lesson, we learn how to use animation and JavaScript to add motion and interactivity to a page. This functionality can be created using CSS animations, transformations, jQuery, and even plain JavaScript. But while these can be used to create a pretty cool effects, they should be used sparingly. Having too many elements moving around can confuse your user and depending on what you are using, it can slow down your loading times. So, use your effects mindfully. The main three reasons you want to use motion are for a state change, for emphasis, and to reveal. For state changes, you can play small animations while something is loading or create a smooth transition when you toggle an element. To create emphasis, you can have an element shake to draw attention to it when the page loads or have elements slide in as you scroll down the page. To reveal something, you can use jQuery effects to slide visibility up and down or have information appear when you hover over an element. Below I have detailed some examples of what you can do as a developer.

I have used both JavaScript and CSS to create animations. The first and easiest method was using CSS to make my tabs slide up onto the screen. I found a plugin called Animate.css. It has a library of different animations that once connected to, you just have to apply classes to the elements. I used animate__slideInUp. I also used JavaScript to create some of the animations. I used a jQuery effect to fade in the tabs. I initially set their opacity to 0, and as it slides in, it fades to 100% opacity.

When you are using a mobile device, a nav with a lot of links can be a problem. Yes, you can shift them to a column layout, but depending on how many links you have, it can cover the top portion of your site. This is valuable real estate because you only have a few seconds to catch a user's interest. You want to collapse your menu so you can use that portion to be eye catching. You normally do that by using a hamburger menu to hide your menu, then click on it to reveal the links when you need them. The one I use on this page is a modified version of W3 Schools' Responsive Top Navigation. It uses a combination of JavaScript and CSS to collapse and open the menu.

You can create almost anything if you know the right combination of JavaScript and CSS. But there is no reason to reinvent the wheel. In web design, there are a lot of different elements that are used over and over. And while it is good to have a strong understanding of how code works, you want to work smarter not harder. An amazing resource for commonly used elements is jQuery Ui. These tabs that you are using are jQuery Tabs. I just created a link to their CSS and a couple jQuery libraries. Then I added the JavaScript and the HTML they told me to add, modified the CSS a tad, and I ended up with fully functional tabs.

For my free choice, I chose to animate an SVG. LottieFiles is a really great tool to easily add motion graphics to a page. But unfortunately, they put quite a bit of their functionality behind a pay wall. SVGator is another cool tool, but once again, paywalls, and watermarks. Luckily, after some digging, I found an awesome tool called Bodymovin. It is an extension that can be added to After Effects. I create the animation that I want to create, then Bodymovin can export it into a variety of formats, including JSON. I just add the JSON file to my images folder, then in the HTML, link to a Bodymovin Library, add a little JavaScript, and tada, I have an animated SVG. Now the downside is I have to run my file on a local server to see the animation but that's easy enough to do with Dreamweaver's preview functionality and a Live Server Preview extension on Visual Studio Code. You can see my animation by the overview above. I made the graphics in Illustrator, animated it in After Effects, and used the Bodymovin extension to export it so I can use it in the code.