Animations

When you choose to create an animation, as well as the Style Editor panel, you will also see the Timeline.

OK, this is where things get a bit more interesting. The Timeline allows you to set styles onto individual keyframes, and by setting different values on different keyframes, you create animations.

When you create a new animation, one single keyframe is automatically inserted at position 1. You can move (drag and drop) this keyframe further along the timeline if you wish.

Any styles you create will initially be set on this keyframe. To move to a different keyframe, just click anywhere on the ruler. When you create more styles, they will be applied to that keyframe (a new keyframe is automatically added if there is not one at that position). Once you have 2 (or more) keyframes with different style values, you have an animation.

When you click a marker, the editor initially shows the styles at the first keyframe, if there is more than one. Please remember that if your animation starts with the element off-screen or with zero opacity, you won’t see it until you move to a keyframe where the element is actually visible.

The Timeline and setting style values

This may seem confusing at first, but is intuitive when you are using the Timeline. So feel free to skip this part for now.
When you create a new keyframe or set a style value anywhere for the first time, the new value is applied to the keyframe you are currently ‘at’, and also to all following keyframes. This overwrites any existing value that may be set in one of the site stylesheets. Any preceding keyframes get the stylesheet value, if one is available, and if not then all keyframes get the new value. So where a stylesheet value is available, it will be used for all keyframes up to the one you are currently at. If you are at the first keyframe, then all keyframes get the new value, of course.

Once a style value is set, then whenever you change it the new value will only be applied to the keyframe you are currently at. Once you have created 2 or more keyframes, you cannot change the style values on more than one keyframe at a time.

Where a style value changes from one keyframe to the next, a ‘tween’ will be generated automatically to blend the style from one keyframe to the other. This only happens for styles which can be animated; those which cannot have a little ‘no entry’ symbol next to them in the Styles panel. Where you see this symbol, it means that the same value will always be applied to all keyframes, automatically. Only numeric values and colors can be animated; things in pull-down boxes cannot, which includes units (even though they don’t have the no-entry symbol next to them).

Guide to the Timeline

Menu button

This opens the Timeline menu:

The menu has the following options:

Set timeline length: this adds or removes Keyframes. You might want to add more keyframes to create a longer animation, or remove some to truncate the timeline.

Set timing function: sets the easing for the animation.

Set FPS: this sets the playback speed (frames per second). If you reduce the FPS, playback will be slower and if you increase FPS, playback will be faster. The default speed is 24. If you set a very low FPS, playback may not be smooth in the editor, but the end-user animation will be smooth.

Set Animation loop: makes the animation loop continually (or not).

Set 3D perspective: sets the amount 3D objects shrink into the distance. As mentioned earlier, this is dependant on the element type and may not always have an effect.

Dock Styles Panel: If you accidentally drag the styles panel off the screen, use this to return it to the default, docked position.

Animation name

You can just type the name of the animation in here

Save status

When the animation is saving, this will change to a ‘disk’ icon (remember those?), then back to ‘A’ for animation (or ‘T’ for transition, if you are doing one of those)

Play / stop button

Click to play the animation, click again to pause anywhere along the timeline

Ruler

Shows the individual keyframes, numbered – the large numbers are seconds, the small ones are divisions. The default FPS is 24 so initially you have one large number every 24 frames, i.e. 24 frames per second. Click anywhere on the ruler to move to another keyframe.

Empty keyframes

These are Keyframes with no styles applied.

Page element tag

This is the DOM tag for the currently selected element. Useful if you have multiple elements in a single animation (this feature will be available later).

Current playback position

The red bar, and the darker Ruler cell, indicates which keyframe is currently being displayed. Any style changes will be applied to this keyframe.

Tween

The dark blue bar covers all the keyframes between the first and last one which have styles applied. The long arrow indicates a ‘tween’ has been automatically created, to blend the changes as the animation plays.

Scrollbar

When you want to make a longer animation than will fit in the width of the timeline, scroll the keyframes.

Deleting keyframes

Right-click a keyframe to see the Clear keyframe option. You can also set a keyframe by right-clicking an empty one, although this is rather pointless unless set some styles on it.

Dragging keyframes

You can drag and drop keyframes anywhere on the timeline, to shorten or lengthen animations, or to reverse animation direction.

---

Transitions

These are basically 2 keyframe animations which play when the end user hovers the mouse over the page element. You can’t have more than 2 keyframes, apart from that they are created the same way as Animations.

The end-user experience:

The entire plugin only loads for editing styles. When you are not logged in, all the styles and animations are loaded directly from a CSS style sheet, with ‘no’ JavaScript. Actually, there is one tiny piece of JavaScript used to stop the animations from playing if they are outside the visible part of the page – once they scroll into view, they will play automatically.