Animated Tiles

Animated Tiles for the Practice Fusion Home Page

For my employer, I was tasked with the development of an update to the home page. I worked closely with a designer and a product manager to produce the new home page in just under three weeks.

The design called for an update to existing page elements as well as new elements that would reveal information about Practice Fusion to the site visitor in an esthetically pleasing and fun way.

Although Practice Fusion’s website is built on WordPress, the home page was broken out as a separate page for SEO purposes. This allowed me to inline much of the new CSS and Javascript as a single-file unit with the HTML.

Design Challenge

Our designer chose to encapsulate seven marketing messages in a grid of interactive panels or “tiles”. Each tile was similar in design and behavior and differed only in content (with the exception of the first tile which was to be twice as tall as the other six tiles.) The tiles would conform to the following criteria:

Tiles reveal hidden information by use of a “window shade” technique. However, each tile would have two animating elements, one up and one down. The final position of the animating element would reveal the hidden marketing message.
The tiles would need to open and close by clicking anywhere within the tile.
Only one tile can be open at a time. If a tile is already open, clicking it will close that tile OR clicking another tile will close it and open the newly clicked tile simultaneously.
The tiles must be responsive, that is, at certain narrow breakpoints the tiles would rearrange to a vertical stack.
On mobile devices, the tile would present new behaviors, layout and imagery appropriate for mobile display and interaction.
Each tile would feature an indicator arrow that points down when closed and up when hovered over or open.

The page also featured other interactive elements such as a messaging slider. These were easily accomplished via jQuery plugins.

I was provided with mockups from our designer produced in Sketch and delivered online via Zeplin. This arrangement allowed me rapid access to color values and sizes for page elements. Also, as updates were incorporated into the design (from stakeholders) over the course of the project, I was able to easily access the updated files through a web browser.

Moving Pictures

The design of the tiles called for the open state to be taller than the closed state and for the tiles to push other page elements down when opening and up when closing, This can expanding rectangle can be thought of as the “viewport” for the two sliding elements contained in the tile. I chose to use jQuery to animate the resizing of the viewport as increasing and decreasing the actual height of the DOM element would leverage the browser’s ability to automatically adjust the placement of the other elements on the page.

To move the two interior sliding elements, I decided to use CSS 2D transforms so that I could precisely control the animation speed and the final placement of the elements in both open and closed positions.

The content of each tile was different and was continually updated over the course of the project by the marketing team. Consequently, each tile had a different open height. Because the tiles were similar in most respects I chose to create a master Tile creation object in Javascript and make each tile an instance of the master Tile object. Each Tile object was instantiated with certain constant properties for size (such as initial height) and variable properties for others such as open height (which varied by content.)

Go to the Head of the Class

Because each tile needed a separate, unique animation class to control the upward and downward motion of the two sliding elements, each Tile object generated it’s own style tag for the necessary 2D transform and appended the tag to the <head> element of the page upon instantiation. This allowed me to easily account for vendor-specific animation class names to support older browsers.

Each tile object need to respond appropriately to a click event. If the tile was closed, it need to open and vice versa. Additionally, if another tile were open that tile would need to be close simultaneously with the new tile opening. These opening, closing and state checking events were handled by a click-handling method assigned to each Tile object.

The animation and interior placement of the tile content had to be independent of tile’s position on the page as responsiveness was a key requirement. Additionally, the images and behavior of the sliding content of the tiles would need to be different for mobile than for desktop. This required additional size properties for each Tile for the slide travel distance and open and closed sizes of the tiles as well as the standard style changes assigned by media query.

Launched and Liked

The final page proved to be a great success and has been instrumental in driving increased page views by over 10 percent in the first month alone. Additionally, I was challenged to expand my understanding of object-oriented Javascript without the need of a framework. All and all, quite a success.