Transition¶

Overview¶

An animation that will animate one object (usually a Node) out, and another in.

@author Jonathan Olson <jonathan.olson@colorado.edu>

Class Transition¶

import { Transition } from 'scenerystack/twixt';

Constructor¶

new Transition( fromNode : Node | null, toNode : Node | null, config : TransitionOptions )¶

Instance Methods¶

Static Methods¶

slideLeft( bounds : Bounds2, fromNode : Node | null, toNode : Node | null, options? : SlideTransitionOptions ) : Transition¶

Creates an animation that slides the fromNode out to the left (and the toNode in from the right).

@param bounds @param fromNode @param toNode @param [options] - Usually specify duration, easing, or other Animation options.

slideRight( bounds : Bounds2, fromNode : Node | null, toNode : Node | null, options? : SlideTransitionOptions ) : Transition¶

Creates an animation that slides the fromNode out to the right (and the toNode in from the left).

@param bounds @param fromNode @param toNode @param [options] - Usually specify duration, easing, or other Animation options.

slideUp( bounds : Bounds2, fromNode : Node | null, toNode : Node | null, options? : SlideTransitionOptions ) : Transition¶

Creates an animation that slides the fromNode out to the top (and the toNode in from the bottom).

@param bounds @param fromNode @param toNode @param [options] - Usually specify duration, easing, or other Animation options.

slideDown( bounds : Bounds2, fromNode : Node | null, toNode : Node | null, options? : SlideTransitionOptions ) : Transition¶

Creates an animation that slides the fromNode out to the bottom (and the toNode in from the top).

@param bounds @param fromNode @param toNode @param [options] - Usually specify duration, easing, or other Animation options.

wipeLeft( bounds : Bounds2, fromNode : Node | null, toNode : Node | null, options? : WipeTransitionOptions ) : Transition¶

Creates a transition that wipes across the screen, moving to the left.

@param bounds @param fromNode @param toNode @param [options] - Usually specify duration, easing, or other Animation options.

wipeRight( bounds : Bounds2, fromNode : Node | null, toNode : Node | null, options? : WipeTransitionOptions ) : Transition¶

Creates a transition that wipes across the screen, moving to the right.

@param bounds @param fromNode @param toNode @param [options] - Usually specify duration, easing, or other Animation options.

wipeUp( bounds : Bounds2, fromNode : Node | null, toNode : Node | null, options? : WipeTransitionOptions ) : Transition¶

Creates a transition that wipes across the screen, moving up.

@param bounds @param fromNode @param toNode @param [options] - Usually specify duration, easing, or other Animation options.

wipeDown( bounds : Bounds2, fromNode : Node | null, toNode : Node | null, options? : WipeTransitionOptions ) : Transition¶

Creates a transition that wipes across the screen, moving down.

@param bounds @param fromNode @param toNode @param [options] - Usually specify duration, easing, or other Animation options.

dissolve( fromNode : Node | null, toNode : Node | null, providedOptions? : DissolveTransitionOptions ) : Transition¶

Creates a transition that fades from fromNode to toNode by varying the opacity of both.

@param fromNode @param toNode @param [providedOptions] - Usually specify duration, easing, or other Animation options.

Type DissolveTransitionOptions¶

import type { DissolveTransitionOptions } from 'scenerystack/twixt';

PartialTransitionOptions<number> & DissolveTransitionSelfOptions

Type PartialTransitionOptions¶

import type { PartialTransitionOptions } from 'scenerystack/twixt';

StrictOmit<SelfOptions<[ T ]>, "fromTargets" | "toTargets" | "resetNode"> & AnimationOptions<unknown, unknown, [ T ], [ Node ]>

Type SlideTransitionOptions¶

import type { SlideTransitionOptions } from 'scenerystack/twixt';

PartialTransitionOptions<number>

Type TransitionOptions¶

import type { TransitionOptions } from 'scenerystack/twixt';

• fromTargets: { [K in keyof TargetTypes]: AnimationTargetOptions<TargetTypes[K], Node> }
  A list of partial configurations that will individually be passed to the targets for an Animation (and thus to AnimationTarget). They will be combined with object: node and options.targetOptions to create the Animation. See Animation's targets parameter for more information
• toTargets: { [K in keyof TargetTypes]: AnimationTargetOptions<TargetTypes[K], Node> }
• resetNode: ( node: Node ) => void
  resets the animated parameter(s) to their default values.
• targetOptions?: AnimationTargetOptions<unknown, Node>
• & AnimationOptions<SelfType, SelfObjectType, TargetTypes, TargetObjectTypes>

Type WipeTransitionOptions¶

import type { WipeTransitionOptions } from 'scenerystack/twixt';

PartialTransitionOptions<Shape>

Source Code¶

See the source for Transition.ts in the twixt repository.