Custom Transitions

Generally, transitions between scenes are created by shortening the outgoing and incomimg scenes and joining them with a transition scene that defines the visual behavior of the transition. To create a custom transition you need to define that behavior.

The visual content of the outgoing and incoming scenes can be referenced via the <layer ref="..."> elements.

Example

The following examples creates a custom transition in which the new scene scales and rotates into view from the center of the old scene.

<movie width="640" height="360" framerate="25/1">
    <scene duration="100" id="s1">
        <video url="https://cdn.impossible.io/xml/003.mov" audio="false" />
    </scene>

    <transition type="custom" duration="25">
        <scene>
            <layer ref="s1" overlap="-25"/>
            <layer ref="s2" >
                <animation duration="25">
                    <key time="0" scale="0, 0" rotation="0" />
                    <key time="24" scale="1, 1" rotation="360" />
                </animation>
            </layer>
        </scene>
    </transition>
    
    <scene duration="100" id="s2">
        <video url="https://cdn.impossible.io/xml/004.mov" audio="false" />
    </scene>
</movie>