FadeSwapTransition

import FadeSwapTransition from '@bbc/front-end-kit/js/highway/transitions/FadeSwapTransition';

The default Highway.js transition used by HighwayApp. Fades the outgoing view to opacity 0, removes it from the DOM, then fades the incoming view from opacity 0 to 1.

Extends Highway.Transition.

Behaviour

Phase	What happens
`out`	GSAP tweens `from` to `opacity: 0`, then removes it and calls `done()`
`in`	GSAP tweens `to` from `opacity: 0` to `opacity: 1`, then calls `done()`

Usage

Registered automatically as the default transition in HighwayApp. To use it in a custom Highway setup:

import Highway from '@dogstudio/highway';
import FadeSwapTransition from '@bbc/front-end-kit/js/highway/transitions/FadeSwapTransition';

const H = new Highway.Core({
    transitions: {
        default: FadeSwapTransition,
    }
});

External dependencies

Highway.js (@dogstudio/highway): Base Transition class.
GSAP: Opacity tweens for both in and out phases.