Uncategorized

30 Photo Animations (Images and Media)

By Acty, November 6, 2013

The Live Preview shows best what Fig is capable of.

All animations and styles can be combined to create a unique experience for your image galleries.

Use the Fig Configurator to quickly generate Fig HTML snippets ready to be copy and pasted to your website.

The package contains the original source files so if you’re a webdeveloper you can tweak the library to your own liking.

Plug & Play, no other libraries needed.

Animations

  • 7 load animations. Animate a photo in to view in six different ways, pick from zooming in or out, fading, or rotating in various directions.
  • 8 hover animations. Bring a certain area of the photo in to focus on hover or move the photo around when the user interacts with it.
  • 9 caption animations. Slide, fade or push the caption into view from various directions.
  • 6 text animations. Animate the caption text into view via fading, sliding or stacking.

Styles

  • 4 caption fill effects. 3 blur levels and a dreamy soft setting.
  • 2 caption colors. bright and dark.
  • 3 frame border widths.
  • 2 border colors. bright and dark.
  • 5 caption positions. Above, below, top, bottom or cover.

Techniques

  • HTML5 or HTML4 setup.
  • Links can be put in or around the element, making the entire picture clickable.
  • Delayed image loading, images will load and animate when the scroll into view.
  • Sequence grouping and loading, group images together to animate their load animations in sequence.

Browsers

  • Chrome
  • Safari
  • Firefox
  • Opera
  • iOS 6+
  • IE10
  • IE9 (without animations)
  • IE8 (without animations, with static captions)

Expected to work on Android 4.0+ as well but for now untested, if you have any doubts check the Live Preview to be sure before buying.

Photos

The photos used in the Live Preview are copyrighted under creative commons license Attribution 2.0 Generic.