Animated GIFs

1
Animated GIFs
2
Animated GIF

• One image that contains a sequence of images or
  frames.
• Each frame varies slightly from the preceding
  frame, creating the illusion of movement.
• The GIF file has instructions or settings that
  describe how the animation plays

3
Animated GIFs

• No extra programming knowledge is required
• Place an animated GIF into an html document
• The animation is part of the GIF file format
• Supported by all major browsers

4
GIF Animation tools

• Standalone Utilities
• Graphic tools with animation utilities
• Easy to use
• Automatic frame generation
• Tweening
• The process of creating transitional image states
  between frames
• Automatically add or modify a series of frames
  between two existing frames
• Significantly reduces the time required to create
  animations

5
Animatin Settngs

• Frame delay
• Adjusts the amount of time between frames
• Looping
• Specifies the of times the animation repeats
• Disposal Method
• Instructs what to do with the previous frame

6
Responsible Animation

• Animations can distract from content
• Avoid multiple animations on one page
• Avoid animations on text-heavy pages that require
  concentration to read.
• Experiment with timing and looping when creating
  your animation.
• Animations should support your sites message and
  purpose
• Is the extra bandwidth needed for the animation
  really adding value to your message?