Add base motion package

packages/motion/.eslintrc.js

@@ -0,0 +1,32 @@
+module.exports = {
+  env: {
+    browser: true,
+    node: true,
+    es6: true,
+  },
+  parserOptions: {
+    project: './tsconfig.json',
+    ecmaFeatures: {
+      jsx: true,
+    },
+  },
+  plugins: ['@ionic'],
+  extends: ['plugin:@ionic/strict'],
+  rules: {
+    "no-conditional-assignment": 0,
+    "no-non-null-assertion": 0,
+    "no-unnecessary-type-assertion": 0,
+    "no-import-side-effect": 0,
+    "trailing-comma": 0,
+    "no-null-keyword": 0,
+    "no-console": 0,
+    "no-floating-promises": 0,
+
+    "jsx-key": 0,
+    "jsx-self-close": 0,
+    "jsx-no-bind": 0,
+    "jsx-no-lambda": 0,
+    "jsx-no-multiline-js": 0,
+    "jsx-wrap-multiline": 0
+  }
+};

packages/motion/package.json

@@ -0,0 +1,46 @@
+{
+  "name": "@ionic/motion",
+  "version": "0.0.1",
+  "description": "Motion animations for Ionic Framework",
+  "scripts": {
+    "clean": "rm -rf dist",
+    "build": "npm run clean && tsc -p .",
+    "lint": "eslint src/**/*",
+    "lint.fix": "npm run lint -- --fix"
+  },
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/ionic-team/ionic.git"
+  },
+  "keywords": [
+    "ionic",
+    "framework",
+    "react",
+    "angular",
+    "mobile",
+    "app",
+    "hybrid",
+    "webapp",
+    "cordova",
+    "capacitor",
+    "progressive",
+    "web",
+    "app",
+    "pwa"
+  ],
+  "author": "Ionic Team",
+  "license": "MIT",
+  "bugs": {
+    "url": "https://github.com/ionic-team/ionic/issues"
+  },
+  "homepage": "https://ionicframework.com/",
+  "devDependencies": {
+    "@ionic/eslint-plugin": "0.0.1",
+    "@typescript-eslint/parser": "^2.33.0",
+    "eslint": "^7.0.0",
+    "typescript": "^3.9.2"
+  },
+  "dependencies": {
+    "@ionic/core": "^5.1.1"
+  }
+}

packages/motion/readme.md

@@ -0,0 +1 @@
+# @ionic/motion

packages/motion/src/animations/axis.ts

@@ -0,0 +1,51 @@
+import { createAnimation, Animation } from '@ionic/core';
+
+export const sharedAxisTransition = (_: HTMLElement, opts: any): Animation => {
+  const backDirection = opts.direction === 'back';
+  const enteringEl = opts.enteringEl;
+  const leavingEl = opts.leavingEl;
+
+  const baseTransition = createAnimation()
+    .duration(300)
+    .easing('ease');
+
+  if (backDirection) {
+    const leavingTransition = createAnimation()
+      .addElement(leavingEl)
+      .keyframes([
+        { offset: 0, opacity: 1, transform: 'translate3d(0, 0, 0)' },
+        { offset: 0.3, opacity: 0, transform: 'translate3d(9px, 0, 0)' },
+        { offset: 1, opacity: 0, transform: 'translate3d(30px, 0, 0)' }
+      ]);
+
+    const enteringTransition = createAnimation()
+      .addElement(enteringEl)
+      .keyframes([
+        { offset: 0, opacity: 0, transform: 'translate3d(-30px, 0, 0)' },
+        { offset: 0.3, opacity: 0, transform: 'translate3d(-21px, 0, 0)' },
+        { offset: 1, opacity: 1, transform: 'translate3d(0, 0, 0)' }
+      ]);
+
+    baseTransition.addAnimation([leavingTransition, enteringTransition]);
+  } else {
+    const leavingTransition = createAnimation()
+      .addElement(leavingEl)
+      .keyframes([
+        { offset: 0, opacity: 1, transform: 'translate3d(0, 0, 0)' },
+        { offset: 0.3, opacity: 0, transform: 'translate3d(-9px, 0, 0)' },
+        { offset: 1, opacity: 0, transform: 'translate3d(-30px, 0, 0)' }
+      ]);
+
+    const enteringTransition = createAnimation()
+      .addElement(enteringEl)
+      .keyframes([
+        { offset: 0, opacity: 0, transform: 'translate3d(30px, 0, 0)' },
+        { offset: 0.3, opacity: 0, transform: 'translate3d(21px, 0, 0)' },
+        { offset: 1, opacity: 1, transform: 'translate3d(0, 0, 0)' }
+      ]);
+
+    baseTransition.addAnimation([leavingTransition, enteringTransition]);
+  }
+
+  return baseTransition;
+}

packages/motion/src/index.ts

@@ -0,0 +1 @@
+export { sharedAxisTransition } from './animations/axis';

packages/motion/tsconfig.json

@@ -0,0 +1,35 @@
+{
+  "compilerOptions": {
+    "strict": true,
+    "alwaysStrict": true,
+    "allowSyntheticDefaultImports": true,
+    "allowUnreachableCode": false,
+    "declaration": true,
+    "experimentalDecorators": true,
+    "forceConsistentCasingInFileNames": true,
+    "assumeChangesOnlyAffectDirectDependencies": true,
+    "jsx": "react",
+    "jsxFactory": "h",
+    "lib": [
+      "dom",
+      "es2017"
+    ],
+    "module": "esnext",
+    "moduleResolution": "node",
+    "noImplicitAny": true,
+    "noImplicitReturns": true,
+    "noUnusedLocals": true,
+    "noUnusedParameters": true,
+    "outDir": "dist",
+    "pretty": true,
+    "removeComments": false,
+    "target": "es2017"
+  },
+  "include": [
+    "src",
+  ],
+  "exclude": [
+    "node_modules",
+    "**/test"
+  ]
+}