Animated transitions for Feathers UI view navigators

A transition animates two views of a navigator component when it switches between them. Transitions help establish a visual relationship between these two views, such as hierarchy or proximity — providing extra context to improve the user experience. They also provide a bit of personality and polish to your project.

Feathers UI offers a number of classes to quickly create common transition animations. All view navigators support custom transitions too.

Built-in transitions

Color fade

Creates animated transitions for view navigators that fade a display object to a solid color.

var transition = new ColorFadeTransitionBuilder()
    .setColor(0x000000) // range: 0x000000 to 0xFFFFFF
    .setDuration(1.5) // in seconds
    .setEase(Expo.easeOut) // Actuate easing function
    .build();

See API Reference: ColorFadeTransitionBuilder for more details.

Cover

Creates animated transitions for view navigators that slide a new display object into view by animating the x and y properties, while covering an existing display object that remains stationary below. The display object may slide up, right, down, or left (or at an arbitrary angle).

var transition = new CoverTransitionBuilder()
    .setAngle(180.0) // range: 0.0 to 360.0
    .setDuration(1.5) // in seconds
    .setEase(Expo.easeOut) // Actuate easing function
    .build();

Optionally, you can replace the call to setAngle(Float) with a call to one of four convenience functions for common angles. Use setRight() for 0 degrees, setUp() for 90 degrees, setLeft() for 180 degrees, or setDown() for 270 degrees.

See API Reference: CoverTransitionBuilder for more details.

Fade

Creates animated transitions for view navigators that modify the opacity of one or both views in transition. Animates the alpha property of a display object to make it fade in or out.

var transition = new FadeTransitionBuilder()
    .setFadeIn()
    .setDuration(1.5) // in seconds
    .setEase(Expo.easeOut) // Actuate easing function
    .build();

setFadeIn() fades in the new view on top of the old view. setFadeOut() fades out the old view on top of the new view. Calling both will cross-fade both views at the same time.

See API Reference: FadeTransitionBuilder for more details.

Iris

Creates transitions for view navigators that show or hide a display object masked by a growing or shrinking circle. Both display objects remain stationary while a mask is animated.

var transition = new IrisTransitionBuilder()
    .setOpen(true) // or false to close
    .setDuration(1.5) // in seconds
    .setEase(Expo.easeOut) // Actuate easing function
    .build();

See API Reference: IrisTransitionBuilder for more details.

Reveal

Creates animated transitions for view navigators that slide a display object out of view, by animating the x or y property, while revealing an existing display object that remains stationary below. The display object may slide up, right, down, or left (or at an arbitrary angle).

var transition = new RevealTransitionBuilder()
    .setAngle(180.0) // range: 0.0 to 360.0
    .setDuration(1.5) // in seconds
    .setEase(Expo.easeOut) // Actuate easing function
    .build();

Optionally, you can replace the call to setAngle(Float) with a call to one of four convenience functions for common angles. Use setRight() for 0 degrees, setUp() for 90 degrees, setLeft() for 180 degrees, or setDown() for 270 degrees.

See API Reference: RevealTransitionBuilder for more details.

Slide

Creates animated transitions for view navigators that moves two adjacent views in the same direction (replacing one with the other), as if one view is pushing the other out of the way. Looks similar to a classic slide carousel. Animates the x or y property of the views. The views may move up, down, right, or left (or at an arbitrary angle).

var transition = new SlideTransitionBuilder()
    .setAngle(180.0) // range: 0.0 to 360.0
    .setDuration(1.5) // in seconds
    .setEase(Expo.easeOut) // Actuate easing function
    .build();

Optionally, you can replace the call to setAngle(Float) with a call to one of four convenience functions for common angles. Use setRight() for 0 degrees, setUp() for 90 degrees, setLeft() for 180 degrees, or setDown() for 270 degrees.

See API Reference: SlideTransitionBuilder for more details.

Wipe

Creates transitions for view navigators that wipe a display object out of view, revealing another display object under the first. Both display objects remain stationary while the effect animates a mask. The mask may be animated up, right, down, or left (or at an arbitrary angle).

var transition = new WipeTransitionBuilder()
    .setAngle(180.0) // range: 0.0 to 360.0
    .setDuration(1.5) // in seconds
    .setEase(Expo.easeOut) // Actuate easing function
    .build();

Optionally, you can replace the call to setAngle(Float) with a call to one of four convenience functions for common angles. Use setRight() for 0 degrees, setUp() for 90 degrees, setLeft() for 180 degrees, or setDown() for 270 degrees.

See API Reference: WipeTransitionBuilder for more details.

Custom transitions

See Create custom transitions for navigator components for more details about custom transitions