- App created using the Ionic framework to create custom animations.
- Another great tutorial from Simon Grimm at the Ionic Academy - 👏 Inspiration below.
- Note: to open web links in a new window use: ctrl+click on link
- Creates custom animation of block moving horizontally across the screen
- Creates second page with custom navigation using animated transition
- updated to use latest Ionic 5 animation methods
- Run
npm ito install dependencies - To start the server on localhost://8100 type: 'ionic serve -o'
- animation of nav forward direction:
if (opts.direction === 'forward') {
return animationCtrl
.create()
.addElement(opts.enteringEl)
.duration(DURATION)
.easing('ease-in')
.fromTo('opacity', 0, 1);
}- Animation parameters such as opacity, ease-in & ease-out times, duration, etc. can be customised. See 'Inspiration' below.
- Status: Working.
- To-do: Nothing
- Project inspired by Simon Grimm´s Youtube video: Ionic 5 Animations Controller & Custom Page Transitions
- Ionic Animations documentation
- This project is licensed under the terms of the MIT license.
- Repo created by ABateman, email: [email protected]
React
Typescript
Django
Laravel
Facebook
Microsoft
Google
Alibaba
D3
Tencent