Animations

Animations change layer properties over time. Animatable properties are a layer's position, scale, rotation or opacity (transparency). Certain animatable properties are specific to some layers, such as the fontsize for text layers. Animations are rendered over the duration specified in the <animation> tag.

Animatiable properties

Layer Type	Property	Value Type
All Layers	position	Point
All Layers	scale	Point (0..1)
All Layers	rotation	Number
All Layers	anchor	Point
All Layers	opacity	Number (0..1)
<solid>, <text>	color	Color
<text>	fontsize	Number

Motion Blur

Motion blur is the apparent streaking of rapidly moving objects in a still image or a sequence of images such as a movie or animation. It results when the image being recorded changes during the recording of a single exposure, either due to rapid movement or long exposure. To simulate motion blur in animations, set the motionblur attribute to a value larger than 0 but try to keep the value small (less than 5) because it is computational expensive, resulting in longer render times

Easing

Nothing in nature moves linearly from one point to another. In reality, things tend to accelerate or decelerate as they move. In classic animation, the term for motion that starts slowly and accelerates is "slow in," and for motion that starts quickly and decelerates is "slow out." The terminology most commonly used on the web for these are “ease in” and “ease out,” respectively. Sometimes the two are combined, which is called "ease in out." Easing, then, is really the process of making the animation less severe or pronounced.

You specify easing with the easein and easeout attributes in <animation> and <transition> tags. The attributes can either be true, false or define two floating values in the range 0..1 and denote the speed and influence of the starting or ending keyframe. Default speed/influence values are "0.333, 0" for enabled easing and "0, 0" for disabled easings.

Linear animations

Animations without any kind of easing are referred to as linear. As time moves along, the value increases in equal amounts. With linear motion, things tend to feel robotic and unnatural, and this is something that users find jarring. Generally speaking, you should avoid linear motion.

Ease-out animations

Easing out causes the animation to start more quickly than linear ones, and it also has deceleration at the end. Easing out is typically the best for user feedback, because the fast start gives your animations a feeling of responsiveness while still allowing for a natural slowdown at the end.

Ease-in animations

Ease-in animations start slowly and end fast, which is the opposite of ease-out animations. This kind of animation is like a heavy stone falling, where it starts slowly and hits the ground quickly with a deadening thump. From an interaction point of view, however, ease-ins can feel a little unusual because of their abrupt end; things that move in the real world tend to decelerate rather than simply stopping suddenly. Ease-ins also have the detrimental effect of feeling sluggish when starting.

Ease-in-out animations

Easing both in and out is akin to a car accelerating and decelerating and, used judiciously, can provide a more dramatic effect than just easing out. Do not use an overly long animation duration, because of the sluggishness of an ease-in start to the animation. Something in the range of 300-500ms is typically suitable, but the exact number depends heavily on the feel of your project. That said, because of the slow start, fast middle, and slow end, there is increased contrast in the animation, which can be quite satisfying for users.

Examples

Slide-in / Fade-in with Pre-defined Animations

<movie width="640" height="360">
    <scene>
        <video url="https://cdn.impossible.io/xml/005.mov"/>
        <text size="60" color="#ffff00" content="Slide in while fading in">
            <animation type="slidein" duration="0.9s"/>
            <animation type="fadein" duration="0.9s"/>
        </text>
    </scene>
</movie>

Drop-in and Soft Bounce Back with Custom Animations and Motion Blur

<movie width="640" height="360">
    <scene duration="2s">
        <video url="https://cdn.impossible.io/xml/005.mov"/>
        <text size="30" color="#ffff00" content="Drop-in and Soft Bounce Back" xalign="center">
            <animation type="custom" duration="30" motionblur="3">
                <keyframe time="0" position="0, -200"/>
                <keyframe time="29" position="0, 0" easeout="-0.4, 1"/>
            </animation>
        </text>
    </scene>
</movie>