Animated Rows

The ThemeKit Reveal Image Row widget has options for inserting two or four images with captions and optional image links. There are no preset animations so the user can create custom effects unlike any other.
While a knowledge CSS animation properties and what they do helps but is by no means essential. Even the rookie web designer can create new and exciting effects using a few slider controls and a couple of. number boxes.
This page is set up to demo the animations and should definitely NOT be consider good design pratice. Animations are really useful to draw attention to items but, if over used, create confusion and distraction.

Settings

In the above example the scale slider is set to maximum. The rotation is on the X-xis and is set to 90°. The reverse rotation checkbox is checked to make the angle a negative value.
The grid has 15px top padding, 10px left/right padding and the bottom padding is set to 20px to allow for the bottom box shadow.
The grid column and grid row gaps are set to 20px. Increasing the padding and the grid gap helps to create space in the layout and allows the visitor to focus on the individual items.
The box shadow helps to lift the image off the canvas and the 1px border helps to sharpen up and define its edges.
In the example below the scale slider is set to maximum and the images are translated on both the X and the Y-axis.
A positive translation on the X-axis brings it in from the right and a positive translation on the Y-axis brings it up from below. Together they create a swooping up and in effect.

Settings

In the four image example above the scale slider is set to zero to give a genie effect. Only two other controls are used - rotate X set to 40° +ve and rotate Z set to 22° +ve.

Custom Animations

The ThemeKit Reveal Image Row widget creates the opportunity to leave visitors with a unique impression by allowing custom animations that are different from all the rest.
Layout
The grid layout can insert either two or four images. When four images are used the last two move to a second row and devices with a screen width less than the breakpoint. On mobile phones in portrait mode the images stack vertically.
Images
The image file size doesn't need to be any wider than about 600px in most case. The images can have a border and/or a bottom box shadow.
Caption
The caption is in the HTML5 <figcaption> element and covers the image with centered text above the break point and can appear on hover. The caption can run to two or more lines if required.
Below the break point the captions are centered at the bottom.
Links
The images can be hyperlinks to open internal and/or external pages and have a new window option.
The link icon has the same color and background as the caption and shows on page load when viewed on mobile devices so that visitors know the image is a link.
Grid
The grid has controls for adjusting the column and the row gap, top padding, left and right padding and bottom padding. The bottom padding control value can be increased to make space for the bottom box shadow.

Animation Controls

There are three basic controls - rotate, translate and scale.
The object can be rotated on the X, Y and Z-axis using the axis controls.
Translate moves the object from its current position and there are controls to translate on the X and the Y-axis. Negative values of X move it to the left and negative values of Y move it up.
Reducing the scale at the start of the animation will cause it to scale up if used on its own. Using it in combination with the other controls will add a little zip and zing to the effect.

Getting Started

CSS animation uses two main properties - transition and transform. A transition changes property values smoothly over time. A transform moves, rotates, scales, and skews elements.
The easiest way to learn what the various properties do is to start with a two image row and try out each property on its own before attempting to combine them.

• Rotate X in +/- degrees
• Rotate Y in +/- degrees
• Rotate Z in +/- degrees
• Translate X px value +/-
• Translate Y px value +/-
• Scale - a scale value for zero upwards
• Animation Time - in milliseconds