An Introduction to Animation Jeremy Shafer Department of MIS Fox School of Business Temple University

Agenda A little word of caution Options for introducing animation into our web applications Some best practices for animations Our jQuery toolbox for animations jQuery’s .animate() method Not every animation is obvious… where does animation fit in to our larger objectives for the class?

ANIMATE YOU SHOULD! A word of caution CAN BECAUSE JUST YOU DOESN’T MEAN… YOU SHOULD!

Options for animation in web applications HTML5 increased support for animation … but there’s really no HTML-only option. You need CSS, JavaScript/jQuery, or both. HTML CSS JavaScript CSS – all on its own – has events that fire when an element receives focus, or is hovered over. JavaScript and jQuery have animation options. Some options are totally separate from CSS. Others manipulate CSS to implement the effect. Let’s see some jQuery animation (see joke.zip)

Best practices for animation in applications Use a good CSS template: For real projects, it is advisable to start with a robust HTML/CSS template. A good template will include the CSS animations you need for menus and simple interactive elements. You *probably* don’t need to add any CSS animations beyond that. Keep user experience in mind: Consider how subtle animations can be used to improve user experience. Add those sparingly. Don’t “hack” the template. Instead use jQuery to implement those. Use “complex” animations only when necessary: If your animate is more than a few steps, and requires the coordination of multiple events and/or conditional statements, you should ask yourself: “Is this animation necessary? What core functionality is it related to? What key objective of the project is it related to?”

Our jQuery toolbox…. That's new… jQuery Method Notes .addClass() We've already seen this method! But, if you want the full documentation, it can be found here: https://api.jquery.com/addclass/ .toggleClass() We've already seen this method! But, if you want the full documentation, it can be found here: https://api.jquery.com/toggleclass/ .removeClass() Ok… technically you have not seen this yet, but, what do you think it does? Full documentation found here: https://api.jquery.com/removeclass/ .show() We've already seen this method! But, if you want the full documentation, it can be found here: https://api.jquery.com/show .hide() We've already seen this method! But, if you want the full documentation, it can be found here: https://api.jquery.com/hide .slideToggle() This shows or hides the matched elements with a sliding motion. That’s pretty neat! See slidetoggle.zip for an example and https://api.jquery.com/slidetoggle for full documentation. .animate() That's new…

$("#somelement").animate({property: value}, [speed, callback] ); jQuery animate Basic syntax: $("#somelement").animate({property: value}, [speed, callback] ); This is the selector of the thing we want to animate. Usually just one thing at a time, but not necessarily… This square brackets “[“ and “]” here are not part of the command. They are just a notation, indicating that speed and callback are optional. That’s good. We’ll cover callback functions another day…

jQuery animate (simplified) Basic (simplified) syntax: $("#somelement").animate({property: value},400); This represents the CSS property to animate. Put the CSS property name in quotes. This is the speed of the animation in milliseconds. 400 is the default. This value is a string as well. It contains a numeric value, and a unit of measure. For example: “10px” or “50%” or “2em” Tip! You can also use an operators here to manipulate current CSS values. += will add to the current value. The -= operator will subtract.

The big picture Animation effects allow our application’s interface to change right before our eyes. Those changes do not require us to reach out to a URL and reload a whole new copy of a page in response to every user action. Instead, content can be pulled down once, and show/hidden/animated as needed. This idea of bundling a lot of content into a single page is known as a Single Page Architecture (SPA) … an idea that we will revisit in the future!

It’s time for an experiment! Download mis2402template.zip and set up the template in your mis2402 workspace Explore how link navigation is taking place. Note that clicking on a navigation link does not load a new page. Instead, specific divs are shown / hidden. Notice how we change the class of our naivation <li> tags to “active” to indicate to indicate the user’s last navigation choice. Notice how .animate use used to emphasize the continue button on content div four. Your challenge is going to be to add a link 5 and a carousel of images similar to what is found in your textbook (see pages 282, 283)