AndrewJBateman/ionic-angular-customAnim

:clipboard: Ionic app using custom animations. Another excellent tutorial from Simon Grimm at the Ionic Academy

⚡ Ionic Angular Custom Animations

• 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

📄 Table of contents

• ⚡ Ionic Angular Custom Animations
  • 📄 Table of contents
  • 📚 General info
  • 📷 Screenshots
  • 📶 Technologies
  • 💾 Setup
  • 💻 Code Examples
  • 🆒 Features
  • 📋 Status & To-do list
  • 👏 Inspiration
  • 📁 License
  • ✉️ Contact

📚 General info

• 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

📷 Screenshots

📶 Technologies

• Ionic v6
• Angular v13
• Ionic/angular v6
• Ionic Animations

💾 Setup

• Run npm i to install dependencies
• To start the server on localhost://8100 type: 'ionic serve -o'

💻 Code Examples

• animation of nav forward direction:

if (opts.direction === 'forward') {
  return animationCtrl
  .create()
  .addElement(opts.enteringEl)
  .duration(DURATION)
  .easing('ease-in')
  .fromTo('opacity', 0, 1);
}

🆒 Features

• Animation parameters such as opacity, ease-in & ease-out times, duration, etc. can be customised. See 'Inspiration' below.

📋 Status & To-do list

• Status: Working.
• To-do: Nothing

👏 Inspiration

• Project inspired by Simon Grimm´s Youtube video: Ionic 5 Animations Controller & Custom Page Transitions
• Ionic Animations documentation

📁 License

• This project is licensed under the terms of the MIT license.

✉️ Contact

• Repo created by ABateman, email: gomezbateman@yahoo.com