An abstract transition controller that can be used for transitioning elements
yarn add transition-controller
npm i -S transition-controller
The AbstractTransitionController is an abstract class that should be extended by another abstract class for your project specific setup.
Before you can use the class you need to create your own abstract class that implements the getSubTimelineByComponent method.
abstract class AbstractDummyTransitionController extends AbstractTransitionController<T> {
/**
* @protected
* @method getSubTimelineByComponent
* @param {string | HTMLElement | T} component
* @param {TransitionDirection} direction
* @returns {gsap.TimelineLite | gsap.TimelineMax}
*/
protected getSubTimelineByComponent(component: string | HTMLElement | T, direction: TransitionDirection,): TimelineLite | TimelineMax {
const instance:T;
// Add code that finds the instance based on the 3 provided types
...
// Return the correct timeline
if (direction === TransitionDirection.IN) {
return instance.transitionController.transitionInTimeline;
}
return instance.transitionController.transitionOutTimeline;
}
}
After you've created you own abstract class you can use the transition controller and start to do amazingly easy transitions
const transitionController = new DummyTransitionController(this, {
name: 'DummyController',
debug: false,
useTimelineMax: false,
});
transitionController.transitionIn();
I've included an example setup where you can see the loader in action, to run the project follow these steps:
git clone https://github.com/larsvanbraam/transition-controller.git
cd transition-controller/example
yarn
yarn dev
localhost:8080
or click this link to preview online
In order to build transition-controller, ensure that you have Git and Node.js installed.
Clone a copy of the repo:
git clone https://github.com/larsvanbraam/transition-controller.git
Change to the transition-controller directory:
cd transition-controller
Install dev dependencies:
yarn
Use one of the following main scripts:
yarn build # build this project
yarn dev # run compilers in watch mode, both for babel and typescript
yarn test # run the unit tests incl coverage
yarn test:dev # run the unit tests in watch mode
yarn lint # run eslint and tslint on this project
yarn doc # generate typedoc documentation
When installing this module, it adds a pre-commit hook, that runs lint and prettier commands before committing, so you can be sure that everything checks out.
View AUTHORS.md
View CONTRIBUTING.md
MIT © Lars van Braam
Generated using TypeDoc