├── .editorconfig ├── .eslintrc.json ├── .github └── FUNDING.yml ├── .gitignore ├── .npmignore ├── CHANGELOG.md ├── CONTRIBUTING.md ├── LICENSE ├── demo-pwa ├── .editorconfig ├── .gitignore ├── LICENSE ├── package-lock.json ├── package.json ├── readme.md ├── src │ ├── assets │ │ └── icon │ │ │ ├── apple-touch-icon.png │ │ │ ├── favicon.ico │ │ │ ├── icon192.png │ │ │ └── icon512.png │ ├── components.d.ts │ ├── components │ │ ├── app-home │ │ │ ├── app-home.css │ │ │ ├── app-home.e2e.ts │ │ │ ├── app-home.spec.ts │ │ │ └── app-home.tsx │ │ └── app-root │ │ │ ├── app-root.css │ │ │ ├── app-root.e2e.ts │ │ │ └── app-root.tsx │ ├── global │ │ ├── app.css │ │ └── app.ts │ ├── helpers │ │ └── utils.ts │ ├── index.html │ ├── interfaces.d.ts │ └── manifest.json ├── stencil.config.ts └── tsconfig.json ├── img ├── animatable.png └── demo-pwa.png ├── package-lock.json ├── package.json ├── react ├── .eslintrc.js ├── README.md ├── package-lock.json ├── package.json ├── src │ ├── components.ts │ ├── hocs │ │ └── index.tsx │ ├── index.ts │ └── react-component-lib │ │ ├── createComponent.tsx │ │ ├── createOverlayComponent.tsx │ │ ├── index.ts │ │ ├── interfaces.ts │ │ └── utils │ │ ├── attachProps.ts │ │ ├── case.ts │ │ ├── dev.ts │ │ └── index.tsx └── tsconfig.json ├── readme.md ├── src ├── animations │ ├── animate │ │ ├── attention-seekers.ts │ │ ├── bouncing-entrances.ts │ │ ├── bouncing-exits.ts │ │ ├── common.ts │ │ ├── fading-entrances.ts │ │ ├── fading-exits.ts │ │ ├── flippers.ts │ │ ├── index.ts │ │ ├── lightspeed.ts │ │ ├── rotating-entrances.ts │ │ ├── rotating-exits.ts │ │ ├── sliding-entrances.ts │ │ ├── sliding-exits.ts │ │ ├── specials.ts │ │ ├── zoom-entrances.ts │ │ └── zoom-exits.ts │ ├── animista │ │ ├── bg-pan.ts │ │ ├── bounce-in.ts │ │ ├── bounce.ts │ │ ├── common.ts │ │ ├── fade-in.ts │ │ ├── flicker-in.ts │ │ ├── flip-2.ts │ │ ├── flip-in.ts │ │ ├── flip-scale-2.ts │ │ ├── flip-scale.ts │ │ ├── flip.ts │ │ ├── focus-in.ts │ │ ├── index.ts │ │ ├── jello.ts │ │ ├── ken-burns.ts │ │ ├── puff-in.ts │ │ ├── pulsate.ts │ │ ├── roll-in-blurred.ts │ │ ├── roll-in.ts │ │ ├── rotate-90.ts │ │ ├── rotate-in-2.ts │ │ ├── rotate-in.ts │ │ ├── rotate-scale.ts │ │ ├── rotate.ts │ │ ├── scale-down.ts │ │ ├── scale-in.ts │ │ ├── scale-up.ts │ │ ├── shadow-drop-2.ts │ │ ├── shadow-drop.ts │ │ ├── shadow-inset.ts │ │ ├── shadow-pop.ts │ │ ├── shake.ts │ │ ├── slide-bck.ts │ │ ├── slide-fwd.ts │ │ ├── slide-in-bck.ts │ │ ├── slide-in-blurred.ts │ │ ├── slide-in-elliptic.ts │ │ ├── slide-in-fwd.ts │ │ ├── slide-in.ts │ │ ├── slide-rotate.ts │ │ ├── slide.ts │ │ ├── slit-in.ts │ │ ├── swing-in.ts │ │ ├── swing.ts │ │ ├── swirl-in.ts │ │ ├── text-pop-up.ts │ │ ├── text-shadow-drop.ts │ │ ├── text-shadow-pop.ts │ │ ├── tilt-in-fwd.ts │ │ ├── tilt-in.ts │ │ ├── tracking-in.ts │ │ ├── vibrate.ts │ │ └── wobble.ts │ ├── common.ts │ └── index.ts ├── components.d.ts ├── components │ ├── animatable-component │ │ ├── animatable-component.tsx │ │ └── readme.md │ └── animatable-cube │ │ ├── animatable-cube.css │ │ ├── animatable-cube.tsx │ │ └── readme.md ├── easing │ └── easing.ts ├── hocs │ └── index.tsx ├── index.html ├── index.ts ├── models │ └── animatable.ts └── utils │ ├── dom.ts │ ├── index.ts │ └── waapi.ts ├── stencil.config.ts └── tsconfig.json /.editorconfig: -------------------------------------------------------------------------------- 1 | # http://editorconfig.org 2 | 3 | root = true 4 | 5 | [*] 6 | charset = utf-8 7 | indent_style = space 8 | indent_size = 2 9 | end_of_line = lf 10 | insert_final_newline = true 11 | trim_trailing_whitespace = true 12 | 13 | [*.md] 14 | insert_final_newline = false 15 | trim_trailing_whitespace = false 16 | -------------------------------------------------------------------------------- /.eslintrc.json: -------------------------------------------------------------------------------- 1 | { 2 | "parserOptions": { 3 | "project": "./tsconfig.json" 4 | }, 5 | "extends": [ 6 | "plugin:@stencil/recommended" 7 | ], 8 | "settings": { 9 | "react": { 10 | "version": "16.7" 11 | } 12 | } 13 | } -------------------------------------------------------------------------------- /.github/FUNDING.yml: -------------------------------------------------------------------------------- 1 | # These are supported funding model platforms 2 | 3 | github: jdnichollsc 4 | patreon: proyecto26 5 | open_collective: proyecto26 6 | ko_fi: proyecto26 7 | tidelift: "npm/@proyecto26/animatable-component" 8 | liberapay: proyecto26 9 | custom: "https://www.paypal.me/jdnichollsc" 10 | -------------------------------------------------------------------------------- /.gitignore: -------------------------------------------------------------------------------- 1 | dist/ 2 | www/ 3 | loader/ 4 | 5 | *~ 6 | *.sw[mnpcod] 7 | *.log 8 | *.lock 9 | *.tmp 10 | *.tmp.* 11 | log.txt 12 | *.sublime-project 13 | *.sublime-workspace 14 | 15 | .stencil/ 16 | .idea/ 17 | .vscode/ 18 | .sass-cache/ 19 | .versions/ 20 | node_modules/ 21 | $RECYCLE.BIN/ 22 | 23 | .DS_Store 24 | Thumbs.db 25 | UserInterfaceState.xcuserstate 26 | .env -------------------------------------------------------------------------------- /.npmignore: -------------------------------------------------------------------------------- 1 | ./src 2 | ./img 3 | ./www 4 | ./react 5 | 6 | ./demo* 7 | .github 8 | .stencil 9 | -------------------------------------------------------------------------------- /CHANGELOG.md: -------------------------------------------------------------------------------- 1 | # Changelog 2 | All notable changes to this project will be documented in this file. 3 | 4 | The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/), 5 | and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0.html). 6 | 7 | ## [Unreleased] 8 | 9 | ## [1.1.10] - 2020-11-02 10 | ### Fixed 11 | - Fixed import for components types. 12 | 13 | ## [1.1.9] - 2020-11-02 14 | ### Fixed 15 | - Use `disconnectedCallback()` instead of `componentDidUnload()`. 16 | - Update to `Stencil` v2.0. 17 | - Fix accessibility issues from GitHub page. 18 | 19 | ## [1.1.8] - 2020-05-07 20 | ### Fixed 21 | - Validate if the manager is initialized before to destroy the animation. 22 | - Fixed comments of JSDoc. 23 | 24 | ## [1.1.7] - 2020-04-25 25 | ### Fixed 26 | - Fixed `createAnimatableComponent` HOC by adding missing `animation` prop. 27 | 28 | ## [1.1.6] - 2020-04-25 29 | ### Fixed 30 | - Fixed query selector for `animatable-cube` component, to avoid removing styles when `fromClassName` or `toClassName` props are used. 31 | - Added **PWA** demo using [Ionic](https://www.npmjs.com/package/@ionic/core) components. 32 | 33 | ## [1.1.5] - 2020-04-23 34 | ### Fixed 35 | - Fixed styles of the `animatable-cube` component by adding missing css variables as props. 36 | - Adding [Credits](https://github.com/proyecto26/animatable-component#credits-) and [Enterprise](https://github.com/proyecto26/animatable-component#enterprise-) sections from **README**. 37 | - Improved demo by waiting `animatable-component` to be loaded as a custom element. 38 | 39 | ## [1.1.4] - 2020-04-22 40 | ### Fixed 41 | - Cancel current animation before to play another one, it's required to avoid issues when `iterations` was equal to `Infinity`. 42 | 43 | ## [1.1.3] - 2020-04-21 44 | ### Fixed 45 | - Restore class name from `onCancel` event and remove `previousAnimation` from Animation manager. 46 | 47 | ## [1.1.2] - 2020-04-21 48 | ### Fixed 49 | - Fixed issue from `destroy` method by using `cancel` instead of `finish`. 50 | 51 | ## [1.1.1] - 2020-04-19 52 | ### Fixed 53 | - Fixed dependencies of the package. 54 | - Updated **README** for React projects using wrapper component instead. 55 | 56 | ## [1.1.0] - 2020-04-17 57 | ### Added 58 | - Added `fromClassName` and `toClassName` props to be applied when the animation starts and ends respectively. 59 | - Added animations from [Animista](https://animista.net/). 60 | - Added `animatable-cube` component for 3D cubes. 61 | - Adding configuration to create a React specific wrapper for `animatable-component`. 62 | 63 | ## [1.0.2] - 2020-03-01 64 | ### Fixed 65 | - Fix validation loading easing option ([79d9d10](https://github.com/proyecto26/animatable-component/commit/79d9d10bbfa4ccdae37f9e866043be6b9c3adb1d)). 66 | 67 | ## [1.0.1] - 2019-12-16 68 | ### Fixed 69 | - Fixed linter and types issues ([b06a67a](https://github.com/proyecto26/animatable-component/commit/b06a67a43b03117aea9ba7946d603545b50eed65)). 70 | 71 | ## [1.0.0] - 2019-11-23 72 | ## Added 73 | - Added default animations of `Animate.css`. 74 | - Added props to create custom animations by using **keyFrames**. 75 | - Added GitHub page with Google Analytics to track some events. 76 | - Added README with instructions to integrate the Web component with any other framework (Angular, React, Vue, etc). 77 | 78 | [Unreleased]: https://github.com/proyecto26/animatable-component/compare/v1.1.10...HEAD 79 | [1.1.10]: https://github.com/proyecto26/animatable-component/compare/v1.1.9...v1.1.10 80 | [1.1.9]: https://github.com/proyecto26/animatable-component/compare/v1.1.8...v1.1.9 81 | [1.1.8]: https://github.com/proyecto26/animatable-component/compare/v1.1.7...v1.1.8 82 | [1.1.7]: https://github.com/proyecto26/animatable-component/compare/v1.1.6...v1.1.7 83 | [1.1.6]: https://github.com/proyecto26/animatable-component/compare/v1.1.5...v1.1.6 84 | [1.1.5]: https://github.com/proyecto26/animatable-component/compare/v1.1.4...v1.1.5 85 | [1.1.4]: https://github.com/proyecto26/animatable-component/compare/v1.1.3...v1.1.4 86 | [1.1.3]: https://github.com/proyecto26/animatable-component/compare/v1.1.2...v1.1.3 87 | [1.1.2]: https://github.com/proyecto26/animatable-component/compare/v1.1.1...v1.1.2 88 | [1.1.1]: https://github.com/proyecto26/animatable-component/compare/v1.1.0...v1.1.1 89 | [1.1.0]: https://github.com/proyecto26/animatable-component/compare/v1.0.2...v1.1.0 90 | [1.0.2]: https://github.com/proyecto26/animatable-component/compare/v1.0.1...v1.0.2 91 | [1.0.1]: https://github.com/proyecto26/animatable-component/compare/v1.0.0...v1.0.1 92 | [1.0.0]: https://github.com/proyecto26/animatable-component/releases/tag/v1.0.0 93 | -------------------------------------------------------------------------------- /CONTRIBUTING.md: -------------------------------------------------------------------------------- 1 | # Contributing 2 | 3 | When contributing to this repository, please first discuss the change you wish to make via issue, 4 | email, or any other method with the owners of this repository before making a change. 5 | 6 | Please note we have a code of conduct, please follow it in all your interactions with the project. 7 | 8 | ## Pull Request Process 9 | 10 | 1. Ensure any install or build dependencies are removed before the end of the layer when doing a 11 | build. 12 | 2. Update the README.md with details of changes to the interface, this includes new environment 13 | variables, exposed ports, useful file locations and container parameters. 14 | 3. Increase the version numbers in any examples files and the README.md to the new version that this 15 | Pull Request would represent. The versioning scheme we use is [SemVer](http://semver.org/). 16 | 4. You may merge the Pull Request in once you have the sign-off of two other developers, or if you 17 | do not have permission to do that, you may request the second reviewer to merge it for you. 18 | 19 | ## Code of Conduct 20 | 21 | ### Our Pledge 22 | 23 | In the interest of fostering an open and welcoming environment, we as 24 | contributors and maintainers pledge to making participation in our project and 25 | our community a harassment-free experience for everyone, regardless of age, body 26 | size, disability, ethnicity, gender identity and expression, level of experience, 27 | nationality, personal appearance, race, religion, or sexual identity and 28 | orientation. 29 | 30 | ### Our Standards 31 | 32 | Examples of behavior that contributes to creating a positive environment 33 | include: 34 | 35 | * Using welcoming and inclusive language 36 | * Being respectful of differing viewpoints and experiences 37 | * Gracefully accepting constructive criticism 38 | * Focusing on what is best for the community 39 | * Showing empathy towards other community members 40 | 41 | Examples of unacceptable behavior by participants include: 42 | 43 | * The use of sexualized language or imagery and unwelcome sexual attention or 44 | advances 45 | * Trolling, insulting/derogatory comments, and personal or political attacks 46 | * Public or private harassment 47 | * Publishing others' private information, such as a physical or electronic 48 | address, without explicit permission 49 | * Other conduct which could reasonably be considered inappropriate in a 50 | professional setting 51 | 52 | ### Our Responsibilities 53 | 54 | Project maintainers are responsible for clarifying the standards of acceptable 55 | behavior and are expected to take appropriate and fair corrective action in 56 | response to any instances of unacceptable behavior. 57 | 58 | Project maintainers have the right and responsibility to remove, edit, or 59 | reject comments, commits, code, wiki edits, issues, and other contributions 60 | that are not aligned to this Code of Conduct, or to ban temporarily or 61 | permanently any contributor for other behaviors that they deem inappropriate, 62 | threatening, offensive, or harmful. 63 | 64 | ### Scope 65 | 66 | This Code of Conduct applies both within project spaces and in public spaces 67 | when an individual is representing the project or its community. Examples of 68 | representing a project or community include using an official project e-mail 69 | address, posting via an official social media account, or acting as an appointed 70 | representative at an online or offline event. Representation of a project may be 71 | further defined and clarified by project maintainers. 72 | 73 | ### Enforcement 74 | 75 | Instances of abusive, harassing, or otherwise unacceptable behavior may be 76 | reported by contacting the project team at jdnichollsc@hotmail.com. All 77 | complaints will be reviewed and investigated and will result in a response that 78 | is deemed necessary and appropriate to the circumstances. The project team is 79 | obligated to maintain confidentiality with regard to the reporter of an incident. 80 | Further details of specific enforcement policies may be posted separately. 81 | 82 | Project maintainers who do not follow or enforce the Code of Conduct in good 83 | faith may face temporary or permanent repercussions as determined by other 84 | members of the project's leadership. 85 | 86 | ### Attribution 87 | 88 | This Code of Conduct is adapted from the [Contributor Covenant][homepage], version 1.4, 89 | available at [http://contributor-covenant.org/version/1/4][version] 90 | 91 | [homepage]: http://contributor-covenant.org 92 | [version]: http://contributor-covenant.org/version/1/4/ 93 | -------------------------------------------------------------------------------- /LICENSE: -------------------------------------------------------------------------------- 1 | MIT License 2 | 3 | Copyright (c) 2019 4 | 5 | Permission is hereby granted, free of charge, to any person obtaining a copy 6 | of this software and associated documentation files (the "Software"), to deal 7 | in the Software without restriction, including without limitation the rights 8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell 9 | copies of the Software, and to permit persons to whom the Software is 10 | furnished to do so, subject to the following conditions: 11 | 12 | The above copyright notice and this permission notice shall be included in all 13 | copies or substantial portions of the Software. 14 | 15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR 16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, 17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE 18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER 19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, 20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE 21 | SOFTWARE. 22 | -------------------------------------------------------------------------------- /demo-pwa/.editorconfig: -------------------------------------------------------------------------------- 1 | # http://editorconfig.org 2 | 3 | root = true 4 | 5 | [*] 6 | charset = utf-8 7 | indent_style = space 8 | indent_size = 2 9 | end_of_line = lf 10 | insert_final_newline = true 11 | trim_trailing_whitespace = true 12 | 13 | [*.md] 14 | insert_final_newline = false 15 | trim_trailing_whitespace = false 16 | -------------------------------------------------------------------------------- /demo-pwa/.gitignore: -------------------------------------------------------------------------------- 1 | dist/ 2 | !www/favicon.ico 3 | www/ 4 | 5 | *~ 6 | *.sw[mnpcod] 7 | *.log 8 | *.lock 9 | *.tmp 10 | *.tmp.* 11 | log.txt 12 | *.sublime-project 13 | *.sublime-workspace 14 | 15 | .stencil/ 16 | .idea/ 17 | .vscode/ 18 | .sass-cache/ 19 | .versions/ 20 | node_modules/ 21 | $RECYCLE.BIN/ 22 | 23 | .DS_Store 24 | Thumbs.db 25 | UserInterfaceState.xcuserstate 26 | .env 27 | -------------------------------------------------------------------------------- /demo-pwa/LICENSE: -------------------------------------------------------------------------------- 1 | MIT License 2 | 3 | Copyright (c) 2017 demo-stencil 4 | 5 | Permission is hereby granted, free of charge, to any person obtaining a copy 6 | of this software and associated documentation files (the "Software"), to deal 7 | in the Software without restriction, including without limitation the rights 8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell 9 | copies of the Software, and to permit persons to whom the Software is 10 | furnished to do so, subject to the following conditions: 11 | 12 | The above copyright notice and this permission notice shall be included in all 13 | copies or substantial portions of the Software. 14 | 15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR 16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, 17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE 18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER 19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, 20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE 21 | SOFTWARE. 22 | -------------------------------------------------------------------------------- /demo-pwa/package-lock.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "demo-stencil", 3 | "version": "0.0.1", 4 | "lockfileVersion": 1, 5 | "requires": true, 6 | "dependencies": { 7 | "@ionic/core": { 8 | "version": "5.4.1", 9 | "resolved": "https://registry.npmjs.org/@ionic/core/-/core-5.4.1.tgz", 10 | "integrity": "sha512-yONXeHjbVGUSL7zPgiCv0fQkw47VHJJ+8zVkYgTg4At+B0VhoLAMgS/ah3EUwSVTOATXdHa6Ak5+71uHPKpViQ==", 11 | "dev": true, 12 | "requires": { 13 | "ionicons": "^5.1.2", 14 | "tslib": "^1.10.0" 15 | } 16 | }, 17 | "@proyecto26/animatable-component": { 18 | "version": "file:.." 19 | }, 20 | "@stencil/core": { 21 | "version": "2.2.0", 22 | "resolved": "https://registry.npmjs.org/@stencil/core/-/core-2.2.0.tgz", 23 | "integrity": "sha512-2V+DEUs9wvkcgnIIs0huye/M1v7x6qEzeOjp056RQlB08U1I4ex3vnBoE0/CrR35wK3ZZv2JYPOfBUuqR+6AAg==", 24 | "dev": true 25 | }, 26 | "ionicons": { 27 | "version": "5.2.3", 28 | "resolved": "https://registry.npmjs.org/ionicons/-/ionicons-5.2.3.tgz", 29 | "integrity": "sha512-87qtgBkieKVFagwYA9Cf91B3PCahQbEOMwMt8bSvlQSgflZ4eE5qI4MGj2ZlIyadeX0dgo+0CzZsy3ow0CsBAg==", 30 | "dev": true 31 | }, 32 | "tslib": { 33 | "version": "1.14.1", 34 | "resolved": "https://registry.npmjs.org/tslib/-/tslib-1.14.1.tgz", 35 | "integrity": "sha512-Xni35NKzjgMrwevysHTCArtLDpPvye8zV/0E4EyYn43P7/7qvQwPh9BGkHewbMulVntbigmcT7rdX3BNo9wRJg==", 36 | "dev": true 37 | }, 38 | "web-animations-js": { 39 | "version": "2.3.2", 40 | "resolved": "https://registry.npmjs.org/web-animations-js/-/web-animations-js-2.3.2.tgz", 41 | "integrity": "sha512-TOMFWtQdxzjWp8qx4DAraTWTsdhxVSiWa6NkPFSaPtZ1diKUxTn4yTix73A1euG1WbSOMMPcY51cnjTIHrGtDA==" 42 | } 43 | } 44 | } 45 | -------------------------------------------------------------------------------- /demo-pwa/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "demo-stencil", 3 | "private": true, 4 | "version": "0.0.1", 5 | "description": "PWA demo for Animatable WebComponent", 6 | "license": "MIT", 7 | "files": [ 8 | "dist/" 9 | ], 10 | "scripts": { 11 | "build": "stencil build", 12 | "start": "stencil build --dev --watch --serve", 13 | "test": "stencil test --spec --e2e", 14 | "test.watch": "stencil test --spec --e2e --watch", 15 | "generate": "stencil generate" 16 | }, 17 | "dependencies": { 18 | "web-animations-js": "^2.3.2", 19 | "@proyecto26/animatable-component": "file:.." 20 | }, 21 | "devDependencies": { 22 | "@ionic/core": "^5.4.1", 23 | "ionicons": "^5.2.3", 24 | "@stencil/core": "^2.2.0" 25 | } 26 | } 27 | -------------------------------------------------------------------------------- /demo-pwa/readme.md: -------------------------------------------------------------------------------- 1 | # Ionic PWA Toolkit 2 | 3 | The PWA Toolkit is a starting point for building Progressive Web Apps using Ionic and Stencil. 4 | This combination of tools gives you the ability to build a fast, efficient PWA out of the box. 5 | 6 | For more info check out our [homepage](https://ionicframework.com/pwa/toolkit)! 7 | 8 | ## Features 9 | 10 | * `@ionic/core` for the UI. 11 | * Stencil for the application logic and routing 12 | * Push Notifications setup 13 | * Unit Tests 14 | * Pre-rendering 15 | * Lazy-loading and code splitting 16 | * Intelligent Polyfills 17 | * Modern mode: ES6/ESM for new browser, ES5 for older 18 | * Service Worker, App manifest, iOS meta tags 19 | * Theming using CSS variables 20 | 21 | ## Getting Started 22 | 23 | To start building, clone this repo to a new directory: 24 | 25 | ```bash 26 | npm init stencil ionic-pwa 27 | ``` 28 | 29 | 30 | ## Production 31 | 32 | To build for production, run: 33 | 34 | ```bash 35 | npm run build 36 | ``` 37 | 38 | A production build includes: 39 | 40 | * Minified code bundles 41 | * Generated Service workers 42 | * App manifest 43 | 44 | ## Hosting 45 | 46 | Apps should be hosted on through HTTPS, and if possible, through a provider that supports HTTP2. 47 | One provider that does support this is [Firebase Hosting](https://firebase.google.com/docs/hosting/). 48 | 49 | ## H2 Push 50 | 51 | We recommend setting up HTTP2 Push on Firebase. H2 Push may sound complicated, but it's actually a simple concept. To learn about it, take a look at this [article](https://en.wikipedia.org/wiki/HTTP/2_Server_Push). 52 | 53 | To set this up for `my-app`: 54 | 55 | * Do a production build of the app: `npm run build` 56 | * Serve your WWW folder locally using a local http server and open in your browser. 57 | * https://www.npmjs.com/package/http-server works pretty well for this. You can serve your www folder by running `http-server www`. 58 | * Open the DevTools and look at the network tab. 59 | * Reload the page and you should see all of your files show up in the network tab. Excluding the `sw.js` file, these are the files you want to H2 push. 60 | * List these files in the link headers of your firebase.json file. For a syntax reference, review this [article](https://w3c.github.io/preload/#server-push-http-2) 61 | 62 | ## Service Workers 63 | 64 | Service workers are generated via the Stencil build tool. For more information on how they can be configured, see the [Service Worker docs](https://stenciljs.com/docs/service-workers). 65 | 66 | ## Developing with a Service Worker 67 | 68 | For most cases, you'll want to develop your app without generating a Service Worker. But if you'd like to test out Web Push Notifications or Background Sync, you'll need to have one generated. To generate a Service Worker during dev builds, we've added the npm script: 69 | 70 | ``` 71 | npm run start.sw 72 | ``` 73 | 74 | This will start a dev build and generate a Service Worker as well. 75 | 76 | ## Unit Tests 77 | 78 | To run the unit tests once, run: 79 | 80 | ```bash 81 | npm test 82 | ``` 83 | 84 | To run the unit tests and watch for file changes during development, run: 85 | 86 | ```bash 87 | npm run test.watch 88 | ``` 89 | 90 | ## Testing your PWA's performance 91 | 92 | We recommend using https://www.webpagetest.org/easy with the `Run Lighthouse Audit` option turned on. 93 | This will give you an in depth look into your app's load performance on the average device connected to the average network. 94 | For more info on how to use webpagetest check out [this article](https://zoompf.com/blog/2015/07/the-seo-experts-guide-to-web-performance-using-webpagetest-2) 95 | -------------------------------------------------------------------------------- /demo-pwa/src/assets/icon/apple-touch-icon.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/proyecto26/animatable-component/8ad561a983005e9b51bdad2920780e2b8cb7b818/demo-pwa/src/assets/icon/apple-touch-icon.png -------------------------------------------------------------------------------- /demo-pwa/src/assets/icon/favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/proyecto26/animatable-component/8ad561a983005e9b51bdad2920780e2b8cb7b818/demo-pwa/src/assets/icon/favicon.ico -------------------------------------------------------------------------------- /demo-pwa/src/assets/icon/icon192.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/proyecto26/animatable-component/8ad561a983005e9b51bdad2920780e2b8cb7b818/demo-pwa/src/assets/icon/icon192.png -------------------------------------------------------------------------------- /demo-pwa/src/assets/icon/icon512.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/proyecto26/animatable-component/8ad561a983005e9b51bdad2920780e2b8cb7b818/demo-pwa/src/assets/icon/icon512.png -------------------------------------------------------------------------------- /demo-pwa/src/components.d.ts: -------------------------------------------------------------------------------- 1 | /* eslint-disable */ 2 | /* tslint:disable */ 3 | /** 4 | * This is an autogenerated file created by the Stencil compiler. 5 | * It contains typing information for all components that exist in this project. 6 | */ 7 | import { HTMLStencilElement, JSXBase } from "@stencil/core/internal"; 8 | export namespace Components { 9 | interface AppHome { 10 | } 11 | interface AppRoot { 12 | } 13 | } 14 | declare global { 15 | interface HTMLAppHomeElement extends Components.AppHome, HTMLStencilElement { 16 | } 17 | var HTMLAppHomeElement: { 18 | prototype: HTMLAppHomeElement; 19 | new (): HTMLAppHomeElement; 20 | }; 21 | interface HTMLAppRootElement extends Components.AppRoot, HTMLStencilElement { 22 | } 23 | var HTMLAppRootElement: { 24 | prototype: HTMLAppRootElement; 25 | new (): HTMLAppRootElement; 26 | }; 27 | interface HTMLElementTagNameMap { 28 | "app-home": HTMLAppHomeElement; 29 | "app-root": HTMLAppRootElement; 30 | } 31 | } 32 | declare namespace LocalJSX { 33 | interface AppHome { 34 | } 35 | interface AppRoot { 36 | } 37 | interface IntrinsicElements { 38 | "app-home": AppHome; 39 | "app-root": AppRoot; 40 | } 41 | } 42 | export { LocalJSX as JSX }; 43 | declare module "@stencil/core" { 44 | export namespace JSX { 45 | interface IntrinsicElements { 46 | "app-home": LocalJSX.AppHome & JSXBase.HTMLAttributes; 47 | "app-root": LocalJSX.AppRoot & JSXBase.HTMLAttributes; 48 | } 49 | } 50 | } 51 | -------------------------------------------------------------------------------- /demo-pwa/src/components/app-home/app-home.css: -------------------------------------------------------------------------------- 1 | .img { 2 | height: 200px; 3 | width: 100%; 4 | background-size: contain; 5 | background-repeat: no-repeat; 6 | background-position: center; 7 | background-image: url(https://github.com/proyecto26/animatable-component/blob/master/img/animatable.png?raw=true); 8 | } 9 | 10 | ion-label { 11 | color: #F35525 !important; 12 | } 13 | 14 | ion-fab-button.ion-padding { 15 | padding-left: 12px; 16 | } -------------------------------------------------------------------------------- /demo-pwa/src/components/app-home/app-home.e2e.ts: -------------------------------------------------------------------------------- 1 | import { newE2EPage } from '@stencil/core/testing'; 2 | 3 | describe('app-home', () => { 4 | it('renders', async () => { 5 | const page = await newE2EPage(); 6 | await page.setContent(''); 7 | 8 | const element = await page.find('app-home'); 9 | expect(element).toHaveClass('hydrated'); 10 | }); 11 | 12 | it('contains a "Profile Page" button', async () => { 13 | const page = await newE2EPage(); 14 | await page.setContent(''); 15 | 16 | const element = await page.find('app-home ion-content ion-button'); 17 | expect(element.textContent).toEqual('Profile page'); 18 | }); 19 | }); 20 | -------------------------------------------------------------------------------- /demo-pwa/src/components/app-home/app-home.spec.ts: -------------------------------------------------------------------------------- 1 | import { AppHome } from './app-home'; 2 | import { newSpecPage } from '@stencil/core/testing'; 3 | 4 | describe('app-home', () => { 5 | it('renders', async () => { 6 | const { root } = await newSpecPage({ 7 | components: [AppHome], 8 | html: '' 9 | }); 10 | expect(root.querySelector('ion-title').textContent).toEqual('Home'); 11 | }); 12 | }); 13 | -------------------------------------------------------------------------------- /demo-pwa/src/components/app-root/app-root.css: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/proyecto26/animatable-component/8ad561a983005e9b51bdad2920780e2b8cb7b818/demo-pwa/src/components/app-root/app-root.css -------------------------------------------------------------------------------- /demo-pwa/src/components/app-root/app-root.e2e.ts: -------------------------------------------------------------------------------- 1 | import { newE2EPage } from '@stencil/core/testing'; 2 | 3 | describe('app-root', () => { 4 | it('renders', async () => { 5 | const page = await newE2EPage({ url: '/'}); 6 | 7 | const element = await page.find('app-root'); 8 | expect(element).toHaveClass('hydrated'); 9 | }); 10 | 11 | it('renders an ion-app', async () => { 12 | const page = await newE2EPage({ url: '/'}); 13 | 14 | const element = await page.find('app-root > ion-app'); 15 | expect(element).toHaveClass('hydrated'); 16 | }); 17 | }); 18 | -------------------------------------------------------------------------------- /demo-pwa/src/components/app-root/app-root.tsx: -------------------------------------------------------------------------------- 1 | import { Component, h } from '@stencil/core'; 2 | 3 | @Component({ 4 | tag: 'app-root', 5 | styleUrl: 'app-root.css' 6 | }) 7 | export class AppRoot { 8 | 9 | render() { 10 | return ( 11 | 12 | 13 | 14 | 15 | 16 | 17 | ); 18 | } 19 | } 20 | -------------------------------------------------------------------------------- /demo-pwa/src/global/app.ts: -------------------------------------------------------------------------------- 1 | import '@ionic/core'; 2 | import 'ionicons'; 3 | import 'web-animations-js'; 4 | import '@proyecto26/animatable-component'; 5 | import { setupConfig } from '@ionic/core'; 6 | 7 | export default () => { 8 | setupConfig({ 9 | mode: 'ios' 10 | }); 11 | }; 12 | -------------------------------------------------------------------------------- /demo-pwa/src/helpers/utils.ts: -------------------------------------------------------------------------------- 1 | 2 | 3 | export function sayHello() { 4 | return Math.random() < 0.5 ? 'Hello' : 'Hola'; 5 | } 6 | -------------------------------------------------------------------------------- /demo-pwa/src/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | PWA Toolkit 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | 19 | 20 | 21 | 22 | 23 | 24 | 25 | 26 | 27 | 28 | 29 | 30 | 31 | 32 | 33 | 34 | 35 | 36 | 37 | -------------------------------------------------------------------------------- /demo-pwa/src/interfaces.d.ts: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/proyecto26/animatable-component/8ad561a983005e9b51bdad2920780e2b8cb7b818/demo-pwa/src/interfaces.d.ts -------------------------------------------------------------------------------- /demo-pwa/src/manifest.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "demo-stencil", 3 | "short_name": "demo-stencil", 4 | "start_url": "/", 5 | "display": "standalone", 6 | "icons": [{ 7 | "src": "assets/icon/icon192.png", 8 | "sizes": "192x192", 9 | "type": "image/png" 10 | },{ 11 | "src": "assets/icon/icon512.png", 12 | "sizes": "512x512", 13 | "type": "image/png" 14 | }], 15 | "background_color": "#488aff", 16 | "theme_color": "#488aff" 17 | } -------------------------------------------------------------------------------- /demo-pwa/stencil.config.ts: -------------------------------------------------------------------------------- 1 | import { Config } from '@stencil/core'; 2 | 3 | // https://stenciljs.com/docs/config 4 | 5 | export const config: Config = { 6 | globalScript: 'src/global/app.ts', 7 | globalStyle: 'src/global/app.css', 8 | taskQueue: 'async', 9 | outputTargets: [{ 10 | type: 'www', 11 | serviceWorker: null 12 | }], 13 | }; 14 | -------------------------------------------------------------------------------- /demo-pwa/tsconfig.json: -------------------------------------------------------------------------------- 1 | { 2 | "compilerOptions": { 3 | "allowSyntheticDefaultImports": true, 4 | "allowUnreachableCode": false, 5 | "declaration": false, 6 | "experimentalDecorators": true, 7 | "lib": [ 8 | "dom", 9 | "es2017" 10 | ], 11 | "moduleResolution": "node", 12 | "module": "esnext", 13 | "target": "es2017", 14 | "noUnusedLocals": true, 15 | "noUnusedParameters": true, 16 | "jsx": "react", 17 | "jsxFactory": "h" 18 | }, 19 | "include": [ 20 | "src" 21 | ], 22 | "exclude": [ 23 | "node_modules" 24 | ] 25 | } 26 | -------------------------------------------------------------------------------- /img/animatable.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/proyecto26/animatable-component/8ad561a983005e9b51bdad2920780e2b8cb7b818/img/animatable.png -------------------------------------------------------------------------------- /img/demo-pwa.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/proyecto26/animatable-component/8ad561a983005e9b51bdad2920780e2b8cb7b818/img/demo-pwa.png -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "@proyecto26/animatable-component", 3 | "version": "1.1.10", 4 | "private": false, 5 | "description": "Animate once, use Everywhere! 💫", 6 | "author": "Proyecto 26", 7 | "homepage": "https://proyecto26.github.io/animatable-component", 8 | "main": "dist/index.cjs.js", 9 | "module": "dist/index.js", 10 | "es2015": "dist/esm/index.js", 11 | "es2017": "dist/esm/index.js", 12 | "jsnext:main": "dist/esm/index.js", 13 | "types": "dist/types/index.d.ts", 14 | "collection": "dist/collection/collection-manifest.json", 15 | "collection:main": "dist/collection/index.js", 16 | "unpkg": "dist/animatable-component/animatable-component.js", 17 | "files": [ 18 | "dist/", 19 | "loader/" 20 | ], 21 | "scripts": { 22 | "build": "stencil build --docs", 23 | "start": "stencil build --dev --watch --serve", 24 | "test": "stencil test --spec --e2e", 25 | "test.watch": "stencil test --spec --e2e --watchAll", 26 | "generate": "stencil generate", 27 | "deploy": "gh-pages -d www", 28 | "lint": "eslint src/**/*{.ts,.tsx}" 29 | }, 30 | "devDependencies": { 31 | "typescript": "^4.0.5", 32 | "@stencil/core": "^2.2.0", 33 | "@stencil/eslint-plugin": "^0.3.1", 34 | "@stencil/react-output-target": "^0.0.9", 35 | "@typescript-eslint/eslint-plugin": "^4.6.0", 36 | "@typescript-eslint/parser": "^4.6.0", 37 | "eslint": "^7.12.1", 38 | "eslint-plugin-react": "^7.21.5", 39 | "gh-pages": "^3.1.0" 40 | }, 41 | "license": "MIT", 42 | "repository": { 43 | "type": "git", 44 | "url": "https://github.com/proyecto26/animatable-component.git" 45 | }, 46 | "bugs": { 47 | "url": "https://github.com/proyecto26/animatable-component/issues" 48 | }, 49 | "keywords": [ 50 | "animatable", 51 | "component", 52 | "stenciljs", 53 | "stencil", 54 | "angular", 55 | "react", 56 | "vue", 57 | "vanillajs", 58 | "pwa", 59 | "progressive-web-app", 60 | "progressive-web-apps", 61 | "progressive web app", 62 | "progressive web apps", 63 | "web-component", 64 | "web-components", 65 | "web component", 66 | "web components", 67 | "animate", 68 | "keyframes", 69 | "easing", 70 | "easing-functions", 71 | "easing functions", 72 | "animations", 73 | "web-animations", 74 | "web-animations-api", 75 | "web animations", 76 | "web animations api", 77 | "waapi", 78 | "mobile", 79 | "desktop", 80 | "electron", 81 | "gsap", 82 | "ux", 83 | "user experience" 84 | ] 85 | } 86 | -------------------------------------------------------------------------------- /react/.eslintrc.js: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | parser: "@typescript-eslint/parser", // Specifies the ESLint parser 3 | extends: [ 4 | "plugin:react/recommended", // Uses the recommended rules from @eslint-plugin-react 5 | "plugin:@typescript-eslint/recommended" // Uses the recommended rules from @typescript-eslint/eslint-plugin 6 | ], 7 | parserOptions: { 8 | ecmaFeatures: { 9 | jsx: true // Allows for the parsing of JSX 10 | } 11 | }, 12 | rules: { 13 | // Place to specify ESLint rules. Can be used to overwrite rules specified from the extended configs 14 | // e.g. "@typescript-eslint/explicit-function-return-type": "off", 15 | }, 16 | settings: { 17 | react: { 18 | version: "detect" // Tells eslint-plugin-react to automatically detect the version of React to use 19 | } 20 | } 21 | }; -------------------------------------------------------------------------------- /react/README.md: -------------------------------------------------------------------------------- 1 | # `` for React 2 | 3 | ## Introduction 4 | React specific wrapper for [animatable-component](https://github.com/proyecto26/animatable-component) component. 5 | 6 | ## Why? 7 | *Most people who use React don’t use [Web Components](https://reactjs.org/docs/web-components.html)* and there're some limitations handling data with [Custom Components](https://custom-elements-everywhere.com/) from React. 8 | Thus, this **React component** was created not to need to reference their **Custom Elements** using a **ref** and manually attach the events, this makes working with [AnimatableComponent](https://github.com/proyecto26/animatable-component) not cumbersome 👍🏻 9 | 10 | ## Usage 11 | 12 | ```tsx 13 | import React, { Component } from 'react' 14 | import { 15 | AnimatableComponent, 16 | ANIMATIONS, 17 | EASING 18 | } from '@proyecto26/animatable-component-react' 19 | 20 | const App = () => { 21 | return ( 22 | console.log('Starting animation')} 32 | onFinish={() => console.log('Finished animation')} 33 | onCancel={() => console.log('Cancelled animation')} 34 | > 35 |
36 |

HELLO WORLD

37 |
38 | 39 | ) 40 | }; 41 | export default App; 42 | ``` 43 | 44 | 45 | ## Supporting 🍻 46 | I believe in Unicorns 🦄 47 | Support [me](http://www.paypal.me/jdnichollsc/2), if you do too. 48 | 49 | ## Happy coding 💯 50 | Made with ❤️ 51 | 52 | 53 | -------------------------------------------------------------------------------- /react/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "@proyecto26/animatable-component-react", 3 | "sideEffects": false, 4 | "version": "1.0.5", 5 | "description": "React specific wrapper for animatable-component", 6 | "repository": { 7 | "type": "git", 8 | "url": "https://github.com/proyecto26/animatable-component.git" 9 | }, 10 | "scripts": { 11 | "build": "npm run clean && npm run compile", 12 | "clean": "rm -rf dist", 13 | "compile": "npm run tsc", 14 | "tsc": "tsc -p .", 15 | "lint": "tsc --noEmit && eslint 'src/**/*.{js,ts,tsx}' --quiet --fix --ignore-pattern 'src/react-component-lib/*' --resolve-plugins-relative-to ." 16 | }, 17 | "main": "./dist/index.js", 18 | "module": "./dist/index.js", 19 | "types": "./dist/index.d.ts", 20 | "files": [ 21 | "dist/" 22 | ], 23 | "devDependencies": { 24 | "@types/jest": "^26.0.0", 25 | "@types/node": "^14.0.0", 26 | "@types/react": "^16.9.0", 27 | "@types/react-dom": "^16.9.0", 28 | "@typescript-eslint/eslint-plugin": "^4.6.0", 29 | "@typescript-eslint/parser": "^4.6.0", 30 | "eslint": "^7.12.1", 31 | "eslint-plugin-react": "^7.21.5", 32 | "jest": "^26.0.0", 33 | "jest-dom": "^4.0.0", 34 | "react": "^16.0.0", 35 | "react-dom": "^16.0.0", 36 | "typescript": "^4.0.0" 37 | }, 38 | "dependencies": { 39 | "@proyecto26/animatable-component": "^1.1.10" 40 | }, 41 | "peerDependencies": { 42 | "react": "^16.7.0", 43 | "react-dom": "^16.7.0" 44 | }, 45 | "jest": { 46 | "preset": "ts-jest", 47 | "setupTestFrameworkScriptFile": "/jest.setup.js", 48 | "testPathIgnorePatterns": [ 49 | "node_modules", 50 | "dist" 51 | ] 52 | } 53 | } 54 | -------------------------------------------------------------------------------- /react/src/components.ts: -------------------------------------------------------------------------------- 1 | /* eslint-disable */ 2 | /* tslint:disable */ 3 | /* auto-generated react proxies */ 4 | import { createReactComponent } from './react-component-lib'; 5 | 6 | import type { JSX } from '@proyecto26/animatable-component'; 7 | 8 | import { applyPolyfills, defineCustomElements } from '@proyecto26/animatable-component/loader'; 9 | 10 | applyPolyfills().then(() => defineCustomElements()); 11 | export const AnimatableComponent = /*@__PURE__*/createReactComponent('animatable-component'); 12 | export const AnimatableCube = /*@__PURE__*/createReactComponent('animatable-cube'); 13 | -------------------------------------------------------------------------------- /react/src/hocs/index.tsx: -------------------------------------------------------------------------------- 1 | import React, { ComponentType } from 'react'; 2 | import { AnimatableComponent } from '../components'; 3 | 4 | export type AnimatableProps = React.ComponentProps; 5 | export type AnimatableComponentType = ComponentType; 6 | 7 | /** 8 | * HOC to wrap components with Animatable component 9 | * @param WrappedComponent - Component to be animated with Animatable component 10 | */ 11 | export function createAnimatableComponent ( 12 | WrappedComponent: ComponentType 13 | ): ComponentType { 14 | return function WrappedWithAnimatable (props: T & AnimatableProps) { 15 | const { 16 | ref, 17 | animation, 18 | keyFrames, 19 | keyFramesData, 20 | options, 21 | optionsData, 22 | animateId, 23 | delay, 24 | endDelay, 25 | duration, 26 | direction, 27 | composite, 28 | easing, 29 | fill, 30 | iterations, 31 | iterationStart, 32 | iterationComposite, 33 | autoPlay, 34 | fromClassName, 35 | toClassName, 36 | currentTime, 37 | startTime, 38 | playbackRate, 39 | onStart, 40 | onFinish, 41 | onCancel, 42 | ...rest 43 | } = props 44 | return ( 45 | 73 | 74 | 75 | ); 76 | }; 77 | } 78 | -------------------------------------------------------------------------------- /react/src/index.ts: -------------------------------------------------------------------------------- 1 | import { 2 | ANIMATIONS, 3 | ANIMATION_KEY_ERROR, 4 | AnimationsType, 5 | EASING, 6 | EASING_FUNCTIONS, 7 | EasingType, 8 | KEYFRAMES, 9 | getKeyFramesByAnimation, 10 | } from '@proyecto26/animatable-component'; 11 | 12 | export { 13 | ANIMATIONS, 14 | ANIMATION_KEY_ERROR, 15 | AnimationsType, 16 | EASING, 17 | EASING_FUNCTIONS, 18 | EasingType, 19 | KEYFRAMES, 20 | getKeyFramesByAnimation, 21 | }; 22 | export * from './components'; 23 | export * from './hocs'; -------------------------------------------------------------------------------- /react/src/react-component-lib/createComponent.tsx: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | 3 | import { 4 | attachProps, 5 | createForwardRef, 6 | dashToPascalCase, 7 | isCoveredByReact, 8 | mergeRefs, 9 | } from './utils'; 10 | 11 | export interface HTMLStencilElement extends HTMLElement { 12 | componentOnReady(): Promise; 13 | } 14 | 15 | interface StencilReactInternalProps extends React.HTMLAttributes { 16 | forwardedRef: React.RefObject; 17 | ref?: React.Ref; 18 | } 19 | 20 | export const createReactComponent = < 21 | PropType, 22 | ElementType extends HTMLStencilElement, 23 | ContextStateType = {}, 24 | ExpandedPropsTypes = {} 25 | >( 26 | tagName: string, 27 | ReactComponentContext?: React.Context, 28 | manipulatePropsFunction?: ( 29 | originalProps: StencilReactInternalProps, 30 | propsToPass: any, 31 | ) => ExpandedPropsTypes, 32 | ) => { 33 | const displayName = dashToPascalCase(tagName); 34 | 35 | const ReactComponent = class extends React.Component> { 36 | componentEl!: ElementType; 37 | 38 | setComponentElRef = (element: ElementType) => { 39 | this.componentEl = element; 40 | }; 41 | 42 | constructor(props: StencilReactInternalProps) { 43 | super(props); 44 | } 45 | 46 | componentDidMount() { 47 | this.componentDidUpdate(this.props); 48 | } 49 | 50 | componentDidUpdate(prevProps: StencilReactInternalProps) { 51 | attachProps(this.componentEl, this.props, prevProps); 52 | } 53 | 54 | render() { 55 | const { children, forwardedRef, style, className, ref, ...cProps } = this.props; 56 | 57 | let propsToPass = Object.keys(cProps).reduce((acc, name) => { 58 | if (name.indexOf('on') === 0 && name[2] === name[2].toUpperCase()) { 59 | const eventName = name.substring(2).toLowerCase(); 60 | if (typeof document !== 'undefined' && isCoveredByReact(eventName, document)) { 61 | (acc as any)[name] = (cProps as any)[name]; 62 | } 63 | } else { 64 | (acc as any)[name] = (cProps as any)[name]; 65 | } 66 | return acc; 67 | }, {}); 68 | 69 | if (manipulatePropsFunction) { 70 | propsToPass = manipulatePropsFunction(this.props, propsToPass); 71 | } 72 | 73 | let newProps: Omit, 'forwardedRef'> = { 74 | ...propsToPass, 75 | ref: mergeRefs(forwardedRef, this.setComponentElRef), 76 | style, 77 | }; 78 | 79 | return React.createElement(tagName, newProps, children); 80 | } 81 | 82 | static get displayName() { 83 | return displayName; 84 | } 85 | }; 86 | 87 | // If context was passed to createReactComponent then conditionally add it to the Component Class 88 | if (ReactComponentContext) { 89 | ReactComponent.contextType = ReactComponentContext; 90 | } 91 | 92 | return createForwardRef(ReactComponent, displayName); 93 | }; 94 | -------------------------------------------------------------------------------- /react/src/react-component-lib/createOverlayComponent.tsx: -------------------------------------------------------------------------------- 1 | import { OverlayEventDetail } from './interfaces'; 2 | import React from 'react'; 3 | import ReactDOM from 'react-dom'; 4 | 5 | import { attachProps } from './utils'; 6 | 7 | interface OverlayElement extends HTMLElement { 8 | present: () => Promise; 9 | dismiss: (data?: any, role?: string | undefined) => Promise; 10 | } 11 | 12 | export interface ReactOverlayProps { 13 | children?: React.ReactNode; 14 | isOpen: boolean; 15 | onDidDismiss?: (event: CustomEvent) => void; 16 | onDidPresent?: (event: CustomEvent) => void; 17 | onWillDismiss?: (event: CustomEvent) => void; 18 | onWillPresent?: (event: CustomEvent) => void; 19 | } 20 | 21 | export const createOverlayComponent = < 22 | OverlayComponent extends object, 23 | OverlayType extends OverlayElement 24 | >( 25 | displayName: string, 26 | controller: { create: (options: any) => Promise }, 27 | ) => { 28 | const didDismissEventName = `on${displayName}DidDismiss`; 29 | const didPresentEventName = `on${displayName}DidPresent`; 30 | const willDismissEventName = `on${displayName}WillDismiss`; 31 | const willPresentEventName = `on${displayName}WillPresent`; 32 | 33 | type Props = OverlayComponent & 34 | ReactOverlayProps & { 35 | forwardedRef?: React.RefObject; 36 | }; 37 | 38 | class Overlay extends React.Component { 39 | overlay?: OverlayType; 40 | el: HTMLDivElement; 41 | 42 | constructor(props: Props) { 43 | super(props); 44 | this.el = document.createElement('div'); 45 | this.handleDismiss = this.handleDismiss.bind(this); 46 | } 47 | 48 | static get displayName() { 49 | return displayName; 50 | } 51 | 52 | componentDidMount() { 53 | if (this.props.isOpen) { 54 | this.present(); 55 | } 56 | } 57 | 58 | componentWillUnmount() { 59 | if (this.overlay) { 60 | this.overlay.dismiss(); 61 | } 62 | } 63 | 64 | handleDismiss(event: CustomEvent>) { 65 | if (this.props.onDidDismiss) { 66 | this.props.onDidDismiss(event); 67 | } 68 | if (this.props.forwardedRef) { 69 | (this.props.forwardedRef as any).current = undefined; 70 | } 71 | } 72 | 73 | async componentDidUpdate(prevProps: Props) { 74 | if (this.overlay) { 75 | attachProps(this.overlay, this.props, prevProps); 76 | } 77 | 78 | if (prevProps.isOpen !== this.props.isOpen && this.props.isOpen === true) { 79 | this.present(prevProps); 80 | } 81 | if (this.overlay && prevProps.isOpen !== this.props.isOpen && this.props.isOpen === false) { 82 | await this.overlay.dismiss(); 83 | } 84 | } 85 | 86 | async present(prevProps?: Props) { 87 | const { 88 | children, 89 | isOpen, 90 | onDidDismiss, 91 | onDidPresent, 92 | onWillDismiss, 93 | onWillPresent, 94 | ...cProps 95 | } = this.props; 96 | const elementProps = { 97 | ...cProps, 98 | ref: this.props.forwardedRef, 99 | [didDismissEventName]: this.handleDismiss, 100 | [didPresentEventName]: (e: CustomEvent) => 101 | this.props.onDidPresent && this.props.onDidPresent(e), 102 | [willDismissEventName]: (e: CustomEvent) => 103 | this.props.onWillDismiss && this.props.onWillDismiss(e), 104 | [willPresentEventName]: (e: CustomEvent) => 105 | this.props.onWillPresent && this.props.onWillPresent(e), 106 | }; 107 | 108 | this.overlay = await controller.create({ 109 | ...elementProps, 110 | component: this.el, 111 | componentProps: {}, 112 | }); 113 | 114 | if (this.props.forwardedRef) { 115 | (this.props.forwardedRef as any).current = this.overlay; 116 | } 117 | 118 | attachProps(this.overlay, elementProps, prevProps); 119 | 120 | await this.overlay.present(); 121 | } 122 | 123 | render() { 124 | return ReactDOM.createPortal(this.props.isOpen ? this.props.children : null, this.el); 125 | } 126 | } 127 | 128 | return React.forwardRef((props, ref) => { 129 | return ; 130 | }); 131 | }; 132 | -------------------------------------------------------------------------------- /react/src/react-component-lib/index.ts: -------------------------------------------------------------------------------- 1 | export { createReactComponent } from './createComponent'; 2 | export { createOverlayComponent } from './createOverlayComponent'; 3 | -------------------------------------------------------------------------------- /react/src/react-component-lib/interfaces.ts: -------------------------------------------------------------------------------- 1 | // General types important to applications using stencil built components 2 | export interface EventEmitter { 3 | emit: (data?: T) => CustomEvent; 4 | } 5 | 6 | export interface StyleReactProps { 7 | class?: string; 8 | className?: string; 9 | style?: { [key: string]: any }; 10 | } 11 | 12 | export interface OverlayEventDetail { 13 | data?: T; 14 | role?: string; 15 | } 16 | 17 | export interface OverlayInterface { 18 | el: HTMLElement; 19 | animated: boolean; 20 | keyboardClose: boolean; 21 | overlayIndex: number; 22 | presented: boolean; 23 | 24 | enterAnimation?: any; 25 | leaveAnimation?: any; 26 | 27 | didPresent: EventEmitter; 28 | willPresent: EventEmitter; 29 | willDismiss: EventEmitter; 30 | didDismiss: EventEmitter; 31 | 32 | present(): Promise; 33 | dismiss(data?: any, role?: string): Promise; 34 | } 35 | -------------------------------------------------------------------------------- /react/src/react-component-lib/utils/attachProps.ts: -------------------------------------------------------------------------------- 1 | import { camelToDashCase } from './case'; 2 | 3 | export const attachProps = (node: HTMLElement, newProps: any, oldProps: any = {}) => { 4 | // some test frameworks don't render DOM elements, so we test here to make sure we are dealing with DOM first 5 | if (node instanceof Element) { 6 | // add any classes in className to the class list 7 | const className = getClassName(node.classList, newProps, oldProps); 8 | if (className !== '') { 9 | node.className = className; 10 | } 11 | 12 | Object.keys(newProps).forEach((name) => { 13 | if ( 14 | name === 'children' || 15 | name === 'style' || 16 | name === 'ref' || 17 | name === 'class' || 18 | name === 'className' || 19 | name === 'forwardedRef' 20 | ) { 21 | return; 22 | } 23 | if (name.indexOf('on') === 0 && name[2] === name[2].toUpperCase()) { 24 | const eventName = name.substring(2); 25 | const eventNameLc = eventName[0].toLowerCase() + eventName.substring(1); 26 | 27 | if (typeof document !== 'undefined' && !isCoveredByReact(eventNameLc, document)) { 28 | syncEvent(node, eventNameLc, newProps[name]); 29 | } 30 | } else { 31 | (node as any)[name] = newProps[name]; 32 | const propType = typeof newProps[name]; 33 | if (propType === 'string') { 34 | node.setAttribute(camelToDashCase(name), newProps[name]); 35 | } else { 36 | (node as any)[name] = newProps[name]; 37 | } 38 | } 39 | }); 40 | } 41 | }; 42 | 43 | export const getClassName = (classList: DOMTokenList, newProps: any, oldProps: any) => { 44 | const newClassProp: string = newProps.className || newProps.class; 45 | const oldClassProp: string = oldProps.className || oldProps.class; 46 | // map the classes to Maps for performance 47 | const currentClasses = arrayToMap(classList); 48 | const incomingPropClasses = arrayToMap(newClassProp ? newClassProp.split(' ') : []); 49 | const oldPropClasses = arrayToMap(oldClassProp ? oldClassProp.split(' ') : []); 50 | const finalClassNames: string[] = []; 51 | // loop through each of the current classes on the component 52 | // to see if it should be a part of the classNames added 53 | currentClasses.forEach((currentClass) => { 54 | if (incomingPropClasses.has(currentClass)) { 55 | // add it as its already included in classnames coming in from newProps 56 | finalClassNames.push(currentClass); 57 | incomingPropClasses.delete(currentClass); 58 | } else if (!oldPropClasses.has(currentClass)) { 59 | // add it as it has NOT been removed by user 60 | finalClassNames.push(currentClass); 61 | } 62 | }); 63 | incomingPropClasses.forEach((s) => finalClassNames.push(s)); 64 | return finalClassNames.join(' '); 65 | }; 66 | 67 | /** 68 | * Checks if an event is supported in the current execution environment. 69 | * @license Modernizr 3.0.0pre (Custom Build) | MIT 70 | */ 71 | export const isCoveredByReact = (eventNameSuffix: string, doc: Document) => { 72 | const eventName = 'on' + eventNameSuffix; 73 | let isSupported = eventName in doc; 74 | 75 | if (!isSupported) { 76 | const element = doc.createElement('div'); 77 | element.setAttribute(eventName, 'return;'); 78 | isSupported = typeof (element as any)[eventName] === 'function'; 79 | } 80 | 81 | return isSupported; 82 | }; 83 | 84 | export const syncEvent = ( 85 | node: Element & { __events?: { [key: string]: ((e: Event) => any) | undefined } }, 86 | eventName: string, 87 | newEventHandler?: (e: Event) => any, 88 | ) => { 89 | const eventStore = node.__events || (node.__events = {}); 90 | const oldEventHandler = eventStore[eventName]; 91 | 92 | // Remove old listener so they don't double up. 93 | if (oldEventHandler) { 94 | node.removeEventListener(eventName, oldEventHandler); 95 | } 96 | 97 | // Bind new listener. 98 | node.addEventListener( 99 | eventName, 100 | (eventStore[eventName] = function handler(e: Event) { 101 | if (newEventHandler) { 102 | newEventHandler.call(this, e); 103 | } 104 | }), 105 | ); 106 | }; 107 | 108 | const arrayToMap = (arr: string[] | DOMTokenList) => { 109 | const map = new Map(); 110 | (arr as string[]).forEach((s: string) => map.set(s, s)); 111 | return map; 112 | }; 113 | -------------------------------------------------------------------------------- /react/src/react-component-lib/utils/case.ts: -------------------------------------------------------------------------------- 1 | export const dashToPascalCase = (str: string) => 2 | str 3 | .toLowerCase() 4 | .split('-') 5 | .map((segment) => segment.charAt(0).toUpperCase() + segment.slice(1)) 6 | .join(''); 7 | export const camelToDashCase = (str: string) => 8 | str.replace(/([A-Z])/g, (m: string) => `-${m[0].toLowerCase()}`); 9 | -------------------------------------------------------------------------------- /react/src/react-component-lib/utils/dev.ts: -------------------------------------------------------------------------------- 1 | export const isDevMode = () => { 2 | return process && process.env && process.env.NODE_ENV === 'development'; 3 | }; 4 | 5 | const warnings: { [key: string]: boolean } = {}; 6 | 7 | export const deprecationWarning = (key: string, message: string) => { 8 | if (isDevMode()) { 9 | if (!warnings[key]) { 10 | console.warn(message); 11 | warnings[key] = true; 12 | } 13 | } 14 | }; 15 | -------------------------------------------------------------------------------- /react/src/react-component-lib/utils/index.tsx: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | 3 | import type { StyleReactProps } from '../interfaces'; 4 | 5 | type Mutable = { -readonly [P in keyof T]-?: T[P] }; // Remove readonly and ? 6 | 7 | export type StencilReactExternalProps = PropType & 8 | Omit, 'style'> & 9 | StyleReactProps; 10 | 11 | // The comma in the type is to trick typescript because it things a single generic in a tsx file is jsx 12 | export const mergeRefs = (...refs: React.Ref[]) => ( 13 | value: ElementType, 14 | ) => 15 | refs.forEach((ref) => { 16 | if (typeof ref === 'function') { 17 | ref(value); 18 | } else if (ref != null) { 19 | // This is typed as readonly so we need to allow for override 20 | (ref as Mutable>).current = value; 21 | } 22 | }); 23 | 24 | export const createForwardRef = ( 25 | ReactComponent: any, 26 | displayName: string, 27 | ) => { 28 | const forwardRef = ( 29 | props: StencilReactExternalProps, 30 | ref: React.Ref, 31 | ) => { 32 | return ; 33 | }; 34 | forwardRef.displayName = displayName; 35 | 36 | return React.forwardRef(forwardRef); 37 | }; 38 | 39 | export * from './attachProps'; 40 | export * from './case'; 41 | -------------------------------------------------------------------------------- /react/tsconfig.json: -------------------------------------------------------------------------------- 1 | { 2 | "compilerOptions": { 3 | "allowUnreachableCode": false, 4 | "allowSyntheticDefaultImports": true, 5 | "declaration": true, 6 | "emitDecoratorMetadata": true, 7 | "experimentalDecorators": true, 8 | "esModuleInterop": true, 9 | "lib": ["dom", "es2015"], 10 | "module": "es2015", 11 | "moduleResolution": "node", 12 | "noImplicitAny": true, 13 | "noImplicitReturns": true, 14 | "noUnusedLocals": true, 15 | "noUnusedParameters": true, 16 | "outDir": "dist", 17 | "removeComments": false, 18 | "sourceMap": true, 19 | "jsx": "react", 20 | "target": "es2015" 21 | }, 22 | "include": [ 23 | "src/**/*.ts", 24 | "src/**/*.tsx" 25 | ], 26 | "exclude": [ 27 | "**/__tests__/**" 28 | ], 29 | "compileOnSave": false, 30 | "buildOnSave": false 31 | } -------------------------------------------------------------------------------- /src/animations/animate/bouncing-entrances.ts: -------------------------------------------------------------------------------- 1 | import { ANIMATIONS } from './common'; 2 | 3 | const BOUNCE_DEFAULT: Keyframe = { 4 | easing: 'cubic-bezier(0.215, 0.61, 0.355, 1)' 5 | }; 6 | 7 | const BOUNCE_IN: Keyframe[] = [ 8 | { offset: 0, opacity: 0, transform: 'scale(0.3)', ...BOUNCE_DEFAULT }, 9 | { offset: 0.2, opacity: 0, transform: 'scale(1.1)', ...BOUNCE_DEFAULT }, 10 | { offset: 0.4, opacity: 0, transform: 'scale(0.9)', ...BOUNCE_DEFAULT }, 11 | { offset: 0.6, opacity: 1, transform: 'scale(1.03)', ...BOUNCE_DEFAULT }, 12 | { offset: 0.8, opacity: 1, transform: 'scale(0.97)', ...BOUNCE_DEFAULT }, 13 | { offset: 1, opacity: 1, transform: 'scale(1)', ...BOUNCE_DEFAULT } 14 | ]; 15 | 16 | const BOUNCE_IN_UP: Keyframe[] = [ 17 | { offset: 0, opacity: 0, transform: 'translateY(3000px)', ...BOUNCE_DEFAULT }, 18 | { offset: 0.6, opacity: 1, transform: 'translateY(-20px)', ...BOUNCE_DEFAULT }, 19 | { offset: 0.75, opacity: 1, transform: 'translateY(10px)', ...BOUNCE_DEFAULT }, 20 | { offset: 0.9, opacity: 1, transform: 'translateY(-5px)', ...BOUNCE_DEFAULT }, 21 | { offset: 1, opacity: 1, transform: 'translateY(0px)', ...BOUNCE_DEFAULT } 22 | ]; 23 | 24 | const BOUNCE_IN_DOWN: Keyframe[] = [ 25 | { offset: 0, opacity: 0, transform: 'translateY(-3000px)', ...BOUNCE_DEFAULT }, 26 | { offset: 0.6, opacity: 1, transform: 'translateY(25px)', ...BOUNCE_DEFAULT }, 27 | { offset: 0.75, opacity: 1, transform: 'translateY(-10px)', ...BOUNCE_DEFAULT }, 28 | { offset: 0.9, opacity: 1, transform: 'translateY(5px)', ...BOUNCE_DEFAULT }, 29 | { offset: 1, opacity: 1, transform: 'translateY(0px)', ...BOUNCE_DEFAULT } 30 | ]; 31 | 32 | const BOUNCE_IN_RIGHT: Keyframe[] = [ 33 | { offset: 0, opacity: 0, transform: 'translateX(3000px)', ...BOUNCE_DEFAULT }, 34 | { offset: 0.6, opacity: 1, transform: 'translateX(-25px)', ...BOUNCE_DEFAULT }, 35 | { offset: 0.75, opacity: 1, transform: 'translateX(10px)', ...BOUNCE_DEFAULT }, 36 | { offset: 0.9, opacity: 1, transform: 'translateX(-5px)', ...BOUNCE_DEFAULT }, 37 | { offset: 1, opacity: 1, transform: 'translateX(0px)', ...BOUNCE_DEFAULT } 38 | ]; 39 | 40 | const BOUNCE_IN_LEFT: Keyframe[] = [ 41 | { offset: 0, opacity: 0, transform: 'translateX(-3000px)', ...BOUNCE_DEFAULT }, 42 | { offset: 0.6, opacity: 1, transform: 'translateX(25px)', ...BOUNCE_DEFAULT }, 43 | { offset: 0.75, opacity: 1, transform: 'translateX(-10px)', ...BOUNCE_DEFAULT }, 44 | { offset: 0.9, opacity: 1, transform: 'translateX(5px)', ...BOUNCE_DEFAULT }, 45 | { offset: 1, opacity: 1, transform: 'translateX(0px)', ...BOUNCE_DEFAULT } 46 | ]; 47 | 48 | export default { 49 | [ANIMATIONS.BOUNCE_IN]: BOUNCE_IN, 50 | [ANIMATIONS.BOUNCE_IN_UP]: BOUNCE_IN_UP, 51 | [ANIMATIONS.BOUNCE_IN_DOWN]: BOUNCE_IN_DOWN, 52 | [ANIMATIONS.BOUNCE_IN_RIGHT]: BOUNCE_IN_RIGHT, 53 | [ANIMATIONS.BOUNCE_IN_LEFT]: BOUNCE_IN_LEFT 54 | }; -------------------------------------------------------------------------------- /src/animations/animate/bouncing-exits.ts: -------------------------------------------------------------------------------- 1 | import { ANIMATIONS } from './common'; 2 | 3 | const BOUNCE_OUT: Keyframe[] = [ 4 | { offset: 0, opacity: 1, transform: 'scale(1)' }, 5 | { offset: 0.2, opacity: 1, transform: 'scale(0.9)' }, 6 | { offset: 0.5, opacity: 1, transform: 'scale(1.11)' }, 7 | { offset: 0.55, opacity: 1, transform: 'scale(1.11)' }, 8 | { offset: 1, opacity: 0, transform: 'scale(1)' } 9 | ]; 10 | 11 | const BOUNCE_OUT_UP: Keyframe[] = [ 12 | { offset: 0, opacity: 1, transform: 'translateY(0px)' }, 13 | { offset: 0.2, opacity: 1, transform: 'translateY(-10px)' }, 14 | { offset: 0.4, opacity: 1, transform: 'translateY(20px)' }, 15 | { offset: 0.45, opacity: 1, transform: 'translateY(20px)' }, 16 | { offset: 0.55, opacity: 1, transform: 'translateY(20px)' }, 17 | { offset: 1, opacity: 0, transform: 'translateY(-100vh)' } 18 | ]; 19 | 20 | const BOUNCE_OUT_DOWN: Keyframe[] = [ 21 | { offset: 0, opacity: 1, transform: 'translateY(0px)' }, 22 | { offset: 0.2, opacity: 1, transform: 'translateY(10px)' }, 23 | { offset: 0.4, opacity: 1, transform: 'translateY(-20px)' }, 24 | { offset: 0.45, opacity: 1, transform: 'translateY(-20px)' }, 25 | { offset: 0.55, opacity: 1, transform: 'translateY(-20px)' }, 26 | { offset: 1, opacity: 0, transform: 'translateY(100vh)' } 27 | ]; 28 | 29 | const BOUNCE_OUT_RIGHT: Keyframe[] = [ 30 | { offset: 0, opacity: 1, transform: 'translateX(0px)' }, 31 | { offset: 0.2, opacity: 1, transform: 'translateX(10px)' }, 32 | { offset: 0.4, opacity: 1, transform: 'translateX(-20px)' }, 33 | { offset: 0.45, opacity: 1, transform: 'translateX(-20px)' }, 34 | { offset: 0.55, opacity: 1, transform: 'translateX(-20px)' }, 35 | { offset: 1, opacity: 0, transform: 'translateX(100vw)' } 36 | ]; 37 | 38 | const BOUNCE_OUT_LEFT: Keyframe[] = [ 39 | { offset: 0, opacity: 1, transform: 'translateX(0px)' }, 40 | { offset: 0.2, opacity: 1, transform: 'translateX(-10px)' }, 41 | { offset: 0.4, opacity: 1, transform: 'translateX(20px)' }, 42 | { offset: 0.45, opacity: 1, transform: 'translateX(20px)' }, 43 | { offset: 0.55, opacity: 1, transform: 'translateX(20px)' }, 44 | { offset: 1, opacity: 0, transform: 'translateX(-100vw)' } 45 | ]; 46 | 47 | export default { 48 | [ANIMATIONS.BOUNCE_OUT]: BOUNCE_OUT, 49 | [ANIMATIONS.BOUNCE_OUT_UP]: BOUNCE_OUT_UP, 50 | [ANIMATIONS.BOUNCE_OUT_DOWN]: BOUNCE_OUT_DOWN, 51 | [ANIMATIONS.BOUNCE_OUT_RIGHT]: BOUNCE_OUT_RIGHT, 52 | [ANIMATIONS.BOUNCE_OUT_LEFT]: BOUNCE_OUT_LEFT 53 | }; -------------------------------------------------------------------------------- /src/animations/animate/common.ts: -------------------------------------------------------------------------------- 1 | const ANIMATIONS_ATTENTION_SEEKERS = { 2 | BOUNCE: 'bounce', 3 | FLASH: 'flash', 4 | JELLO: 'jello', 5 | PULSE: 'pulse', 6 | ROTATE: 'rotate', 7 | SHAKE: 'shake', 8 | SWING: 'swing', 9 | RUBBER_BAND: 'rubberBand', 10 | TADA: 'tada', 11 | WOBBLE: 'wobble', 12 | HEART_BEAT: 'heartBeat', 13 | } as const; 14 | 15 | const ANIMATIONS_BOUNCING_ENTRANCES = { 16 | BOUNCE_IN: 'bounceIn', 17 | BOUNCE_IN_UP: 'bounceInUp', 18 | BOUNCE_IN_DOWN: 'bounceInDown', 19 | BOUNCE_IN_RIGHT: 'bounceInRight', 20 | BOUNCE_IN_LEFT: 'bounceInLeft', 21 | } as const; 22 | 23 | const ANIMATIONS_BOUNCING_EXITS = { 24 | BOUNCE_OUT: 'bounceOut', 25 | BOUNCE_OUT_UP: 'bounceOutUp', 26 | BOUNCE_OUT_DOWN: 'bounceOutDown', 27 | BOUNCE_OUT_RIGHT: 'bounceOutRight', 28 | BOUNCE_OUT_LEFT: 'bounceOutLeft', 29 | } as const; 30 | 31 | const ANIMATIONS_FADING_ENTRANCES = { 32 | FADE_IN: 'fadeIn', 33 | FADE_IN_UP: 'fadeInUp', 34 | FADE_IN_UP_BIG: 'fadeInUpBig', 35 | FADE_IN_DOWN: 'fadeInDown', 36 | FADE_IN_DOWN_BIG: 'fadeInDownBig', 37 | FADE_IN_RIGHT: 'fadeInRight', 38 | FADE_IN_RIGHT_BIG: 'fadeInRightBig', 39 | FADE_IN_LEFT: 'fadeInLeft', 40 | FADE_IN_LEFT_BIG: 'fadeInLeftBig', 41 | } as const; 42 | 43 | const ANIMATIONS_FADING_EXITS = { 44 | FADE_OUT: 'fadeOut', 45 | FADE_OUT_UP: 'fadeOutUp', 46 | FADE_OUT_UP_BIG: 'fadeOutUpBig', 47 | FADE_OUT_DOWN: 'fadeOutDown', 48 | FADE_OUT_DOWN_BIG: 'fadeOutDownBig', 49 | FADE_OUT_RIGHT: 'fadeOutRight', 50 | FADE_OUT_RIGHT_BIG: 'fadeOutRightBig', 51 | FADE_OUT_LEFT: 'fadeOutLeft', 52 | FADE_OUT_LEFT_BIG: 'fadeOutLeftBig', 53 | } as const; 54 | 55 | const ANIMATIONS_FLIPPERS = { 56 | FLIP: 'flip', 57 | FLIP_IN_X: 'flipInX', 58 | FLIP_IN_Y: 'flipInY', 59 | FLIP_OUT_X: 'flipOutX', 60 | FLIP_OUT_Y: 'flipOutY', 61 | } as const; 62 | 63 | const ANIMATIONS_LIGHTSPEED = { 64 | LIGHT_SPEED_IN: 'lightSpeedIn', 65 | LIGHT_SPEED_OUT: 'lightSpeedOut', 66 | } as const; 67 | 68 | const ANIMATIONS_ROTATING_ENTRANCES = { 69 | ROTATE_IN: 'rotateIn', 70 | ROTATE_IN_CLOCKWISE: 'rotateInClockwise', 71 | ROTATE_IN_DOWN_LEFT: 'rotateInDownLeft', 72 | ROTATE_IN_DOWN_RIGHT: 'rotateInDownRight', 73 | ROTATE_IN_UP_LEFT: 'rotateInUpLeft', 74 | ROTATE_IN_UP_RIGHT: 'rotateInUpRight', 75 | } as const; 76 | 77 | const ANIMATIONS_ROTATING_EXITS = { 78 | ROTATE_OUT: 'rotateOut', 79 | ROTATE_OUT_CLOCKWISE: 'rotateOutClockwise', 80 | ROTATE_OUT_DOWN_LEFT: 'rotateOutDownLeft', 81 | ROTATE_OUT_DOWN_RIGHT: 'rotateOutDownRight', 82 | ROTATE_OUT_UP_LEFT: 'rotateOutUpLeft', 83 | ROTATE_OUT_UP_RIGHT: 'rotateOutUpRight', 84 | } as const; 85 | 86 | const ANIMATIONS_SLIDING_ENTRANCES = { 87 | SLIDE_IN_UP: 'slideInUp', 88 | SLIDE_IN_DOWN: 'slideInDown', 89 | SLIDE_IN_LEFT: 'slideInLeft', 90 | SLIDE_IN_RIGHT: 'slideInRight', 91 | } as const; 92 | 93 | const ANIMATIONS_SLIDING_EXITS = { 94 | SLIDE_OUT_UP: 'slideOutUp', 95 | SLIDE_OUT_DOWN: 'slideOutDown', 96 | SLIDE_OUT_LEFT: 'slideOutLeft', 97 | SLIDE_OUT_RIGHT: 'slideOutRight', 98 | } as const; 99 | 100 | const ANIMATIONS_ZOOM_ENTRANCES = { 101 | ZOOM_IN: 'zoomIn', 102 | ZOOM_IN_UP: 'zoomInUp', 103 | ZOOM_IN_DOWN: 'zoomInDown', 104 | ZOOM_IN_LEFT: 'zoomInLeft', 105 | ZOOM_IN_RIGHT: 'zoomInRight', 106 | } as const; 107 | 108 | const ANIMATIONS_ZOOM_EXITS = { 109 | ZOOM_OUT: 'zoomOut', 110 | ZOOM_OUT_UP: 'zoomOutUp', 111 | ZOOM_OUT_DOWN: 'zoomOutDown', 112 | ZOOM_OUT_LEFT: 'zoomOutLeft', 113 | ZOOM_OUT_RIGHT: 'zoomOutRight', 114 | } as const; 115 | 116 | const ANIMATIONS_SPECIALS = { 117 | HINGE: 'hinge', 118 | JACK_IN_THE_BOX: 'jackInTheBox', 119 | ROLL_IN: 'rollIn', 120 | ROLL_OUT: 'rollOut', 121 | } as const; 122 | 123 | export const ANIMATIONS = { 124 | ...ANIMATIONS_ATTENTION_SEEKERS, 125 | ...ANIMATIONS_BOUNCING_ENTRANCES, 126 | ...ANIMATIONS_BOUNCING_EXITS, 127 | ...ANIMATIONS_FADING_ENTRANCES, 128 | ...ANIMATIONS_FADING_EXITS, 129 | ...ANIMATIONS_FLIPPERS, 130 | ...ANIMATIONS_LIGHTSPEED, 131 | ...ANIMATIONS_ROTATING_ENTRANCES, 132 | ...ANIMATIONS_ROTATING_EXITS, 133 | ...ANIMATIONS_SLIDING_ENTRANCES, 134 | ...ANIMATIONS_SLIDING_EXITS, 135 | ...ANIMATIONS_ZOOM_ENTRANCES, 136 | ...ANIMATIONS_ZOOM_EXITS, 137 | ...ANIMATIONS_SPECIALS, 138 | } as const; -------------------------------------------------------------------------------- /src/animations/animate/fading-entrances.ts: -------------------------------------------------------------------------------- 1 | import { ANIMATIONS } from './common'; 2 | 3 | const FADE_IN: Keyframe[] = [ 4 | { offset: 0, opacity: 0 }, 5 | { offset: 1, opacity: 1 }, 6 | ]; 7 | 8 | const FADE_IN_UP: Keyframe[] = [ 9 | { offset: 0, opacity: 0, transform: 'translateY(100%)' }, 10 | { offset: 1, opacity: 1, transform: 'translateY(0)' } 11 | ]; 12 | 13 | const FADE_IN_UP_BIG: Keyframe[] = [ 14 | { offset: 0, opacity: 0, transform: 'translateY(100vh)' }, 15 | { offset: 1, opacity: 1, transform: 'translateY(0px)' } 16 | ]; 17 | 18 | const FADE_IN_DOWN: Keyframe[] = [ 19 | { offset: 0, opacity: 0, transform: 'translateY(-100%)' }, 20 | { offset: 1, opacity: 1, transform: 'translateY(0)' } 21 | ]; 22 | 23 | const FADE_IN_DOWN_BIG: Keyframe[] = [ 24 | { offset: 0, opacity: 0, transform: 'translateY(-100vh)' }, 25 | { offset: 1, opacity: 1, transform: 'translateY(0px)' } 26 | ]; 27 | 28 | const FADE_IN_RIGHT: Keyframe[] = [ 29 | { offset: 0, opacity: 0, transform: 'translateX(100%)' }, 30 | { offset: 1, opacity: 1, transform: 'translateX(0)' } 31 | ]; 32 | 33 | const FADE_IN_RIGHT_BIG: Keyframe[] = [ 34 | { offset: 0, opacity: 0, transform: 'translateX(100vw)' }, 35 | { offset: 1, opacity: 1, transform: 'translateX(0px)' } 36 | ]; 37 | 38 | const FADE_IN_LEFT: Keyframe[] = [ 39 | { offset: 0, opacity: 0, transform: 'translateX(-100%)' }, 40 | { offset: 1, opacity: 1, transform: 'translateX(0)' } 41 | ]; 42 | 43 | const FADE_IN_LEFT_BIG: Keyframe[] = [ 44 | { offset: 0, opacity: 0, transform: 'translateX(-100vw)' }, 45 | { offset: 1, opacity: 1, transform: 'translateX(0px)' } 46 | ]; 47 | 48 | export default { 49 | [ANIMATIONS.FADE_IN]: FADE_IN, 50 | [ANIMATIONS.FADE_IN_UP]: FADE_IN_UP, 51 | [ANIMATIONS.FADE_IN_UP_BIG]: FADE_IN_UP_BIG, 52 | [ANIMATIONS.FADE_IN_DOWN]: FADE_IN_DOWN, 53 | [ANIMATIONS.FADE_IN_DOWN_BIG]: FADE_IN_DOWN_BIG, 54 | [ANIMATIONS.FADE_IN_RIGHT]: FADE_IN_RIGHT, 55 | [ANIMATIONS.FADE_IN_RIGHT_BIG]: FADE_IN_RIGHT_BIG, 56 | [ANIMATIONS.FADE_IN_LEFT]: FADE_IN_LEFT, 57 | [ANIMATIONS.FADE_IN_LEFT_BIG]: FADE_IN_LEFT_BIG 58 | }; -------------------------------------------------------------------------------- /src/animations/animate/fading-exits.ts: -------------------------------------------------------------------------------- 1 | import { ANIMATIONS } from './common'; 2 | 3 | const FADE_OUT: Keyframe[] = [ 4 | { offset: 0, opacity: 1 }, 5 | { offset: 1, opacity: 0 }, 6 | ]; 7 | 8 | const FADE_OUT_UP: Keyframe[] = [ 9 | { offset: 0, opacity: 1, transform: 'translateY(0)' }, 10 | { offset: 1, opacity: 0, transform: 'translateY(-100%)' } 11 | ]; 12 | 13 | const FADE_OUT_UP_BIG: Keyframe[] = [ 14 | { offset: 0, opacity: 1, transform: 'translateY(0px)' }, 15 | { offset: 1, opacity: 0, transform: 'translateY(-100vh)' } 16 | ]; 17 | 18 | const FADE_OUT_DOWN: Keyframe[] = [ 19 | { offset: 0, opacity: 1, transform: 'translateY(0)' }, 20 | { offset: 1, opacity: 0, transform: 'translateY(100%)' } 21 | ]; 22 | 23 | const FADE_OUT_DOWN_BIG: Keyframe[] = [ 24 | { offset: 0, opacity: 1, transform: 'translateY(0px)' }, 25 | { offset: 1, opacity: 0, transform: 'translateY(100vh)' } 26 | ]; 27 | 28 | const FADE_OUT_RIGHT: Keyframe[] = [ 29 | { offset: 0, opacity: 1, transform: 'translateX(0)' }, 30 | { offset: 1, opacity: 0, transform: 'translateX(100%)' } 31 | ]; 32 | 33 | const FADE_OUT_RIGHT_BIG: Keyframe[] = [ 34 | { offset: 0, opacity: 1, transform: 'translateX(0px)' }, 35 | { offset: 1, opacity: 0, transform: 'translateX(100vw)' } 36 | ]; 37 | 38 | const FADE_OUT_LEFT: Keyframe[] = [ 39 | { offset: 0, opacity: 1, transform: 'translateX(0)' }, 40 | { offset: 1, opacity: 0, transform: 'translateX(-100%)' } 41 | ]; 42 | 43 | const FADE_OUT_LEFT_BIG: Keyframe[] = [ 44 | { offset: 0, opacity: 1, transform: 'translateX(0px)' }, 45 | { offset: 1, opacity: 0, transform: 'translateX(-100vw)' } 46 | ]; 47 | 48 | export default { 49 | [ANIMATIONS.FADE_OUT]: FADE_OUT, 50 | [ANIMATIONS.FADE_OUT_UP]: FADE_OUT_UP, 51 | [ANIMATIONS.FADE_OUT_UP_BIG]: FADE_OUT_UP_BIG, 52 | [ANIMATIONS.FADE_OUT_DOWN]: FADE_OUT_DOWN, 53 | [ANIMATIONS.FADE_OUT_DOWN_BIG]: FADE_OUT_DOWN_BIG, 54 | [ANIMATIONS.FADE_OUT_RIGHT]: FADE_OUT_RIGHT, 55 | [ANIMATIONS.FADE_OUT_RIGHT_BIG]: FADE_OUT_RIGHT_BIG, 56 | [ANIMATIONS.FADE_OUT_LEFT]: FADE_OUT_LEFT, 57 | [ANIMATIONS.FADE_OUT_LEFT_BIG]: FADE_OUT_LEFT_BIG 58 | }; -------------------------------------------------------------------------------- /src/animations/animate/flippers.ts: -------------------------------------------------------------------------------- 1 | import { ANIMATIONS } from './common'; 2 | 3 | const FLIP: Keyframe[] = [ 4 | { offset: 0, backfaceVisibility: 'visible', easing: 'ease-out', transform: 'perspective(400px) scale(1) translateZ(0) rotateY(-360deg)' }, 5 | { offset: 0.4, backfaceVisibility: 'visible', easing: 'ease-out', transform: 'perspective(400px) scale(1) translateZ(150px) rotateY(-190deg)' }, 6 | { offset: 0.5, backfaceVisibility: 'visible', easing: 'ease-in', transform: 'perspective(400px) scale(1) translateZ(150px) rotateY(-170deg)' }, 7 | { offset: 0.8, backfaceVisibility: 'visible', easing: 'ease-in', transform: 'perspective(400px) scale(0.95) translateZ(0) rotateY(0deg)' }, 8 | { offset: 1, backfaceVisibility: 'visible', easing: 'ease-in', transform: 'perspective(400px) scale(1) translateZ(0) rotateY(0deg)' } 9 | ]; 10 | 11 | const FLIP_IN_X: Keyframe[] = [ 12 | { offset: 0, backfaceVisibility: 'visible', opacity: 0, easing: 'ease-in', transform: 'perspective(400px) rotateX(90deg)' }, 13 | { offset: 0.4, backfaceVisibility: 'visible', opacity: 0.5, easing: 'ease-in', transform: 'perspective(400px) rotateX(-20deg)' }, 14 | { offset: 0.6, backfaceVisibility: 'visible', opacity: 1, easing: 'ease-in', transform: 'perspective(400px) rotateX(10deg)' }, 15 | { offset: 0.8, backfaceVisibility: 'visible', opacity: 1, easing: 'ease-in', transform: 'perspective(400px) rotateX(-5deg)' }, 16 | { offset: 1, backfaceVisibility: 'visible', opacity: 1, easing: 'ease-in', transform: 'perspective(400px) rotateX(0deg)' } 17 | ]; 18 | 19 | const FLIP_IN_Y: Keyframe[] = [ 20 | { offset: 0, backfaceVisibility: 'visible', opacity: 0, easing: 'ease-in', transform: 'perspective(400px) rotateY(90deg)' }, 21 | { offset: 0.4, backfaceVisibility: 'visible', opacity: 0.5, easing: 'ease-in', transform: 'perspective(400px) rotateY(-20deg)' }, 22 | { offset: 0.6, backfaceVisibility: 'visible', opacity: 1, easing: 'ease-in', transform: 'perspective(400px) rotateY(10deg)' }, 23 | { offset: 0.8, backfaceVisibility: 'visible', opacity: 1, easing: 'ease-in', transform: 'perspective(400px) rotateY(-5deg)' }, 24 | { offset: 1, backfaceVisibility: 'visible', opacity: 1, easing: 'ease-in', transform: 'perspective(400px) rotateY(0deg)' } 25 | ]; 26 | 27 | const FLIP_OUT_X: Keyframe[] = [ 28 | { offset: 0, backfaceVisibility: 'visible', opacity: 1, transform: 'perspective(400px) rotateX(0deg)' }, 29 | { offset: 0.3, backfaceVisibility: 'visible', opacity: 1, transform: 'perspective(400px) rotateX(-15deg)' }, 30 | { offset: 1, backfaceVisibility: 'visible', opacity: 0, transform: 'perspective(400px) rotateX(90deg)' } 31 | ]; 32 | 33 | const FLIP_OUT_Y: Keyframe[] = [ 34 | { offset: 0, backfaceVisibility: 'visible', opacity: 1, transform: 'perspective(400px) rotateY(0deg)' }, 35 | { offset: 0.3, backfaceVisibility: 'visible', opacity: 1, transform: 'perspective(400px) rotateY(-15deg)' }, 36 | { offset: 1, backfaceVisibility: 'visible', opacity: 0, transform: 'perspective(400px) rotateY(90deg)' } 37 | ]; 38 | 39 | export default { 40 | [ANIMATIONS.FLIP]: FLIP, 41 | [ANIMATIONS.FLIP_IN_X]: FLIP_IN_X, 42 | [ANIMATIONS.FLIP_IN_Y]: FLIP_IN_Y, 43 | [ANIMATIONS.FLIP_OUT_X]: FLIP_OUT_X, 44 | [ANIMATIONS.FLIP_OUT_Y]: FLIP_OUT_Y 45 | }; -------------------------------------------------------------------------------- /src/animations/animate/index.ts: -------------------------------------------------------------------------------- 1 | import ATTENTION_SEEKERS from './attention-seekers'; 2 | import BOUNCING_ENTRANCES from './bouncing-entrances'; 3 | import BOUNCING_EXITS from './bouncing-exits'; 4 | import FADING_ENTRANCES from './fading-entrances'; 5 | import FADING_EXITS from './fading-exits'; 6 | import FLIPPERS from './flippers'; 7 | import LIGHTSPEED from './lightspeed'; 8 | import ROTATING_ENTRANCES from './rotating-entrances'; 9 | import ROTATING_EXITS from './rotating-exits'; 10 | import SLIDING_ENTRANCES from './sliding-entrances'; 11 | import SLIDING_EXITS from './sliding-exits'; 12 | import SPECIALS from './specials'; 13 | import ZOOM_ENTRANCES from './zoom-entrances'; 14 | import ZOOM_EXITS from './zoom-exits'; 15 | 16 | export default { 17 | ...ATTENTION_SEEKERS, 18 | ...BOUNCING_ENTRANCES, 19 | ...BOUNCING_EXITS, 20 | ...FADING_ENTRANCES, 21 | ...FADING_EXITS, 22 | ...FLIPPERS, 23 | ...LIGHTSPEED, 24 | ...ROTATING_ENTRANCES, 25 | ...ROTATING_EXITS, 26 | ...SLIDING_ENTRANCES, 27 | ...SLIDING_EXITS, 28 | ...SPECIALS, 29 | ...ZOOM_ENTRANCES, 30 | ...ZOOM_EXITS, 31 | } -------------------------------------------------------------------------------- /src/animations/animate/lightspeed.ts: -------------------------------------------------------------------------------- 1 | import { ANIMATIONS } from './common'; 2 | 3 | const LIGHT_SPEED_IN: Keyframe[] = [ 4 | { offset: 0, easing: 'ease-out', opacity: 0, transform: 'translateX(200px) skewX(-30deg)' }, 5 | { offset: 0.6, easing: 'ease-out', opacity: 1, transform: 'translateX(0px) skewX(20deg)' }, 6 | { offset: 0.8, easing: 'ease-out', opacity: 1, transform: 'translateX(0px) skewX(-5deg)' }, 7 | { offset: 1, easing: 'ease-out', opacity: 1, transform: 'translateX(0px) skewX(0deg)' } 8 | ]; 9 | 10 | const LIGHT_SPEED_OUT: Keyframe[] = [ 11 | { offset: 0, easing: 'ease-in', opacity: 1, transform: 'translateX(0px) skewX(0deg)' }, 12 | { offset: 1, easing: 'ease-in', opacity: 0, transform: 'translateX(200px) skewX(30deg)' } 13 | ]; 14 | 15 | export default { 16 | [ANIMATIONS.LIGHT_SPEED_IN]: LIGHT_SPEED_IN, 17 | [ANIMATIONS.LIGHT_SPEED_OUT]: LIGHT_SPEED_OUT 18 | }; -------------------------------------------------------------------------------- /src/animations/animate/rotating-entrances.ts: -------------------------------------------------------------------------------- 1 | import { ANIMATIONS } from './common'; 2 | 3 | const ROTATE_IN: Keyframe[] = [ 4 | { offset: 0, opacity: 0, transform: 'rotateZ(180deg)', transformOrigin: 'center' }, 5 | { offset: 1, opacity: 1, transform: 'rotateZ(0deg)', transformOrigin: 'center' } 6 | ]; 7 | 8 | const ROTATE_IN_CLOCKWISE: Keyframe[] = [ 9 | { offset: 0, opacity: 0, transform: 'rotateZ(-180deg)', transformOrigin: 'center' }, 10 | { offset: 1, opacity: 1, transform: 'rotateZ(0deg)', transformOrigin: 'center' } 11 | ]; 12 | 13 | const ROTATE_IN_DOWN_LEFT: Keyframe[] = [ 14 | { offset: 0, opacity: 0, transform: 'rotateZ(-45deg)', transformOrigin: 'left bottom' }, 15 | { offset: 1, opacity: 1, transform: 'rotateZ(0deg)', transformOrigin: 'left bottom' } 16 | ]; 17 | 18 | const ROTATE_IN_DOWN_RIGHT: Keyframe[] = [ 19 | { offset: 0, opacity: 0, transform: 'rotateZ(45deg)', transformOrigin: 'right bottom' }, 20 | { offset: 1, opacity: 1, transform: 'rotateZ(0deg)', transformOrigin: 'right bottom' } 21 | ]; 22 | 23 | const ROTATE_IN_UP_LEFT: Keyframe[] = [ 24 | { offset: 0, opacity: 0, transform: 'rotateZ(45deg)', transformOrigin: 'left bottom' }, 25 | { offset: 1, opacity: 1, transform: 'rotateZ(0deg)', transformOrigin: 'left bottom' } 26 | ]; 27 | 28 | const ROTATE_IN_UP_RIGHT: Keyframe[] = [ 29 | { offset: 0, opacity: 0, transform: 'rotateZ(-45deg)', transformOrigin: 'right bottom' }, 30 | { offset: 1, opacity: 1, transform: 'rotateZ(0deg)', transformOrigin: 'right bottom' } 31 | ]; 32 | 33 | export default { 34 | [ANIMATIONS.ROTATE_IN]: ROTATE_IN, 35 | [ANIMATIONS.ROTATE_IN_CLOCKWISE]: ROTATE_IN_CLOCKWISE, 36 | [ANIMATIONS.ROTATE_IN_DOWN_LEFT]: ROTATE_IN_DOWN_LEFT, 37 | [ANIMATIONS.ROTATE_IN_DOWN_RIGHT]: ROTATE_IN_DOWN_RIGHT, 38 | [ANIMATIONS.ROTATE_IN_UP_LEFT]: ROTATE_IN_UP_LEFT, 39 | [ANIMATIONS.ROTATE_IN_UP_RIGHT]: ROTATE_IN_UP_RIGHT 40 | }; -------------------------------------------------------------------------------- /src/animations/animate/rotating-exits.ts: -------------------------------------------------------------------------------- 1 | import { ANIMATIONS } from './common'; 2 | 3 | const ROTATE_OUT: Keyframe[] = [ 4 | { offset: 0, opacity: 1, transform: 'rotateZ(0deg)', transformOrigin: 'center' }, 5 | { offset: 1, opacity: 0, transform: 'rotateZ(180deg)', transformOrigin: 'center' } 6 | ]; 7 | 8 | const ROTATE_OUT_CLOCKWISE: Keyframe[] = [ 9 | { offset: 0, opacity: 1, transform: 'rotateZ(0deg)', transformOrigin: 'center' }, 10 | { offset: 1, opacity: 0, transform: 'rotateZ(-180deg)', transformOrigin: 'center' } 11 | ]; 12 | 13 | const ROTATE_OUT_DOWN_LEFT: Keyframe[] = [ 14 | { offset: 0, opacity: 1, transform: 'rotateZ(0deg)', transformOrigin: 'left bottom' }, 15 | { offset: 1, opacity: 0, transform: 'rotateZ(45deg)', transformOrigin: 'left bottom' } 16 | ]; 17 | 18 | const ROTATE_OUT_DOWN_RIGHT: Keyframe[] = [ 19 | { offset: 0, opacity: 1, transform: 'rotateZ(0deg)', transformOrigin: 'right bottom' }, 20 | { offset: 1, opacity: 0, transform: 'rotateZ(-45deg)', transformOrigin: 'right bottom' } 21 | ]; 22 | 23 | const ROTATE_OUT_UP_LEFT: Keyframe[] = [ 24 | { offset: 0, opacity: 1, transform: 'rotateZ(0deg)', transformOrigin: 'left bottom' }, 25 | { offset: 1, opacity: 0, transform: 'rotateZ(-45deg)', transformOrigin: 'left bottom' } 26 | ]; 27 | 28 | const ROTATE_OUT_UP_RIGHT: Keyframe[] = [ 29 | { offset: 0, opacity: 1, transform: 'rotateZ(0deg)', transformOrigin: 'right bottom' }, 30 | { offset: 1, opacity: 0, transform: 'rotateZ(45deg)', transformOrigin: 'right bottom' } 31 | ]; 32 | 33 | export default { 34 | [ANIMATIONS.ROTATE_OUT]: ROTATE_OUT, 35 | [ANIMATIONS.ROTATE_OUT_CLOCKWISE]: ROTATE_OUT_CLOCKWISE, 36 | [ANIMATIONS.ROTATE_OUT_DOWN_LEFT]: ROTATE_OUT_DOWN_LEFT, 37 | [ANIMATIONS.ROTATE_OUT_DOWN_RIGHT]: ROTATE_OUT_DOWN_RIGHT, 38 | [ANIMATIONS.ROTATE_OUT_UP_LEFT]: ROTATE_OUT_UP_LEFT, 39 | [ANIMATIONS.ROTATE_OUT_UP_RIGHT]: ROTATE_OUT_UP_RIGHT 40 | }; -------------------------------------------------------------------------------- /src/animations/animate/sliding-entrances.ts: -------------------------------------------------------------------------------- 1 | import { ANIMATIONS } from './common'; 2 | 3 | const SLIDE_IN_UP: Keyframe[] = [ 4 | { offset: 0, transform: 'translateY(100%)', visibility: 'hidden' }, 5 | { offset: 1, transform: 'translateY(0)', visibility: 'visible' } 6 | ]; 7 | 8 | const SLIDE_IN_DOWN: Keyframe[] = [ 9 | { offset: 0, transform: 'translateY(-100%)', visibility: 'hidden' }, 10 | { offset: 1, transform: 'translateY(0)', visibility: 'visible' } 11 | ]; 12 | 13 | const SLIDE_IN_LEFT: Keyframe[] = [ 14 | { offset: 0, transform: 'translateX(-100%)', visibility: 'hidden' }, 15 | { offset: 1, transform: 'translateX(0)', visibility: 'visible' } 16 | ]; 17 | 18 | const SLIDE_IN_RIGHT: Keyframe[] = [ 19 | { offset: 0, transform: 'translateX(100%)', visibility: 'hidden' }, 20 | { offset: 1, transform: 'translateX(0)', visibility: 'visible' } 21 | ]; 22 | 23 | export default { 24 | [ANIMATIONS.SLIDE_IN_UP]: SLIDE_IN_UP, 25 | [ANIMATIONS.SLIDE_IN_DOWN]: SLIDE_IN_DOWN, 26 | [ANIMATIONS.SLIDE_IN_LEFT]: SLIDE_IN_LEFT, 27 | [ANIMATIONS.SLIDE_IN_RIGHT]: SLIDE_IN_RIGHT 28 | }; -------------------------------------------------------------------------------- /src/animations/animate/sliding-exits.ts: -------------------------------------------------------------------------------- 1 | import { ANIMATIONS } from './common'; 2 | 3 | const SLIDE_OUT_UP: Keyframe[] = [ 4 | { offset: 0, transform: 'translateY(0)', visibility: 'visible' }, 5 | { offset: 1, transform: 'translateY(-100%)', visibility: 'hidden' } 6 | ]; 7 | 8 | const SLIDE_OUT_DOWN: Keyframe[] = [ 9 | { offset: 0, transform: 'translateY(0)', visibility: 'visible' }, 10 | { offset: 1, transform: 'translateY(100%)', visibility: 'hidden' } 11 | ]; 12 | 13 | const SLIDE_OUT_LEFT: Keyframe[] = [ 14 | { offset: 0, transform: 'translateX(0)', visibility: 'visible' }, 15 | { offset: 1, transform: 'translateX(-100%)', visibility: 'hidden' } 16 | ]; 17 | 18 | const SLIDE_OUT_RIGHT: Keyframe[] = [ 19 | { offset: 0, transform: 'translateX(0)', visibility: 'visible' }, 20 | { offset: 1, transform: 'translateX(100%)', visibility: 'hidden' } 21 | ]; 22 | 23 | export default { 24 | [ANIMATIONS.SLIDE_OUT_UP]: SLIDE_OUT_UP, 25 | [ANIMATIONS.SLIDE_OUT_DOWN]: SLIDE_OUT_DOWN, 26 | [ANIMATIONS.SLIDE_OUT_LEFT]: SLIDE_OUT_LEFT, 27 | [ANIMATIONS.SLIDE_OUT_RIGHT]: SLIDE_OUT_RIGHT 28 | }; -------------------------------------------------------------------------------- /src/animations/animate/specials.ts: -------------------------------------------------------------------------------- 1 | import { ANIMATIONS } from './common'; 2 | 3 | const HINGE_DEFAULT: Keyframe = { 4 | opacity: 1, 5 | transformOrigin: 'top left', 6 | easing: 'ease-in-out' 7 | }; 8 | 9 | const HINGE: Keyframe[] = [ 10 | { offset: 0, transform: 'rotate(0)', ...HINGE_DEFAULT }, 11 | { offset: 0.2, transform: 'rotateZ(80deg)', ...HINGE_DEFAULT }, 12 | { offset: 0.4, transform: 'rotateZ(60deg)', ...HINGE_DEFAULT }, 13 | { offset: 0.6, transform: 'rotateZ(80deg)', ...HINGE_DEFAULT }, 14 | { offset: 0.8, transform: 'rotateZ(60deg)', ...HINGE_DEFAULT }, 15 | { offset: 1, ...HINGE_DEFAULT, opacity: 0, transform: 'translateY(700px)' } 16 | ]; 17 | 18 | const JACK_IN_THE_BOX: Keyframe[] = [ 19 | { offset: 0, opacity: 0, transform: 'scale(0.1) rotate(30deg)', transformOrigin: 'center bottom' }, 20 | { offset: 0.5, opacity: 0.3, transform: 'rotate(-10deg)', transformOrigin: '50% 50% 0' }, 21 | { offset: 0.7, opacity: 0.6, transform: 'rotate(3deg)', transformOrigin: '50% 50% 0' }, 22 | { offset: 1, opacity: 1, transform: 'scale(1)', transformOrigin: '50% 50% 0' } 23 | ]; 24 | 25 | const ROLL_IN: Keyframe[] = [ 26 | { offset: 0, opacity: 0, transform: 'translateX(-100%) rotateZ(-120deg)' }, 27 | { offset: 1, opacity: 1, transform: 'translateX(0%)' } 28 | ]; 29 | 30 | const ROLL_OUT: Keyframe[] = [ 31 | { offset: 0, opacity: 1, transform: 'translateX(0%)' }, 32 | { offset: 1, opacity: 0, transform: 'translateX(100%) rotateZ(120deg)' } 33 | ]; 34 | 35 | export default { 36 | [ANIMATIONS.HINGE]: HINGE, 37 | [ANIMATIONS.JACK_IN_THE_BOX]: JACK_IN_THE_BOX, 38 | [ANIMATIONS.ROLL_IN]: ROLL_IN, 39 | [ANIMATIONS.ROLL_OUT]: ROLL_OUT 40 | }; -------------------------------------------------------------------------------- /src/animations/animate/zoom-entrances.ts: -------------------------------------------------------------------------------- 1 | import { ANIMATIONS } from './common'; 2 | 3 | const ZOOM_IN: Keyframe[] = [ 4 | { offset: 0, opacity: 0, transform: 'scale(1)' }, 5 | { offset: 0.5, opacity: 0, transform: 'scale(0.3)' }, 6 | { offset: 1, opacity: 1, transform: 'scale(1)' } 7 | ]; 8 | 9 | const ZOOM_IN_UP: Keyframe[] = [ 10 | { offset: 0, opacity: 0, transform: 'scale(0.1) translateY(-100vh)', easing: 'cubic-bezier(0.55, 0.055, 0.675, 0.19)' }, 11 | { offset: 0.6, opacity: 1, transform: 'scale(0.475) translateY(60px)', easing: 'cubic-bezier(0.175, 0.885, 0.32, 1)' }, 12 | { offset: 1, opacity: 1, transform: 'scale(1) translateY(0px)', easing: 'cubic-bezier(0.175, 0.885, 0.32, 1)' } 13 | ]; 14 | 15 | const ZOOM_IN_DOWN: Keyframe[] = [ 16 | { offset: 0, opacity: 0, transform: 'scale(0.1) translateY(100vh)', easing: 'cubic-bezier(0.55, 0.055, 0.675, 0.19)' }, 17 | { offset: 0.6, opacity: 1, transform: 'scale(0.475) translateY(-60px)', easing: 'cubic-bezier(0.175, 0.885, 0.32, 1)' }, 18 | { offset: 1, opacity: 1, transform: 'scale(1) translateY(0px)', easing: 'cubic-bezier(0.175, 0.885, 0.32, 1)' } 19 | ]; 20 | 21 | const ZOOM_IN_LEFT: Keyframe[] = [ 22 | { offset: 0, opacity: 0, transform: 'scale(0.1) translateX(-100vw)', easing: 'cubic-bezier(0.55, 0.055, 0.675, 0.19)' }, 23 | { offset: 0.6, opacity: 1, transform: 'scale(0.475) translateX(10px)', easing: 'cubic-bezier(0.175, 0.885, 0.32, 1)' }, 24 | { offset: 1, opacity: 1, transform: 'scale(1) translateX(0px)', easing: 'cubic-bezier(0.175, 0.885, 0.32, 1)' } 25 | ]; 26 | 27 | const ZOOM_IN_RIGHT: Keyframe[] = [ 28 | { offset: 0, opacity: 0, transform: 'scale(0.1) translateX(100vw)', easing: 'cubic-bezier(0.55, 0.055, 0.675, 0.19)' }, 29 | { offset: 0.6, opacity: 1, transform: 'scale(0.475) translateX(-10px)', easing: 'cubic-bezier(0.175, 0.885, 0.32, 1)' }, 30 | { offset: 1, opacity: 1, transform: 'scale(1) translateX(0px)', easing: 'cubic-bezier(0.175, 0.885, 0.32, 1)' } 31 | ]; 32 | 33 | export default { 34 | [ANIMATIONS.ZOOM_IN]: ZOOM_IN, 35 | [ANIMATIONS.ZOOM_IN_UP]: ZOOM_IN_UP, 36 | [ANIMATIONS.ZOOM_IN_DOWN]: ZOOM_IN_DOWN, 37 | [ANIMATIONS.ZOOM_IN_LEFT]: ZOOM_IN_LEFT, 38 | [ANIMATIONS.ZOOM_IN_RIGHT]: ZOOM_IN_RIGHT 39 | }; -------------------------------------------------------------------------------- /src/animations/animate/zoom-exits.ts: -------------------------------------------------------------------------------- 1 | import { ANIMATIONS } from './common'; 2 | 3 | const ZOOM_OUT: Keyframe[] = [ 4 | { offset: 0, opacity: 1, transform: 'scale(1)' }, 5 | { offset: 0.5, opacity: 0, transform: 'scale(0.3)' }, 6 | { offset: 1, opacity: 0, transform: 'scale(0)' } 7 | ]; 8 | 9 | const ZOOM_OUT_UP: Keyframe[] = [ 10 | { offset: 0, opacity: 1, transform: 'scale(1) translateY(0px)', easing: 'cubic-bezier(0.175, 0.885, 0.32, 1)', transformOrigin: 'center' }, 11 | { offset: 0.4, opacity: 1, transform: 'scale(0.475) translateY(60px)', easing: 'cubic-bezier(0.175, 0.885, 0.32, 1)', transformOrigin: 'center' }, 12 | { offset: 1, opacity: 0, transform: 'scale(0.1) translateY(-100vh)', easing: 'cubic-bezier(0.55, 0.055, 0.675, 0.19)', transformOrigin: 'center bottom' } 13 | ]; 14 | 15 | const ZOOM_OUT_DOWN: Keyframe[] = [ 16 | { offset: 0, opacity: 1, transform: 'scale(1) translateY(0px)', easing: 'cubic-bezier(0.175, 0.885, 0.32, 1)', transformOrigin: 'center' }, 17 | { offset: 0.4, opacity: 1, transform: 'scale(0.475) translateY(-60px)', easing: 'cubic-bezier(0.175, 0.885, 0.32, 1)', transformOrigin: 'center' }, 18 | { offset: 1, opacity: 0, transform: 'scale(0.1) translateY(100vh)', easing: 'cubic-bezier(0.55, 0.055, 0.675, 0.19)', transformOrigin: 'center bottom' } 19 | ]; 20 | 21 | const ZOOM_OUT_LEFT: Keyframe[] = [ 22 | { offset: 0, opacity: 1, transform: 'scale(1) translateX(0px)', easing: 'cubic-bezier(0.175, 0.885, 0.32, 1)' }, 23 | { offset: 0.4, opacity: 1, transform: 'scale(0.475) translateX(10px)', easing: 'cubic-bezier(0.175, 0.885, 0.32, 1)' }, 24 | { offset: 1, opacity: 0, transform: 'scale(0.1) translateX(-100vw)', easing: 'cubic-bezier(0.55, 0.055, 0.675, 0.19)' } 25 | ]; 26 | 27 | const ZOOM_OUT_RIGHT: Keyframe[] = [ 28 | { offset: 0, opacity: 1, transform: 'scale(1) translateX(0px)', easing: 'cubic-bezier(0.175, 0.885, 0.32, 1)' }, 29 | { offset: 0.4, opacity: 1, transform: 'scale(0.475) translateX(-10px)', easing: 'cubic-bezier(0.175, 0.885, 0.32, 1)' }, 30 | { offset: 1, opacity: 0, transform: 'scale(0.1) translateX(100vw)', easing: 'cubic-bezier(0.55, 0.055, 0.675, 0.19)' } 31 | ]; 32 | 33 | export default { 34 | [ANIMATIONS.ZOOM_OUT]: ZOOM_OUT, 35 | [ANIMATIONS.ZOOM_OUT_UP]: ZOOM_OUT_UP, 36 | [ANIMATIONS.ZOOM_OUT_DOWN]: ZOOM_OUT_DOWN, 37 | [ANIMATIONS.ZOOM_OUT_LEFT]: ZOOM_OUT_LEFT, 38 | [ANIMATIONS.ZOOM_OUT_RIGHT]: ZOOM_OUT_RIGHT 39 | }; -------------------------------------------------------------------------------- /src/animations/animista/bg-pan.ts: -------------------------------------------------------------------------------- 1 | import { ANIMATIONS } from './common'; 2 | 3 | const BG_PAN_DEFAULT: Keyframe = { 4 | fillMode: 'both' 5 | }; 6 | 7 | const BG_PAN_LEFT: Keyframe[] = [ 8 | { offset: 0, ...BG_PAN_DEFAULT, backgroundPosition: '100% 50%' }, 9 | { offset: 1, ...BG_PAN_DEFAULT, backgroundPosition: '0% 50%' } 10 | ]; 11 | 12 | const BG_PAN_RIGHT: Keyframe[] = [ 13 | { offset: 0, ...BG_PAN_DEFAULT, backgroundPosition: '0% 50%' }, 14 | { offset: 1, ...BG_PAN_DEFAULT, backgroundPosition: '100% 50%' } 15 | ]; 16 | 17 | const BG_PAN_TOP: Keyframe[] = [ 18 | { offset: 0, ...BG_PAN_DEFAULT, backgroundPosition: '50% 100%' }, 19 | { offset: 1, ...BG_PAN_DEFAULT, backgroundPosition: '50% 0%' } 20 | ]; 21 | 22 | const BG_PAN_BOTTOM: Keyframe[] = [ 23 | { offset: 0, ...BG_PAN_DEFAULT, backgroundPosition: '50% 0%' }, 24 | { offset: 1, ...BG_PAN_DEFAULT, backgroundPosition: '50% 100%' } 25 | ]; 26 | 27 | const BG_PAN_TR: Keyframe[] = [ 28 | { offset: 0, ...BG_PAN_DEFAULT, backgroundPosition: '0% 100%' }, 29 | { offset: 1, ...BG_PAN_DEFAULT, backgroundPosition: '100% 0%' } 30 | ]; 31 | 32 | const BG_PAN_BR: Keyframe[] = [ 33 | { offset: 0, ...BG_PAN_DEFAULT, backgroundPosition: '0% 0%' }, 34 | { offset: 1, ...BG_PAN_DEFAULT, backgroundPosition: '100% 100%' } 35 | ]; 36 | 37 | const BG_PAN_BL: Keyframe[] = [ 38 | { offset: 0, ...BG_PAN_DEFAULT, backgroundPosition: '100% 0%' }, 39 | { offset: 1, ...BG_PAN_DEFAULT, backgroundPosition: '0% 100%' } 40 | ]; 41 | 42 | const BG_PAN_TL: Keyframe[] = [ 43 | { offset: 0, ...BG_PAN_DEFAULT, backgroundPosition: '100% 100%' }, 44 | { offset: 1, ...BG_PAN_DEFAULT, backgroundPosition: '0% 0%' } 45 | ]; 46 | 47 | export default { 48 | [ANIMATIONS.BG_PAN_LEFT]: BG_PAN_LEFT, 49 | [ANIMATIONS.BG_PAN_RIGHT]: BG_PAN_RIGHT, 50 | [ANIMATIONS.BG_PAN_TOP]: BG_PAN_TOP, 51 | [ANIMATIONS.BG_PAN_BOTTOM]: BG_PAN_BOTTOM, 52 | [ANIMATIONS.BG_PAN_TR]: BG_PAN_TR, 53 | [ANIMATIONS.BG_PAN_BR]: BG_PAN_BR, 54 | [ANIMATIONS.BG_PAN_BL]: BG_PAN_BL, 55 | [ANIMATIONS.BG_PAN_TL]: BG_PAN_TL 56 | }; 57 | -------------------------------------------------------------------------------- /src/animations/animista/bounce.ts: -------------------------------------------------------------------------------- 1 | import { ANIMATIONS } from './common'; 2 | 3 | const BOUNCE_DEFAULT: Keyframe = { 4 | fillMode: 'both' 5 | }; 6 | 7 | const BOUNCE_TOP: Keyframe[] = [ 8 | { offset: 0, ...BOUNCE_DEFAULT, transform: 'translateY(-45px)', easing: 'ease-in', opacity: 1 }, 9 | { offset: 0.24, ...BOUNCE_DEFAULT, opacity: 1 }, 10 | { offset: 0.25, ...BOUNCE_DEFAULT, transform: 'translateY(0px)', easing: 'ease-out' }, 11 | { offset: 0.4, ...BOUNCE_DEFAULT, transform: 'translateY(-24px)', easing: 'ease-in' }, 12 | { offset: 0.55, ...BOUNCE_DEFAULT, transform: 'translateY(0px)', easing: 'ease-out' }, 13 | { offset: 0.65, ...BOUNCE_DEFAULT, transform: 'translateY(-12px)', easing: 'ease-in' }, 14 | { offset: 0.75, ...BOUNCE_DEFAULT, transform: 'translateY(0px)', easing: 'ease-out' }, 15 | { offset: 0.82, ...BOUNCE_DEFAULT, transform: 'translateY(-6px)', easing: 'ease-in' }, 16 | { offset: 0.87, ...BOUNCE_DEFAULT, transform: 'translateY(0px)', easing: 'ease-out' }, 17 | { offset: 0.93, ...BOUNCE_DEFAULT, transform: 'translateY(-4px)', easing: 'ease-in' }, 18 | { offset: 1, ...BOUNCE_DEFAULT, transform: 'translateY(0px)', easing: 'ease-out', opacity: 1 } 19 | ]; 20 | 21 | const BOUNCE_BOTTOM: Keyframe[] = [ 22 | { offset: 0, ...BOUNCE_DEFAULT, transform: 'translateY(45px)', easing: 'ease-in', opacity: 1 }, 23 | { offset: 0.24, ...BOUNCE_DEFAULT, opacity: 1 }, 24 | { offset: 0.25, ...BOUNCE_DEFAULT, transform: 'translateY(0px)', easing: 'ease-out' }, 25 | { offset: 0.4, ...BOUNCE_DEFAULT, transform: 'translateY(24px)', easing: 'ease-in' }, 26 | { offset: 0.55, ...BOUNCE_DEFAULT, transform: 'translateY(0px)', easing: 'ease-out' }, 27 | { offset: 0.65, ...BOUNCE_DEFAULT, transform: 'translateY(12px)', easing: 'ease-in' }, 28 | { offset: 0.75, ...BOUNCE_DEFAULT, transform: 'translateY(0px)', easing: 'ease-out' }, 29 | { offset: 0.82, ...BOUNCE_DEFAULT, transform: 'translateY(6px)', easing: 'ease-in' }, 30 | { offset: 0.87, ...BOUNCE_DEFAULT, transform: 'translateY(0px)', easing: 'ease-out' }, 31 | { offset: 0.93, ...BOUNCE_DEFAULT, transform: 'translateY(4px)', easing: 'ease-in' }, 32 | { offset: 1, ...BOUNCE_DEFAULT, transform: 'translateY(0px)', easing: 'ease-out', opacity: 1 } 33 | ]; 34 | 35 | const BOUNCE_LEFT: Keyframe[] = [ 36 | { offset: 0, ...BOUNCE_DEFAULT, transform: 'translateX(-48px)', easing: 'ease-in', opacity: 1 }, 37 | { offset: 0.24, ...BOUNCE_DEFAULT, opacity: 1 }, 38 | { offset: 0.25, ...BOUNCE_DEFAULT, transform: 'translateX(0px)', easing: 'ease-out' }, 39 | { offset: 0.4, ...BOUNCE_DEFAULT, transform: 'translateX(-26px)', easing: 'ease-in' }, 40 | { offset: 0.55, ...BOUNCE_DEFAULT, transform: 'translateX(0px)', easing: 'ease-out' }, 41 | { offset: 0.65, ...BOUNCE_DEFAULT, transform: 'translateX(-13px)', easing: 'ease-in' }, 42 | { offset: 0.75, ...BOUNCE_DEFAULT, transform: 'translateX(0px)', easing: 'ease-out' }, 43 | { offset: 0.82, ...BOUNCE_DEFAULT, transform: 'translateX(-6.5px)', easing: 'ease-in' }, 44 | { offset: 0.87, ...BOUNCE_DEFAULT, transform: 'translateX(0px)', easing: 'ease-out' }, 45 | { offset: 0.93, ...BOUNCE_DEFAULT, transform: 'translateX(-4px)', easing: 'ease-in' }, 46 | { offset: 0.98, ...BOUNCE_DEFAULT, transform: 'translateX(0px)', easing: 'ease-out' }, 47 | { offset: 1, ...BOUNCE_DEFAULT, transform: 'translateX(0px)', easing: 'ease-out', opacity: 1 } 48 | ]; 49 | 50 | const BOUNCE_RIGHT: Keyframe[] = [ 51 | { offset: 0, ...BOUNCE_DEFAULT, transform: 'translateX(48px)', easing: 'ease-in', opacity: 1 }, 52 | { offset: 0.24, ...BOUNCE_DEFAULT, opacity: 1 }, 53 | { offset: 0.25, ...BOUNCE_DEFAULT, transform: 'translateX(0px)', easing: 'ease-out' }, 54 | { offset: 0.4, ...BOUNCE_DEFAULT, transform: 'translateX(26px)', easing: 'ease-in' }, 55 | { offset: 0.55, ...BOUNCE_DEFAULT, transform: 'translateX(0px)', easing: 'ease-out' }, 56 | { offset: 0.65, ...BOUNCE_DEFAULT, transform: 'translateX(13px)', easing: 'ease-in' }, 57 | { offset: 0.75, ...BOUNCE_DEFAULT, transform: 'translateX(0px)', easing: 'ease-out' }, 58 | { offset: 0.82, ...BOUNCE_DEFAULT, transform: 'translateX(6.5px)', easing: 'ease-in' }, 59 | { offset: 0.87, ...BOUNCE_DEFAULT, transform: 'translateX(0px)', easing: 'ease-out' }, 60 | { offset: 0.93, ...BOUNCE_DEFAULT, transform: 'translateX(4px)', easing: 'ease-in' }, 61 | { offset: 0.98, ...BOUNCE_DEFAULT, transform: 'translateX(0px)', easing: 'ease-out' }, 62 | { offset: 1, ...BOUNCE_DEFAULT, transform: 'translateX(0px)', easing: 'ease-out', opacity: 1 } 63 | ]; 64 | 65 | export default { 66 | [ANIMATIONS.BOUNCE_TOP]: BOUNCE_TOP, 67 | [ANIMATIONS.BOUNCE_BOTTOM]: BOUNCE_BOTTOM, 68 | [ANIMATIONS.BOUNCE_LEFT]: BOUNCE_LEFT, 69 | [ANIMATIONS.BOUNCE_RIGHT]: BOUNCE_RIGHT 70 | }; 71 | -------------------------------------------------------------------------------- /src/animations/animista/fade-in.ts: -------------------------------------------------------------------------------- 1 | import { ANIMATIONS } from './common'; 2 | 3 | const FADE_IN_DEFAULT: Keyframe = { 4 | easing: 'cubic-bezier(0.390, 0.575, 0.565, 1.000)', 5 | fillMode: 'both' 6 | }; 7 | 8 | const FADE_IN_FWD: Keyframe[] = [ 9 | { 10 | offset: 0, 11 | ...FADE_IN_DEFAULT, 12 | transform: 'translateZ(-80px)', 13 | opacity: 0 14 | }, 15 | { 16 | offset: 1, 17 | ...FADE_IN_DEFAULT, 18 | transform: 'translateZ(0)', 19 | opacity: 1 20 | } 21 | ]; 22 | 23 | const FADE_IN_BCK: Keyframe[] = [ 24 | { 25 | offset: 0, 26 | ...FADE_IN_DEFAULT, 27 | transform: 'translateZ(80px)', 28 | opacity: 0 29 | }, 30 | { 31 | offset: 1, 32 | ...FADE_IN_DEFAULT, 33 | transform: 'translateZ(0)', 34 | opacity: 1 35 | } 36 | ]; 37 | 38 | const FADE_IN_TOP: Keyframe[] = [ 39 | { 40 | offset: 0, 41 | ...FADE_IN_DEFAULT, 42 | transform: 'translateY(-50px)', 43 | opacity: 0 44 | }, 45 | { 46 | offset: 1, 47 | ...FADE_IN_DEFAULT, 48 | transform: 'translateY(0)', 49 | opacity: 1 50 | } 51 | ]; 52 | 53 | const FADE_IN_TR: Keyframe[] = [ 54 | { 55 | offset: 0, 56 | ...FADE_IN_DEFAULT, 57 | transform: 'translateX(50px) translateY(-50px)', 58 | opacity: 0 59 | }, 60 | { 61 | offset: 1, 62 | ...FADE_IN_DEFAULT, 63 | transform: 'translateX(0) translateY(0)', 64 | opacity: 1 65 | } 66 | ]; 67 | 68 | const FADE_IN_RIGHT: Keyframe[] = [ 69 | { 70 | offset: 0, 71 | ...FADE_IN_DEFAULT, 72 | transform: 'translateX(50px)', 73 | opacity: 0 74 | }, 75 | { 76 | offset: 1, 77 | ...FADE_IN_DEFAULT, 78 | transform: 'translateX(0)', 79 | opacity: 1 80 | } 81 | ]; 82 | 83 | const FADE_IN_BR: Keyframe[] = [ 84 | { 85 | offset: 0, 86 | ...FADE_IN_DEFAULT, 87 | transform: 'translateX(50px) translateY(50px)', 88 | opacity: 0 89 | }, 90 | { 91 | offset: 1, 92 | ...FADE_IN_DEFAULT, 93 | transform: 'translateX(0) translateY(0)', 94 | opacity: 1 95 | } 96 | ]; 97 | 98 | const FADE_IN_BOTTOM: Keyframe[] = [ 99 | { 100 | offset: 0, 101 | ...FADE_IN_DEFAULT, 102 | transform: 'translateY(50px)', 103 | opacity: 0 104 | }, 105 | { 106 | offset: 1, 107 | ...FADE_IN_DEFAULT, 108 | transform: 'translateY(0)', 109 | opacity: 1 110 | } 111 | ]; 112 | 113 | const FADE_IN_BL: Keyframe[] = [ 114 | { 115 | offset: 0, 116 | ...FADE_IN_DEFAULT, 117 | transform: 'translateX(-50px) translateY(50px)', 118 | opacity: 0 119 | }, 120 | { 121 | offset: 1, 122 | ...FADE_IN_DEFAULT, 123 | transform: 'translateX(0) translateY(0)', 124 | opacity: 1 125 | } 126 | ]; 127 | 128 | const FADE_IN_LEFT: Keyframe[] = [ 129 | { 130 | offset: 0, 131 | ...FADE_IN_DEFAULT, 132 | transform: 'translateX(-50px)', 133 | opacity: 0 134 | }, 135 | { 136 | offset: 1, 137 | ...FADE_IN_DEFAULT, 138 | transform: 'translateX(0)', 139 | opacity: 1 140 | } 141 | ]; 142 | 143 | const FADE_IN_TL: Keyframe[] = [ 144 | { 145 | offset: 0, 146 | ...FADE_IN_DEFAULT, 147 | transform: 'translateX(-50px) translateY(-50px)', 148 | opacity: 0 149 | }, 150 | { 151 | offset: 1, 152 | ...FADE_IN_DEFAULT, 153 | transform: 'translateX(0) translateY(0)', 154 | opacity: 1 155 | } 156 | ]; 157 | 158 | export default { 159 | [ANIMATIONS.FADE_IN_FWD]: FADE_IN_FWD, 160 | [ANIMATIONS.FADE_IN_BCK]: FADE_IN_BCK, 161 | [ANIMATIONS.FADE_IN_TOP]: FADE_IN_TOP, 162 | [ANIMATIONS.FADE_IN_TR]: FADE_IN_TR, 163 | [ANIMATIONS.FADE_IN_RIGHT]: FADE_IN_RIGHT, 164 | [ANIMATIONS.FADE_IN_BR]: FADE_IN_BR, 165 | [ANIMATIONS.FADE_IN_BOTTOM]: FADE_IN_BOTTOM, 166 | [ANIMATIONS.FADE_IN_BL]: FADE_IN_BL, 167 | [ANIMATIONS.FADE_IN_LEFT]: FADE_IN_LEFT, 168 | [ANIMATIONS.FADE_IN_TL]: FADE_IN_TL 169 | }; 170 | -------------------------------------------------------------------------------- /src/animations/animista/flip-in.ts: -------------------------------------------------------------------------------- 1 | import { ANIMATIONS } from './common'; 2 | 3 | const FLIP_IN_DEFAULT: Keyframe = { 4 | easing: 'cubic-bezier(0.250, 0.460, 0.450, 0.940)', 5 | fillMode: 'both', 6 | transformOrigin: 'center center' 7 | }; 8 | 9 | const FLIP_IN_HOR_BOTTOM: Keyframe[] = [ 10 | { offset: 0, ...FLIP_IN_DEFAULT, transform: 'rotateX(80deg)', opacity: 0 }, 11 | { offset: 1, ...FLIP_IN_DEFAULT, transform: 'rotateX(0)', opacity: 1 } 12 | ]; 13 | 14 | const FLIP_IN_HOR_TOP: Keyframe[] = [ 15 | { offset: 0, ...FLIP_IN_DEFAULT, transform: 'rotateX(-80deg)', opacity: 0 }, 16 | { offset: 1, ...FLIP_IN_DEFAULT, transform: 'rotateX(0)', opacity: 1 } 17 | ]; 18 | 19 | const FLIP_IN_VER_RIGHT: Keyframe[] = [ 20 | { offset: 0, ...FLIP_IN_DEFAULT, transform: 'rotateY(-80deg)', opacity: 0 }, 21 | { offset: 1, ...FLIP_IN_DEFAULT, transform: 'rotateY(0)', opacity: 1 } 22 | ]; 23 | 24 | const FLIP_IN_VER_LEFT: Keyframe[] = [ 25 | { offset: 0, ...FLIP_IN_DEFAULT, transform: 'rotateY(80deg)', opacity: 0 }, 26 | { offset: 1, ...FLIP_IN_DEFAULT, transform: 'rotateY(0)', opacity: 1 } 27 | ]; 28 | 29 | const FLIP_IN_DIAG_1_TR: Keyframe[] = [ 30 | { offset: 0, ...FLIP_IN_DEFAULT, transform: 'rotate3d(1, 1, 0, -80deg)', opacity: 0 }, 31 | { offset: 1, ...FLIP_IN_DEFAULT, transform: 'rotate3d(1, 1, 0, 0deg)', opacity: 1 } 32 | ]; 33 | 34 | const FLIP_IN_DIAG_1_BL: Keyframe[] = [ 35 | { offset: 0, ...FLIP_IN_DEFAULT, transform: 'rotate3d(1, 1, 0, 80deg)', opacity: 0 }, 36 | { offset: 1, ...FLIP_IN_DEFAULT, transform: 'rotate3d(1, 1, 0, 0deg)', opacity: 1 } 37 | ]; 38 | 39 | const FLIP_IN_DIAG_2_TL: Keyframe[] = [ 40 | { offset: 0, ...FLIP_IN_DEFAULT, transform: 'rotate3d(-1, 1, 0, 80deg)', opacity: 0 }, 41 | { offset: 1, ...FLIP_IN_DEFAULT, transform: 'rotate3d(1, 1, 0, 0deg)', opacity: 1 } 42 | ]; 43 | 44 | const FLIP_IN_DIAG_2_BR: Keyframe[] = [ 45 | { offset: 0, ...FLIP_IN_DEFAULT, transform: 'rotate3d(-1, 1, 0, -80deg)', opacity: 0 }, 46 | { offset: 1, ...FLIP_IN_DEFAULT, transform: 'rotate3d(1, 1, 0, 0deg)', opacity: 1 } 47 | ]; 48 | 49 | export default { 50 | [ANIMATIONS.FLIP_IN_HOR_BOTTOM]: FLIP_IN_HOR_BOTTOM, 51 | [ANIMATIONS.FLIP_IN_HOR_TOP]: FLIP_IN_HOR_TOP, 52 | [ANIMATIONS.FLIP_IN_VER_RIGHT]: FLIP_IN_VER_RIGHT, 53 | [ANIMATIONS.FLIP_IN_VER_LEFT]: FLIP_IN_VER_LEFT, 54 | [ANIMATIONS.FLIP_IN_DIAG_1_TR]: FLIP_IN_DIAG_1_TR, 55 | [ANIMATIONS.FLIP_IN_DIAG_1_BL]: FLIP_IN_DIAG_1_BL, 56 | [ANIMATIONS.FLIP_IN_DIAG_2_TL]: FLIP_IN_DIAG_2_TL, 57 | [ANIMATIONS.FLIP_IN_DIAG_2_BR]: FLIP_IN_DIAG_2_BR 58 | }; 59 | -------------------------------------------------------------------------------- /src/animations/animista/flip-scale-2.ts: -------------------------------------------------------------------------------- 1 | import { ANIMATIONS } from './common'; 2 | 3 | const FLIP_SCALE_2_DEFAULT: Keyframe = { 4 | easing: 'linear', 5 | fillMode: 'both' 6 | }; 7 | 8 | const FLIP_SCALE_2_HOR_TOP: Keyframe[] = [ 9 | { offset: 0, ...FLIP_SCALE_2_DEFAULT, transform: 'translateY(0) rotateX(0) scale(1)', transformOrigin: '50% 0%' }, 10 | { offset: 0.5, ...FLIP_SCALE_2_DEFAULT, transform: 'translateY(-50%) rotateX(-90deg) scale(2)', transformOrigin: '50% 50%' }, 11 | { offset: 1, ...FLIP_SCALE_2_DEFAULT, transform: 'translateY(-100%) rotateX(-180deg) scale(1)', transformOrigin: '50% 100%' } 12 | ]; 13 | 14 | const FLIP_SCALE_2_VER_RIGHT: Keyframe[] = [ 15 | { offset: 0, ...FLIP_SCALE_2_DEFAULT, transform: 'translateX(0) rotateY(0) scale(1)', transformOrigin: '100% 50%' }, 16 | { offset: 0.5, ...FLIP_SCALE_2_DEFAULT, transform: 'translateX(50%) rotateY(-90deg) scale(2)', transformOrigin: '50% 50%' }, 17 | { offset: 1, ...FLIP_SCALE_2_DEFAULT, transform: 'translateX(100%) rotateY(-180deg) scale(1)', transformOrigin: '0% 50%' } 18 | ]; 19 | 20 | const FLIP_SCALE_2_HOR_BOTTOM: Keyframe[] = [ 21 | { offset: 0, ...FLIP_SCALE_2_DEFAULT, transform: 'translateY(0) rotateX(0) scale(1)', transformOrigin: '50% 100%' }, 22 | { offset: 0.5, ...FLIP_SCALE_2_DEFAULT, transform: 'translateY(50%) rotateX(90deg) scale(2)', transformOrigin: '50% 50%' }, 23 | { offset: 1, ...FLIP_SCALE_2_DEFAULT, transform: 'translateY(100%) rotateX(180deg) scale(1)', transformOrigin: '50% 0%' } 24 | ]; 25 | 26 | const FLIP_SCALE_2_VER_LEFT: Keyframe[] = [ 27 | { offset: 0, ...FLIP_SCALE_2_DEFAULT, transform: 'translateX(0) rotateY(0) scale(1)', transformOrigin: '0% 50%' }, 28 | { offset: 0.5, ...FLIP_SCALE_2_DEFAULT, transform: 'translateX(-50%) rotateY(90deg) scale(2)', transformOrigin: '50% 50%' }, 29 | { offset: 1, ...FLIP_SCALE_2_DEFAULT, transform: 'translateX(-100%) rotateY(180deg) scale(1)', transformOrigin: '100% 50%' } 30 | ]; 31 | 32 | export default { 33 | [ANIMATIONS.FLIP_SCALE_2_HOR_TOP]: FLIP_SCALE_2_HOR_TOP, 34 | [ANIMATIONS.FLIP_SCALE_2_VER_RIGHT]: FLIP_SCALE_2_VER_RIGHT, 35 | [ANIMATIONS.FLIP_SCALE_2_HOR_BOTTOM]: FLIP_SCALE_2_HOR_BOTTOM, 36 | [ANIMATIONS.FLIP_SCALE_2_VER_LEFT]: FLIP_SCALE_2_VER_LEFT 37 | }; 38 | -------------------------------------------------------------------------------- /src/animations/animista/flip-scale.ts: -------------------------------------------------------------------------------- 1 | import { ANIMATIONS } from './common'; 2 | 3 | const FLIP_SCALE_DEFAULT: Keyframe = { 4 | easing: 'linear', 5 | fillMode: 'both' 6 | }; 7 | 8 | const FLIP_SCALE_UP_HOR: Keyframe[] = [ 9 | { offset: 0, ...FLIP_SCALE_DEFAULT, transform: 'scale(1) rotateX(0)' }, 10 | { offset: 0.5, ...FLIP_SCALE_DEFAULT, transform: 'scale(2.5) rotateX(-90deg)' }, 11 | { offset: 1, ...FLIP_SCALE_DEFAULT, transform: 'scale(1) rotateX(-180deg)' } 12 | ]; 13 | 14 | const FLIP_SCALE_DOWN_HOR: Keyframe[] = [ 15 | { offset: 0, ...FLIP_SCALE_DEFAULT, transform: 'scale(1) rotateX(0)' }, 16 | { offset: 0.5, ...FLIP_SCALE_DEFAULT, transform: 'scale(0.4) rotateX(90deg)' }, 17 | { offset: 1, ...FLIP_SCALE_DEFAULT, transform: 'scale(1) rotateX(180deg)' } 18 | ]; 19 | 20 | const FLIP_SCALE_UP_VER: Keyframe[] = [ 21 | { offset: 0, ...FLIP_SCALE_DEFAULT, transform: 'scale(1) rotateY(0)' }, 22 | { offset: 0.5, ...FLIP_SCALE_DEFAULT, transform: 'scale(2.5) rotateY(90deg)' }, 23 | { offset: 1, ...FLIP_SCALE_DEFAULT, transform: 'scale(1) rotateY(180deg)' } 24 | ]; 25 | 26 | const FLIP_SCALE_DOWN_VER: Keyframe[] = [ 27 | { offset: 0, ...FLIP_SCALE_DEFAULT, transform: 'scale(1) rotateY(0)' }, 28 | { offset: 0.5, ...FLIP_SCALE_DEFAULT, transform: 'scale(0.4) rotateY(-90deg)' }, 29 | { offset: 1, ...FLIP_SCALE_DEFAULT, transform: 'scale(1) rotateY(-180deg)' } 30 | ]; 31 | 32 | const FLIP_SCALE_UP_DIAG_1: Keyframe[] = [ 33 | { offset: 0, ...FLIP_SCALE_DEFAULT, transform: 'scale(1) rotate3d(1, 1, 0, 0deg)' }, 34 | { offset: 0.5, ...FLIP_SCALE_DEFAULT, transform: 'scale(2.5) rotate3d(1, 1, 0, 90deg)' }, 35 | { offset: 1, ...FLIP_SCALE_DEFAULT, transform: 'scale(1) rotate3d(1, 1, 0, 180deg)' } 36 | ]; 37 | 38 | const FLIP_SCALE_DOWN_DIAG_1: Keyframe[] = [ 39 | { offset: 0, ...FLIP_SCALE_DEFAULT, transform: 'scale(1) rotate3d(1, 1, 0, 0deg)' }, 40 | { offset: 0.5, ...FLIP_SCALE_DEFAULT, transform: 'scale(0.4) rotate3d(1, 1, 0, -90deg)' }, 41 | { offset: 1, ...FLIP_SCALE_DEFAULT, transform: 'scale(1) rotate3d(1, 1, 0, -180deg)' } 42 | ]; 43 | 44 | const FLIP_SCALE_UP_DIAG_2: Keyframe[] = [ 45 | { offset: 0, ...FLIP_SCALE_DEFAULT, transform: 'scale(1) rotate3d(-1, 1, 0, 0deg)' }, 46 | { offset: 0.5, ...FLIP_SCALE_DEFAULT, transform: 'scale(2.5) rotate3d(-1, 1, 0, 90deg)' }, 47 | { offset: 1, ...FLIP_SCALE_DEFAULT, transform: 'scale(1) rotate3d(-1, 1, 0, 180deg)' } 48 | ]; 49 | 50 | const FLIP_SCALE_DOWN_DIAG_2: Keyframe[] = [ 51 | { offset: 0, ...FLIP_SCALE_DEFAULT, transform: 'scale(1) rotate3d(-1, 1, 0, 0deg)' }, 52 | { offset: 0.5, ...FLIP_SCALE_DEFAULT, transform: 'scale(0.4) rotate3d(-1, 1, 0, -90deg)' }, 53 | { offset: 1, ...FLIP_SCALE_DEFAULT, transform: 'scale(1) rotate3d(-1, 1, 0, -180deg)' } 54 | ]; 55 | 56 | export default { 57 | [ANIMATIONS.FLIP_SCALE_UP_HOR]: FLIP_SCALE_UP_HOR, 58 | [ANIMATIONS.FLIP_SCALE_DOWN_HOR]: FLIP_SCALE_DOWN_HOR, 59 | [ANIMATIONS.FLIP_SCALE_UP_VER]: FLIP_SCALE_UP_VER, 60 | [ANIMATIONS.FLIP_SCALE_DOWN_VER]: FLIP_SCALE_DOWN_VER, 61 | [ANIMATIONS.FLIP_SCALE_UP_DIAG_1]: FLIP_SCALE_UP_DIAG_1, 62 | [ANIMATIONS.FLIP_SCALE_DOWN_DIAG_1]: FLIP_SCALE_DOWN_DIAG_1, 63 | [ANIMATIONS.FLIP_SCALE_UP_DIAG_2]: FLIP_SCALE_UP_DIAG_2, 64 | [ANIMATIONS.FLIP_SCALE_DOWN_DIAG_2]: FLIP_SCALE_DOWN_DIAG_2 65 | }; 66 | -------------------------------------------------------------------------------- /src/animations/animista/flip.ts: -------------------------------------------------------------------------------- 1 | import { ANIMATIONS } from './common'; 2 | 3 | const FLIP_DEFAULT: Keyframe = { 4 | easing: 'cubic-bezier(0.455, 0.030, 0.515, 0.955)', 5 | fillMode: 'both' 6 | }; 7 | 8 | const FLIP_HORIZONTAL_BOTTOM: Keyframe[] = [ 9 | { offset: 0, ...FLIP_DEFAULT, transform: 'rotateX(0)' }, 10 | { offset: 1, ...FLIP_DEFAULT, transform: 'rotateX(-180deg)' } 11 | ]; 12 | 13 | const FLIP_HORIZONTAL_TOP: Keyframe[] = [ 14 | { offset: 0, ...FLIP_DEFAULT, transform: 'rotateX(0)' }, 15 | { offset: 1, ...FLIP_DEFAULT, transform: 'rotateX(180deg)' } 16 | ]; 17 | 18 | const FLIP_HORIZONTAL_BCK: Keyframe[] = [ 19 | { offset: 0, ...FLIP_DEFAULT, transform: 'translateZ(0) rotateX(0)' }, 20 | { offset: 1, ...FLIP_DEFAULT, transform: 'translateZ(-260px) rotateX(180deg)' } 21 | ]; 22 | 23 | const FLIP_HORIZONTAL_FWD: Keyframe[] = [ 24 | { offset: 0, ...FLIP_DEFAULT, transform: 'translateZ(0) rotateX(0)' }, 25 | { offset: 1, ...FLIP_DEFAULT, transform: 'translateZ(160px) rotateX(-180deg)' } 26 | ]; 27 | 28 | const FLIP_VERTICAL_RIGHT: Keyframe[] = [ 29 | { offset: 0, ...FLIP_DEFAULT, transform: 'rotateY(0)' }, 30 | { offset: 1, ...FLIP_DEFAULT, transform: 'rotateY(180deg)' } 31 | ]; 32 | 33 | const FLIP_VERTICAL_LEFT: Keyframe[] = [ 34 | { offset: 0, ...FLIP_DEFAULT, transform: 'rotateY(0)' }, 35 | { offset: 1, ...FLIP_DEFAULT, transform: 'rotateY(-180deg)' } 36 | ]; 37 | 38 | const FLIP_VERTICAL_BCK: Keyframe[] = [ 39 | { offset: 0, ...FLIP_DEFAULT, transform: 'translateZ(0) rotateY(0)' }, 40 | { offset: 1, ...FLIP_DEFAULT, transform: 'translateZ(-260px) rotateY(-180deg)' } 41 | ]; 42 | 43 | const FLIP_VERTICAL_FWD: Keyframe[] = [ 44 | { offset: 0, ...FLIP_DEFAULT, transform: 'translateZ(0) rotateY(0)' }, 45 | { offset: 1, ...FLIP_DEFAULT, transform: 'translateZ(160px) rotateY(180deg)' } 46 | ]; 47 | 48 | const FLIP_DIAGONAL_1_TR: Keyframe[] = [ 49 | { offset: 0, ...FLIP_DEFAULT, transform: 'rotate3d(1, 1, 0, 0deg)' }, 50 | { offset: 1, ...FLIP_DEFAULT, transform: 'rotate3d(1, 1, 0, 180deg)' } 51 | ]; 52 | 53 | const FLIP_DIAGONAL_1_BL: Keyframe[] = [ 54 | { offset: 0, ...FLIP_DEFAULT, transform: 'rotate3d(1, 1, 0, 0deg)' }, 55 | { offset: 1, ...FLIP_DEFAULT, transform: 'rotate3d(1, 1, 0, -180deg)' } 56 | ]; 57 | 58 | const FLIP_DIAGONAL_1_BCK: Keyframe[] = [ 59 | { offset: 0, ...FLIP_DEFAULT, transform: 'translateZ(0) rotate3d(1, 1, 0, 0deg)' }, 60 | { offset: 1, ...FLIP_DEFAULT, transform: 'translateZ(-260px) rotate3d(1, 1, 0, -180deg)' } 61 | ]; 62 | 63 | const FLIP_DIAGONAL_1_FWD: Keyframe[] = [ 64 | { offset: 0, ...FLIP_DEFAULT, transform: 'translateZ(0) rotate3d(1, 1, 0, 0deg)' }, 65 | { offset: 1, ...FLIP_DEFAULT, transform: 'translateZ(160px) rotate3d(1, 1, 0, 180deg)' } 66 | ]; 67 | 68 | const FLIP_DIAGONAL_2_BR: Keyframe[] = [ 69 | { offset: 0, ...FLIP_DEFAULT, transform: 'rotate3d(-1, 1, 0, 0deg)' }, 70 | { offset: 1, ...FLIP_DEFAULT, transform: 'rotate3d(-1, 1, 0, 180deg)' } 71 | ]; 72 | 73 | const FLIP_DIAGONAL_2_TL: Keyframe[] = [ 74 | { offset: 0, ...FLIP_DEFAULT, transform: 'rotate3d(-1, 1, 0, 0deg)' }, 75 | { offset: 1, ...FLIP_DEFAULT, transform: 'rotate3d(-1, 1, 0, -180deg)' } 76 | ]; 77 | 78 | const FLIP_DIAGONAL_2_BCK: Keyframe[] = [ 79 | { offset: 0, ...FLIP_DEFAULT, transform: 'translateZ(0) rotate3d(-1, 1, 0, 0deg)' }, 80 | { offset: 1, ...FLIP_DEFAULT, transform: 'translateZ(-260px) rotate3d(-1, 1, 0, -180deg)' } 81 | ]; 82 | 83 | const FLIP_DIAGONAL_2_FWD: Keyframe[] = [ 84 | { offset: 0, ...FLIP_DEFAULT, transform: 'translateZ(0) rotate3d(-1, 1, 0, 0deg)' }, 85 | { offset: 1, ...FLIP_DEFAULT, transform: 'translateZ(160px) rotate3d(-1, 1, 0, 180deg)' } 86 | ]; 87 | 88 | export default { 89 | [ANIMATIONS.FLIP_HORIZONTAL_BOTTOM]: FLIP_HORIZONTAL_BOTTOM, 90 | [ANIMATIONS.FLIP_HORIZONTAL_TOP]: FLIP_HORIZONTAL_TOP, 91 | [ANIMATIONS.FLIP_HORIZONTAL_BCK]: FLIP_HORIZONTAL_BCK, 92 | [ANIMATIONS.FLIP_HORIZONTAL_FWD]: FLIP_HORIZONTAL_FWD, 93 | [ANIMATIONS.FLIP_VERTICAL_RIGHT]: FLIP_VERTICAL_RIGHT, 94 | [ANIMATIONS.FLIP_VERTICAL_LEFT]: FLIP_VERTICAL_LEFT, 95 | [ANIMATIONS.FLIP_VERTICAL_BCK]: FLIP_VERTICAL_BCK, 96 | [ANIMATIONS.FLIP_VERTICAL_FWD]: FLIP_VERTICAL_FWD, 97 | [ANIMATIONS.FLIP_DIAGONAL_1_TR]: FLIP_DIAGONAL_1_TR, 98 | [ANIMATIONS.FLIP_DIAGONAL_1_BL]: FLIP_DIAGONAL_1_BL, 99 | [ANIMATIONS.FLIP_DIAGONAL_1_BCK]: FLIP_DIAGONAL_1_BCK, 100 | [ANIMATIONS.FLIP_DIAGONAL_1_FWD]: FLIP_DIAGONAL_1_FWD, 101 | [ANIMATIONS.FLIP_DIAGONAL_2_BR]: FLIP_DIAGONAL_2_BR, 102 | [ANIMATIONS.FLIP_DIAGONAL_2_TL]: FLIP_DIAGONAL_2_TL, 103 | [ANIMATIONS.FLIP_DIAGONAL_2_BCK]: FLIP_DIAGONAL_2_BCK, 104 | [ANIMATIONS.FLIP_DIAGONAL_2_FWD]: FLIP_DIAGONAL_2_FWD 105 | }; 106 | -------------------------------------------------------------------------------- /src/animations/animista/focus-in.ts: -------------------------------------------------------------------------------- 1 | import { ANIMATIONS } from './common'; 2 | 3 | const FOCUS_IN_DEFAULT: Keyframe = { 4 | easing: 'cubic-bezier(0.250, 0.460, 0.450, 0.940)', 5 | fillMode: 'both' 6 | }; 7 | 8 | const TEXT_FOCUS_IN: Keyframe[] = [ 9 | { offset: 0, easing: 'cubic-bezier(0.550, 0.085, 0.680, 0.530)', filter: 'blur(12px)', opacity: 0 }, 10 | { offset: 1, easing: 'cubic-bezier(0.550, 0.085, 0.680, 0.530)', filter: 'blur(0px)', opacity: 1 } 11 | ]; 12 | 13 | const FOCUS_IN_EXPAND: Keyframe[] = [ 14 | { offset: 0, ...FOCUS_IN_DEFAULT, letterSpacing: '-0.5em', filter: 'blur(12px)', opacity: 0 }, 15 | { offset: 1, ...FOCUS_IN_DEFAULT, letterSpacing: 'normal', filter: 'blur(0px)', opacity: 1 } 16 | ]; 17 | 18 | const FOCUS_IN_EXPAND_FWD: Keyframe[] = [ 19 | { offset: 0, ...FOCUS_IN_DEFAULT, letterSpacing: '-0.5em', transform: 'translateZ(-800px)', filter: 'blur(12px)', opacity: 0 }, 20 | { offset: 1, ...FOCUS_IN_DEFAULT, letterSpacing: 'normal', transform: 'translateZ(0)', filter: 'blur(0px)', opacity: 1 } 21 | ]; 22 | 23 | const FOCUS_IN_CONTRACT: Keyframe[] = [ 24 | { offset: 0, ...FOCUS_IN_DEFAULT, letterSpacing: '1em', filter: 'blur(12px)', opacity: 0 }, 25 | { offset: 1, ...FOCUS_IN_DEFAULT, letterSpacing: 'normal', filter: 'blur(0px)', opacity: 1 } 26 | ]; 27 | 28 | const FOCUS_IN_CONTRACT_BCK: Keyframe[] = [ 29 | { offset: 0, ...FOCUS_IN_DEFAULT, letterSpacing: '1em', transform: 'translateZ(300px)', filter: 'blur(12px)', opacity: 0 }, 30 | { offset: 1, ...FOCUS_IN_DEFAULT, letterSpacing: 'normal', transform: 'translateZ(12px)', filter: 'blur(0px)', opacity: 1 } 31 | ]; 32 | 33 | export default { 34 | [ANIMATIONS.TEXT_FOCUS_IN]: TEXT_FOCUS_IN, 35 | [ANIMATIONS.FOCUS_IN_EXPAND]: FOCUS_IN_EXPAND, 36 | [ANIMATIONS.FOCUS_IN_EXPAND_FWD]: FOCUS_IN_EXPAND_FWD, 37 | [ANIMATIONS.FOCUS_IN_CONTRACT]: FOCUS_IN_CONTRACT, 38 | [ANIMATIONS.FOCUS_IN_CONTRACT_BCK]: FOCUS_IN_CONTRACT_BCK 39 | }; 40 | -------------------------------------------------------------------------------- /src/animations/animista/index.ts: -------------------------------------------------------------------------------- 1 | import SCALE_UP from './scale-up'; 2 | import SCALE_DOWN from './scale-down'; 3 | import ROTATE from './rotate'; 4 | import ROTATE_SCALE from './rotate-scale'; 5 | import ROTATE_90 from './rotate-90'; 6 | import FLIP from './flip'; 7 | import FLIP_2 from './flip-2'; 8 | import FLIP_SCALE from './flip-scale'; 9 | import FLIP_SCALE_2 from './flip-scale-2'; 10 | import SWING from './swing'; 11 | import SLIDE from './slide'; 12 | import SLIDE_BCK from './slide-bck'; 13 | import SLIDE_FWD from './slide-fwd'; 14 | import SLIDE_ROTATE from './slide-rotate'; 15 | import SHADOW_DROP from './shadow-drop'; 16 | import SHADOW_DROP_2 from './shadow-drop-2'; 17 | import SHADOW_POP from './shadow-pop'; 18 | import SHADOW_INSET from './shadow-inset'; 19 | import SCALE_IN from './scale-in'; 20 | import ROTATE_IN from './rotate-in'; 21 | import ROTATE_IN_2 from './rotate-in-2'; 22 | import SWIRL_IN from './swirl-in'; 23 | import FLIP_IN from './flip-in'; 24 | import SLIT_IN from './slit-in'; 25 | import SLIDE_IN from './slide-in'; 26 | import SLIDE_IN_FWD from './slide-in-fwd'; 27 | import SLIDE_IN_BCK from './slide-in-bck'; 28 | import SLIDE_IN_BLURRED from './slide-in-blurred'; 29 | import SLIDE_IN_ELLIPTIC from './slide-in-elliptic'; 30 | import BOUNCE_IN from './bounce-in'; 31 | import ROLL_IN from './roll-in'; 32 | import ROLL_IN_BLURRED from './roll-in-blurred'; 33 | import TILT_IN from './tilt-in'; 34 | import TILT_IN_FWD from './tilt-in-fwd'; 35 | import SWING_IN from './swing-in'; 36 | import FADE_IN from './fade-in'; 37 | import PUFF_IN from './puff-in'; 38 | import FLICKER_IN from './flicker-in'; 39 | import TRACKING_IN from './tracking-in'; 40 | import FOCUS_IN from './focus-in'; 41 | import TEXT_SHADOW_DROP from './text-shadow-drop'; 42 | import TEXT_SHADOW_POP from './text-shadow-pop'; 43 | import TEXT_POP_UP from './text-pop-up'; 44 | import VIBRATE from './vibrate'; 45 | import SHAKE from './shake'; 46 | import JELLO from './jello'; 47 | import WOBBLE from './wobble'; 48 | import BOUNCE from './bounce'; 49 | import PULSATE from './pulsate'; 50 | import KEN_BURNS from './ken-burns'; 51 | import BG_PAN from './bg-pan'; 52 | 53 | export default { 54 | ...SCALE_UP, 55 | ...SCALE_DOWN, 56 | ...ROTATE, 57 | ...ROTATE_SCALE, 58 | ...ROTATE_90, 59 | ...FLIP, 60 | ...FLIP_2, 61 | ...FLIP_SCALE, 62 | ...FLIP_SCALE_2, 63 | ...SWING, 64 | ...SLIDE, 65 | ...SLIDE_BCK, 66 | ...SLIDE_FWD, 67 | ...SLIDE_ROTATE, 68 | ...SHADOW_DROP, 69 | ...SHADOW_DROP_2, 70 | ...SHADOW_POP, 71 | ...SHADOW_INSET, 72 | ...SCALE_IN, 73 | ...ROTATE_IN, 74 | ...ROTATE_IN_2, 75 | ...SWIRL_IN, 76 | ...FLIP_IN, 77 | ...SLIT_IN, 78 | ...SLIDE_IN, 79 | ...SLIDE_IN_FWD, 80 | ...SLIDE_IN_BCK, 81 | ...SLIDE_IN_BLURRED, 82 | ...SLIDE_IN_ELLIPTIC, 83 | ...BOUNCE_IN, 84 | ...ROLL_IN, 85 | ...ROLL_IN_BLURRED, 86 | ...TILT_IN, 87 | ...TILT_IN_FWD, 88 | ...SWING_IN, 89 | ...FADE_IN, 90 | ...PUFF_IN, 91 | ...FLICKER_IN, 92 | ...TRACKING_IN, 93 | ...FOCUS_IN, 94 | ...TEXT_SHADOW_DROP, 95 | ...TEXT_SHADOW_POP, 96 | ...TEXT_POP_UP, 97 | ...VIBRATE, 98 | ...SHAKE, 99 | ...JELLO, 100 | ...WOBBLE, 101 | ...BOUNCE, 102 | ...PULSATE, 103 | ...KEN_BURNS, 104 | ...BG_PAN 105 | } -------------------------------------------------------------------------------- /src/animations/animista/jello.ts: -------------------------------------------------------------------------------- 1 | import { ANIMATIONS } from './common'; 2 | 3 | const JELLO_DEFAULT: Keyframe = { 4 | fillMode: 'both' 5 | }; 6 | 7 | const JELLO_HORIZONTAL: Keyframe[] = [ 8 | { offset: 0, ...JELLO_DEFAULT, transform: 'scale3d(1, 1, 1)' }, 9 | { offset: 0.3, ...JELLO_DEFAULT, transform: 'scale3d(1.25, 0.75, 1)' }, 10 | { offset: 0.4, ...JELLO_DEFAULT, transform: 'scale3d(0.75, 1.25, 1)' }, 11 | { offset: 0.5, ...JELLO_DEFAULT, transform: 'scale3d(1.15, 0.85, 1)' }, 12 | { offset: 0.65, ...JELLO_DEFAULT, transform: 'scale3d(0.95, 1.05, 1)' }, 13 | { offset: 0.75, ...JELLO_DEFAULT, transform: 'scale3d(1.05, 0.95, 1)' }, 14 | { offset: 1, ...JELLO_DEFAULT, transform: 'scale3d(1, 1, 1)' } 15 | ]; 16 | 17 | const JELLO_VERTICAL: Keyframe[] = [ 18 | { offset: 0, ...JELLO_DEFAULT, transform: 'scale3d(1, 1, 1)' }, 19 | { offset: 0.3, ...JELLO_DEFAULT, transform: 'scale3d(0.75, 1.25, 1)' }, 20 | { offset: 0.4, ...JELLO_DEFAULT, transform: 'scale3d(1.25, 0.75, 1)' }, 21 | { offset: 0.5, ...JELLO_DEFAULT, transform: 'scale3d(0.85, 1.15, 1)' }, 22 | { offset: 0.65, ...JELLO_DEFAULT, transform: 'scale3d(1.05, 0.95, 1)' }, 23 | { offset: 0.75, ...JELLO_DEFAULT, transform: 'scale3d(0.95, 1.05, 1)' }, 24 | { offset: 1, ...JELLO_DEFAULT, transform: 'scale3d(1, 1, 1)' } 25 | ]; 26 | 27 | const JELLO_DIAGONAL_1: Keyframe[] = [ 28 | { offset: 0, ...JELLO_DEFAULT, transform: 'skew(0deg, 0deg)' }, 29 | { offset: 0.3, ...JELLO_DEFAULT, transform: ' skew(25deg, 25deg)' }, 30 | { offset: 0.4, ...JELLO_DEFAULT, transform: 'skew(-15deg, -15deg)' }, 31 | { offset: 0.5, ...JELLO_DEFAULT, transform: 'skew(15deg, 15deg)' }, 32 | { offset: 0.65, ...JELLO_DEFAULT, transform: 'skew(-5deg, -5deg)' }, 33 | { offset: 0.75, ...JELLO_DEFAULT, transform: 'skew(5deg, 5deg)' }, 34 | { offset: 1, ...JELLO_DEFAULT, transform: 'skew(0deg, 0deg)' } 35 | ]; 36 | 37 | const JELLO_DIAGONAL_2: Keyframe[] = [ 38 | { offset: 0, ...JELLO_DEFAULT, transform: 'skew(0deg, 0deg)' }, 39 | { offset: 0.3, ...JELLO_DEFAULT, transform: 'skew(-25deg, -25deg)' }, 40 | { offset: 0.4, ...JELLO_DEFAULT, transform: 'skew(15deg, 15deg)' }, 41 | { offset: 0.5, ...JELLO_DEFAULT, transform: 'skew(-15deg, -15deg)' }, 42 | { offset: 0.65, ...JELLO_DEFAULT, transform: 'skew(5deg, 5deg)' }, 43 | { offset: 0.75, ...JELLO_DEFAULT, transform: 'skew(-5deg, -5deg)' }, 44 | { offset: 1, ...JELLO_DEFAULT, transform: 'skew(0deg, 0deg)' } 45 | ]; 46 | 47 | 48 | export default { 49 | [ANIMATIONS.JELLO_HORIZONTAL]: JELLO_HORIZONTAL, 50 | [ANIMATIONS.JELLO_VERTICAL]: JELLO_VERTICAL, 51 | [ANIMATIONS.JELLO_DIAGONAL_1]: JELLO_DIAGONAL_1, 52 | [ANIMATIONS.JELLO_DIAGONAL_2]: JELLO_DIAGONAL_2 53 | }; 54 | -------------------------------------------------------------------------------- /src/animations/animista/ken-burns.ts: -------------------------------------------------------------------------------- 1 | import { ANIMATIONS } from './common'; 2 | 3 | const KEN_BURNS_DEFAULT: Keyframe = { 4 | easing: 'ease-out', 5 | fillMode: 'both' 6 | }; 7 | 8 | const KEN_BURNS_TOP: Keyframe[] = [ 9 | { offset: 0, ...KEN_BURNS_DEFAULT, transform: 'scale(1) translateY(0)', transformOrigin: '50% 16%' }, 10 | { offset: 1, ...KEN_BURNS_DEFAULT, transform: 'scale(1.25) translateY(-15px)', transformOrigin: 'top' } 11 | ]; 12 | 13 | const KEN_BURNS_TOP_RIGHT: Keyframe[] = [ 14 | { offset: 0, ...KEN_BURNS_DEFAULT, transform: 'scale(1) translate(0, 0)', transformOrigin: '84% 16%' }, 15 | { offset: 1, ...KEN_BURNS_DEFAULT, transform: 'scale(1.25) translate(20px, -15px)', transformOrigin: 'right top' } 16 | ]; 17 | 18 | const KEN_BURNS_RIGHT: Keyframe[] = [ 19 | { offset: 0, ...KEN_BURNS_DEFAULT, transform: 'scale(1) translate(0, 0)', transformOrigin: '84% 50%' }, 20 | { offset: 1, ...KEN_BURNS_DEFAULT, transform: 'scale(1.25) translateX(20px)', transformOrigin: 'right' } 21 | ]; 22 | 23 | const KEN_BURNS_BOTTOM_RIGHT: Keyframe[] = [ 24 | { offset: 0, ...KEN_BURNS_DEFAULT, transform: 'scale(1) translate(0, 0)', transformOrigin: '84% 84%' }, 25 | { offset: 1, ...KEN_BURNS_DEFAULT, transform: 'scale(1.25) translate(20px, 15px)', transformOrigin: 'right bottom' } 26 | ]; 27 | 28 | const KEN_BURNS_BOTTOM: Keyframe[] = [ 29 | { offset: 0, ...KEN_BURNS_DEFAULT, transform: 'scale(1) translateY(0)', transformOrigin: '50% 84%' }, 30 | { offset: 1, ...KEN_BURNS_DEFAULT, transform: 'scale(1.25) translateY(15px)', transformOrigin: 'bottom' } 31 | ]; 32 | 33 | const KEN_BURNS_BOTTOM_LEFT: Keyframe[] = [ 34 | { offset: 0, ...KEN_BURNS_DEFAULT, transform: 'scale(1) translate(0, 0)', transformOrigin: '16% 84%' }, 35 | { offset: 1, ...KEN_BURNS_DEFAULT, transform: 'scale(1.25) translate(-20px, 15px)', transformOrigin: 'left bottom' } 36 | ]; 37 | 38 | const KEN_BURNS_LEFT: Keyframe[] = [ 39 | { offset: 0, ...KEN_BURNS_DEFAULT, transform: 'scale(1) translate(0, 0)', transformOrigin: '16% 50%' }, 40 | { offset: 1, ...KEN_BURNS_DEFAULT, transform: 'scale(1.25) translateX(-20px)', transformOrigin: 'left' } 41 | ]; 42 | 43 | const KEN_BURNS_TOP_LEFT: Keyframe[] = [ 44 | { offset: 0, ...KEN_BURNS_DEFAULT, transform: 'scale(1) translate(0, 0)', transformOrigin: '16% 16%' }, 45 | { offset: 1, ...KEN_BURNS_DEFAULT, transform: 'scale(1.25) translate(-20px, -15px)', transformOrigin: 'left top' } 46 | ]; 47 | 48 | export default { 49 | [ANIMATIONS.KEN_BURNS_TOP]: KEN_BURNS_TOP, 50 | [ANIMATIONS.KEN_BURNS_TOP_RIGHT]: KEN_BURNS_TOP_RIGHT, 51 | [ANIMATIONS.KEN_BURNS_RIGHT]: KEN_BURNS_RIGHT, 52 | [ANIMATIONS.KEN_BURNS_BOTTOM_RIGHT]: KEN_BURNS_BOTTOM_RIGHT, 53 | [ANIMATIONS.KEN_BURNS_BOTTOM]: KEN_BURNS_BOTTOM, 54 | [ANIMATIONS.KEN_BURNS_BOTTOM_LEFT]: KEN_BURNS_BOTTOM_LEFT, 55 | [ANIMATIONS.KEN_BURNS_LEFT]: KEN_BURNS_LEFT, 56 | [ANIMATIONS.KEN_BURNS_TOP_LEFT]: KEN_BURNS_TOP_LEFT 57 | }; 58 | -------------------------------------------------------------------------------- /src/animations/animista/pulsate.ts: -------------------------------------------------------------------------------- 1 | import { ANIMATIONS } from './common'; 2 | 3 | const PULSATE_DEFAULT: Keyframe = { 4 | easing: 'ease-in-out', 5 | fillMode: 'both' 6 | }; 7 | 8 | const PULSATE_BCK: Keyframe[] = [ 9 | { offset: 0, ...PULSATE_DEFAULT, transform: 'scale(1)' }, 10 | { offset: 0.5, ...PULSATE_DEFAULT, transform: 'scale(0.9)' }, 11 | { offset: 1, ...PULSATE_DEFAULT, transform: 'scale(1)' } 12 | ]; 13 | 14 | const PULSATE_FWD: Keyframe[] = [ 15 | { offset: 0, ...PULSATE_DEFAULT, transform: 'scale(1)' }, 16 | { offset: 0.5, ...PULSATE_DEFAULT, transform: 'scale(1.1)' }, 17 | { offset: 1, ...PULSATE_DEFAULT, transform: 'scale(1)' } 18 | ]; 19 | 20 | const PING: Keyframe[] = [ 21 | { offset: 0, ...PULSATE_DEFAULT, transform: 'scale(0.2)', opacity: 0.8 }, 22 | { offset: 0.8, ...PULSATE_DEFAULT, transform: 'scale(1.2)', opacity: 0 }, 23 | { offset: 1, ...PULSATE_DEFAULT, transform: 'scale(2.2)', opacity: 0 } 24 | ]; 25 | 26 | export default { 27 | [ANIMATIONS.PULSATE_BCK]: PULSATE_BCK, 28 | [ANIMATIONS.PULSATE_FWD]: PULSATE_FWD, 29 | [ANIMATIONS.PING]: PING 30 | }; 31 | -------------------------------------------------------------------------------- /src/animations/animista/roll-in-blurred.ts: -------------------------------------------------------------------------------- 1 | import { ANIMATIONS } from './common'; 2 | 3 | const ROLL_IN_BLURRED_DEFAULT: Keyframe = { 4 | easing: 'cubic-bezier(0.230, 1.000, 0.320, 1.000)', 5 | fillMode: 'both' 6 | }; 7 | 8 | const ROLL_IN_BLURRED_LEFT: Keyframe[] = [ 9 | { 10 | offset: 0, 11 | ...ROLL_IN_BLURRED_DEFAULT, 12 | transform: 'translateX(-100vw) rotate(-540deg)', 13 | filter: 'blur(50px)', 14 | opacity: 0 15 | }, 16 | { 17 | offset: 1, 18 | ...ROLL_IN_BLURRED_DEFAULT, 19 | transform: 'translateX(0) rotate(0deg)', 20 | filter: 'blur(0)', 21 | opacity: 1 22 | } 23 | ]; 24 | 25 | const ROLL_IN_BLURRED_TOP: Keyframe[] = [ 26 | { 27 | offset: 0, 28 | ...ROLL_IN_BLURRED_DEFAULT, 29 | transform: 'translateY(-100vh) rotate(-720deg)', 30 | filter: 'blur(50px)', 31 | opacity: 0 32 | }, 33 | { 34 | offset: 1, 35 | ...ROLL_IN_BLURRED_DEFAULT, 36 | transform: 'translateY(0) rotate(0deg)', 37 | filter: 'blur(0)', 38 | opacity: 1 39 | } 40 | ]; 41 | 42 | const ROLL_IN_BLURRED_RIGHT: Keyframe[] = [ 43 | { 44 | offset: 0, 45 | ...ROLL_IN_BLURRED_DEFAULT, 46 | transform: 'translateX(100vw) rotate(720deg)', 47 | filter: 'blur(50px)', 48 | opacity: 0 49 | }, 50 | { 51 | offset: 1, 52 | ...ROLL_IN_BLURRED_DEFAULT, 53 | transform: 'translateX(0) rotate(0deg)', 54 | filter: 'blur(0)', 55 | opacity: 1 56 | } 57 | ]; 58 | 59 | const ROLL_IN_BLURRED_BOTTOM: Keyframe[] = [ 60 | { 61 | offset: 0, 62 | ...ROLL_IN_BLURRED_DEFAULT, 63 | transform: 'translateY(800px) rotate(720deg)', 64 | filter: 'blur(50px)', 65 | opacity: 0 66 | }, 67 | { 68 | offset: 1, 69 | ...ROLL_IN_BLURRED_DEFAULT, 70 | transform: 'translateY(0) rotate(0deg)', 71 | filter: 'blur(0)', 72 | opacity: 1 73 | } 74 | ]; 75 | 76 | export default { 77 | [ANIMATIONS.ROLL_IN_BLURRED_LEFT]: ROLL_IN_BLURRED_LEFT, 78 | [ANIMATIONS.ROLL_IN_BLURRED_TOP]: ROLL_IN_BLURRED_TOP, 79 | [ANIMATIONS.ROLL_IN_BLURRED_RIGHT]: ROLL_IN_BLURRED_RIGHT, 80 | [ANIMATIONS.ROLL_IN_BLURRED_BOTTOM]: ROLL_IN_BLURRED_BOTTOM 81 | }; 82 | -------------------------------------------------------------------------------- /src/animations/animista/roll-in.ts: -------------------------------------------------------------------------------- 1 | import { ANIMATIONS } from './common'; 2 | 3 | const ROLL_IN_DEFAULT: Keyframe = { 4 | easing: 'ease-out', 5 | fillMode: 'both' 6 | }; 7 | 8 | const ROLL_IN_LEFT: Keyframe[] = [ 9 | { 10 | offset: 0, 11 | ...ROLL_IN_DEFAULT, 12 | transform: 'translateX(-800px) rotate(-540deg)', 13 | opacity: 0 14 | }, 15 | { 16 | offset: 1, 17 | ...ROLL_IN_DEFAULT, 18 | transform: 'translateX(0) rotate(0deg)', 19 | opacity: 1 20 | } 21 | ]; 22 | 23 | const ROLL_IN_TOP: Keyframe[] = [ 24 | { 25 | offset: 0, 26 | ...ROLL_IN_DEFAULT, 27 | transform: 'translateY(-800px) rotate(-540deg)', 28 | opacity: 0 29 | }, 30 | { 31 | offset: 1, 32 | ...ROLL_IN_DEFAULT, 33 | transform: 'translateY(0) rotate(0deg)', 34 | opacity: 1 35 | } 36 | ]; 37 | 38 | const ROLL_IN_RIGHT: Keyframe[] = [ 39 | { 40 | offset: 0, 41 | ...ROLL_IN_DEFAULT, 42 | transform: 'translateX(800px) rotate(540deg)', 43 | opacity: 0 44 | }, 45 | { 46 | offset: 1, 47 | ...ROLL_IN_DEFAULT, 48 | transform: 'translateX(0) rotate(0deg)', 49 | opacity: 1 50 | } 51 | ]; 52 | 53 | const ROLL_IN_BOTTOM: Keyframe[] = [ 54 | { 55 | offset: 0, 56 | ...ROLL_IN_DEFAULT, 57 | transform: 'translateY(800px) rotate(540deg)', 58 | opacity: 0 59 | }, 60 | { 61 | offset: 1, 62 | ...ROLL_IN_DEFAULT, 63 | transform: 'translateY(0) rotate(0deg)', 64 | opacity: 1 65 | } 66 | ]; 67 | 68 | export default { 69 | [ANIMATIONS.ROLL_IN_LEFT]: ROLL_IN_LEFT, 70 | [ANIMATIONS.ROLL_IN_TOP]: ROLL_IN_TOP, 71 | [ANIMATIONS.ROLL_IN_RIGHT]: ROLL_IN_RIGHT, 72 | [ANIMATIONS.ROLL_IN_BOTTOM]: ROLL_IN_BOTTOM 73 | }; 74 | -------------------------------------------------------------------------------- /src/animations/animista/rotate-in-2.ts: -------------------------------------------------------------------------------- 1 | import { ANIMATIONS } from './common'; 2 | 3 | const ROTATE_IN_2_DEFAULT: Keyframe = { 4 | easing: 'cubic-bezier(0.250, 0.460, 0.450, 0.940)', 5 | fillMode: 'both', 6 | transformOrigin: 'center center' 7 | }; 8 | 9 | const ROTATE_IN_2_CW: Keyframe[] = [ 10 | { offset: 0, ...ROTATE_IN_2_DEFAULT, transform: 'rotate(-45deg)', opacity: 0 }, 11 | { offset: 1, ...ROTATE_IN_2_DEFAULT, transform: 'rotate(0)', opacity: 1 } 12 | ]; 13 | 14 | const ROTATE_IN_2_CCW: Keyframe[] = [ 15 | { offset: 0, ...ROTATE_IN_2_DEFAULT, transform: 'rotate(45deg)', opacity: 0 }, 16 | { offset: 1, ...ROTATE_IN_2_DEFAULT, transform: 'rotate(0)', opacity: 1 } 17 | ]; 18 | 19 | const ROTATE_IN_2_FWD_CW: Keyframe[] = [ 20 | { offset: 0, ...ROTATE_IN_2_DEFAULT, transform: 'translateZ(-200px) rotate(-45deg)', opacity: 0 }, 21 | { offset: 1, ...ROTATE_IN_2_DEFAULT, transform: 'translateZ(0) rotate(0)', opacity: 1 } 22 | ]; 23 | 24 | const ROTATE_IN_2_FWD_CCW: Keyframe[] = [ 25 | { offset: 0, ...ROTATE_IN_2_DEFAULT, transform: 'translateZ(-200px) rotate(45deg)', opacity: 0 }, 26 | { offset: 1, ...ROTATE_IN_2_DEFAULT, transform: 'translateZ(0) rotate(0)', opacity: 1 } 27 | ]; 28 | 29 | const ROTATE_IN_2_BCK_CW: Keyframe[] = [ 30 | { offset: 0, ...ROTATE_IN_2_DEFAULT, transform: 'translateZ(200px) rotate(-45deg)', opacity: 0 }, 31 | { offset: 1, ...ROTATE_IN_2_DEFAULT, transform: 'translateZ(0) rotate(0)', opacity: 1 } 32 | ]; 33 | 34 | const ROTATE_IN_2_BCK_CCW: Keyframe[] = [ 35 | { offset: 0, ...ROTATE_IN_2_DEFAULT, transform: 'translateZ(200px) rotate(45deg)', opacity: 0 }, 36 | { offset: 1, ...ROTATE_IN_2_DEFAULT, transform: 'translateZ(0) rotate(0)', opacity: 1 } 37 | ]; 38 | 39 | const ROTATE_IN_2_TR_CW: Keyframe[] = [ 40 | { offset: 0, ...ROTATE_IN_2_DEFAULT, transform: 'rotate(-45deg)', transformOrigin: '100% 0%', opacity: 0 }, 41 | { offset: 1, ...ROTATE_IN_2_DEFAULT, transform: 'rotate(0)', transformOrigin: '100% 0%', opacity: 1 } 42 | ]; 43 | 44 | const ROTATE_IN_2_TR_CCW: Keyframe[] = [ 45 | { offset: 0, ...ROTATE_IN_2_DEFAULT, transform: 'rotate(45deg)', transformOrigin: '100% 0%', opacity: 0 }, 46 | { offset: 1, ...ROTATE_IN_2_DEFAULT, transform: 'rotate(0)', transformOrigin: '100% 0%', opacity: 1 } 47 | ]; 48 | 49 | const ROTATE_IN_2_BR_CW: Keyframe[] = [ 50 | { offset: 0, ...ROTATE_IN_2_DEFAULT, transform: 'rotate(-45deg)', transformOrigin: '100% 100%', opacity: 0 }, 51 | { offset: 1, ...ROTATE_IN_2_DEFAULT, transform: 'rotate(0)', transformOrigin: '100% 100%', opacity: 1 } 52 | ]; 53 | 54 | const ROTATE_IN_2_BR_CCW: Keyframe[] = [ 55 | { offset: 0, ...ROTATE_IN_2_DEFAULT, transform: 'rotate(45deg)', transformOrigin: '100% 100%', opacity: 0 }, 56 | { offset: 1, ...ROTATE_IN_2_DEFAULT, transform: 'rotate(0)', transformOrigin: '100% 100%', opacity: 1 } 57 | ]; 58 | 59 | const ROTATE_IN_2_BL_CW: Keyframe[] = [ 60 | { offset: 0, ...ROTATE_IN_2_DEFAULT, transform: 'rotate(-45deg)', transformOrigin: '0 100%', opacity: 0 }, 61 | { offset: 1, ...ROTATE_IN_2_DEFAULT, transform: 'rotate(0)', transformOrigin: '0 100%', opacity: 1 } 62 | ]; 63 | 64 | const ROTATE_IN_2_BL_CCW: Keyframe[] = [ 65 | { offset: 0, ...ROTATE_IN_2_DEFAULT, transform: 'rotate(45deg)', transformOrigin: '0 100%', opacity: 0 }, 66 | { offset: 1, ...ROTATE_IN_2_DEFAULT, transform: 'rotate(0)', transformOrigin: '0 100%', opacity: 1 } 67 | ]; 68 | 69 | const ROTATE_IN_2_TL_CW: Keyframe[] = [ 70 | { offset: 0, ...ROTATE_IN_2_DEFAULT, transform: 'rotate(-45deg)', transformOrigin: '0 0', opacity: 0 }, 71 | { offset: 1, ...ROTATE_IN_2_DEFAULT, transform: 'rotate(0)', transformOrigin: '0 0', opacity: 1 } 72 | ]; 73 | 74 | const ROTATE_IN_2_TL_CCW: Keyframe[] = [ 75 | { offset: 0, ...ROTATE_IN_2_DEFAULT, transform: 'rotate(45deg)', transformOrigin: '0 0', opacity: 0 }, 76 | { offset: 1, ...ROTATE_IN_2_DEFAULT, transform: 'rotate(0)', transformOrigin: '0 0', opacity: 1 } 77 | ]; 78 | 79 | export default { 80 | [ANIMATIONS.ROTATE_IN_2_CW]: ROTATE_IN_2_CW, 81 | [ANIMATIONS.ROTATE_IN_2_CCW]: ROTATE_IN_2_CCW, 82 | [ANIMATIONS.ROTATE_IN_2_FWD_CW]: ROTATE_IN_2_FWD_CW, 83 | [ANIMATIONS.ROTATE_IN_2_FWD_CCW]: ROTATE_IN_2_FWD_CCW, 84 | [ANIMATIONS.ROTATE_IN_2_BCK_CW]: ROTATE_IN_2_BCK_CW, 85 | [ANIMATIONS.ROTATE_IN_2_BCK_CCW]: ROTATE_IN_2_BCK_CCW, 86 | [ANIMATIONS.ROTATE_IN_2_TR_CW]: ROTATE_IN_2_TR_CW, 87 | [ANIMATIONS.ROTATE_IN_2_TR_CCW]: ROTATE_IN_2_TR_CCW, 88 | [ANIMATIONS.ROTATE_IN_2_BR_CW]: ROTATE_IN_2_BR_CW, 89 | [ANIMATIONS.ROTATE_IN_2_BR_CCW]: ROTATE_IN_2_BR_CCW, 90 | [ANIMATIONS.ROTATE_IN_2_BL_CW]: ROTATE_IN_2_BL_CW, 91 | [ANIMATIONS.ROTATE_IN_2_BL_CCW]: ROTATE_IN_2_BL_CCW, 92 | [ANIMATIONS.ROTATE_IN_2_TL_CW]: ROTATE_IN_2_TL_CW, 93 | [ANIMATIONS.ROTATE_IN_2_TL_CCW]: ROTATE_IN_2_TL_CCW 94 | }; 95 | -------------------------------------------------------------------------------- /src/animations/animista/rotate-in.ts: -------------------------------------------------------------------------------- 1 | import { ANIMATIONS } from './common'; 2 | 3 | const ROTATE_IN_DEFAULT: Keyframe = { 4 | easing: 'cubic-bezier(0.250, 0.460, 0.450, 0.940)', 5 | fillMode: 'both', 6 | transformOrigin: 'center center' 7 | }; 8 | 9 | const ROTATE_IN_CENTER: Keyframe[] = [ 10 | { offset: 0, ...ROTATE_IN_DEFAULT, transform: 'rotate(-360deg)', opacity: 0 }, 11 | { offset: 1, ...ROTATE_IN_DEFAULT, transform: 'rotate(0)', opacity: 1 } 12 | ]; 13 | 14 | const ROTATE_IN_TOP: Keyframe[] = [ 15 | { offset: 0, ...ROTATE_IN_DEFAULT, transform: 'rotate(-360deg)', transformOrigin: 'top', opacity: 0 }, 16 | { offset: 1, ...ROTATE_IN_DEFAULT, transform: 'rotate(0)', transformOrigin: 'top', opacity: 1 } 17 | ]; 18 | 19 | const ROTATE_IN_TR: Keyframe[] = [ 20 | { offset: 0, ...ROTATE_IN_DEFAULT, transform: 'rotate(-360deg)', transformOrigin: 'top right', opacity: 0 }, 21 | { offset: 1, ...ROTATE_IN_DEFAULT, transform: 'rotate(0)', transformOrigin: 'top right', opacity: 1 } 22 | ]; 23 | 24 | const ROTATE_IN_RIGHT: Keyframe[] = [ 25 | { offset: 0, ...ROTATE_IN_DEFAULT, transform: 'rotate(-360deg)', transformOrigin: 'right', opacity: 0 }, 26 | { offset: 1, ...ROTATE_IN_DEFAULT, transform: 'rotate(0)', transformOrigin: 'right', opacity: 1 } 27 | ]; 28 | 29 | const ROTATE_IN_BR: Keyframe[] = [ 30 | { offset: 0, ...ROTATE_IN_DEFAULT, transform: 'rotate(-360deg)', transformOrigin: 'bottom right', opacity: 0 }, 31 | { offset: 1, ...ROTATE_IN_DEFAULT, transform: 'rotate(0)', transformOrigin: 'bottom right', opacity: 1 } 32 | ]; 33 | 34 | const ROTATE_IN_BOTTOM: Keyframe[] = [ 35 | { offset: 0, ...ROTATE_IN_DEFAULT, transform: 'rotate(-360deg)', transformOrigin: 'bottom', opacity: 0 }, 36 | { offset: 1, ...ROTATE_IN_DEFAULT, transform: 'rotate(0)', transformOrigin: 'bottom', opacity: 1 } 37 | ]; 38 | 39 | const ROTATE_IN_BL: Keyframe[] = [ 40 | { offset: 0, ...ROTATE_IN_DEFAULT, transform: 'rotate(-360deg)', transformOrigin: 'bottom left', opacity: 0 }, 41 | { offset: 1, ...ROTATE_IN_DEFAULT, transform: 'rotate(0)', transformOrigin: 'bottom left', opacity: 1 } 42 | ]; 43 | 44 | const ROTATE_IN_LEFT: Keyframe[] = [ 45 | { offset: 0, ...ROTATE_IN_DEFAULT, transform: 'rotate(-360deg)', transformOrigin: 'left', opacity: 0 }, 46 | { offset: 1, ...ROTATE_IN_DEFAULT, transform: 'rotate(0)', transformOrigin: 'left', opacity: 1 } 47 | ]; 48 | 49 | const ROTATE_IN_TL: Keyframe[] = [ 50 | { offset: 0, ...ROTATE_IN_DEFAULT, transform: 'rotate(-360deg)', transformOrigin: 'top left', opacity: 0 }, 51 | { offset: 1, ...ROTATE_IN_DEFAULT, transform: 'rotate(0)', transformOrigin: 'top left', opacity: 1 } 52 | ]; 53 | 54 | const ROTATE_IN_HOR: Keyframe[] = [ 55 | { offset: 0, ...ROTATE_IN_DEFAULT, transform: 'rotate(360deg)', opacity: 0 }, 56 | { offset: 1, ...ROTATE_IN_DEFAULT, transform: 'rotate(0)', opacity: 1 } 57 | ]; 58 | 59 | const ROTATE_IN_VER: Keyframe[] = [ 60 | { offset: 0, ...ROTATE_IN_DEFAULT, transform: 'rotate(-360deg)', opacity: 0 }, 61 | { offset: 1, ...ROTATE_IN_DEFAULT, transform: 'rotate(0)', opacity: 1 } 62 | ]; 63 | 64 | const ROTATE_IN_DIAG_1: Keyframe[] = [ 65 | { offset: 0, ...ROTATE_IN_DEFAULT, transform: 'rotate3d(1, 1, 0, -360deg)', opacity: 0 }, 66 | { offset: 1, ...ROTATE_IN_DEFAULT, transform: 'rotate3d(1, 1, 0, 0deg)', opacity: 1 } 67 | ]; 68 | 69 | const ROTATE_IN_DIAG_2: Keyframe[] = [ 70 | { offset: 0, ...ROTATE_IN_DEFAULT, transform: 'rotate3d(-1, 1, 0, -360deg)', opacity: 0 }, 71 | { offset: 1, ...ROTATE_IN_DEFAULT, transform: 'rotate3d(-1, 1, 0, 0deg)', opacity: 1 } 72 | ]; 73 | 74 | export default { 75 | [ANIMATIONS.ROTATE_IN_CENTER]: ROTATE_IN_CENTER, 76 | [ANIMATIONS.ROTATE_IN_TOP]: ROTATE_IN_TOP, 77 | [ANIMATIONS.ROTATE_IN_TR]: ROTATE_IN_TR, 78 | [ANIMATIONS.ROTATE_IN_RIGHT]: ROTATE_IN_RIGHT, 79 | [ANIMATIONS.ROTATE_IN_BR]: ROTATE_IN_BR, 80 | [ANIMATIONS.ROTATE_IN_BOTTOM]: ROTATE_IN_BOTTOM, 81 | [ANIMATIONS.ROTATE_IN_BL]: ROTATE_IN_BL, 82 | [ANIMATIONS.ROTATE_IN_LEFT]: ROTATE_IN_LEFT, 83 | [ANIMATIONS.ROTATE_IN_TL]: ROTATE_IN_TL, 84 | [ANIMATIONS.ROTATE_IN_HOR]: ROTATE_IN_HOR, 85 | [ANIMATIONS.ROTATE_IN_VER]: ROTATE_IN_VER, 86 | [ANIMATIONS.ROTATE_IN_DIAG_1]: ROTATE_IN_DIAG_1, 87 | [ANIMATIONS.ROTATE_IN_DIAG_2]: ROTATE_IN_DIAG_2 88 | }; 89 | -------------------------------------------------------------------------------- /src/animations/animista/rotate-scale.ts: -------------------------------------------------------------------------------- 1 | import { ANIMATIONS } from './common'; 2 | 3 | const ROTATE_SCALE_DEFAULT: Keyframe = { 4 | easing: 'linear', 5 | fillMode: 'both' 6 | }; 7 | 8 | const ROTATE_SCALE_UP: Keyframe[] = [ 9 | { offset: 0, ...ROTATE_SCALE_DEFAULT, transform: 'scale(1) rotateZ(0)' }, 10 | { offset: 0.5, ...ROTATE_SCALE_DEFAULT, transform: 'scale(2) rotateZ(180deg)' }, 11 | { offset: 1, ...ROTATE_SCALE_DEFAULT, transform: 'scale(1) rotateZ(360deg)' } 12 | ]; 13 | 14 | const ROTATE_SCALE_DOWN: Keyframe[] = [ 15 | { offset: 0, ...ROTATE_SCALE_DEFAULT, transform: 'scale(1) rotateZ(0)' }, 16 | { offset: 0.5, ...ROTATE_SCALE_DEFAULT, transform: 'scale(0.5) rotateZ(180deg)' }, 17 | { offset: 1, ...ROTATE_SCALE_DEFAULT, transform: 'scale(1) rotateZ(360deg)' } 18 | ]; 19 | 20 | const ROTATE_SCALE_UP_HOR: Keyframe[] = [ 21 | { offset: 0, ...ROTATE_SCALE_DEFAULT, transform: 'scale(1) rotateX(0)' }, 22 | { offset: 0.5, ...ROTATE_SCALE_DEFAULT, transform: 'scale(2) rotateX(-180deg)' }, 23 | { offset: 1, ...ROTATE_SCALE_DEFAULT, transform: 'scale(1) rotateX(-360deg)' } 24 | ]; 25 | 26 | const ROTATE_SCALE_DOWN_HOR: Keyframe[] = [ 27 | { offset: 0, ...ROTATE_SCALE_DEFAULT, transform: 'scale(1) rotateX(0)' }, 28 | { offset: 0.5, ...ROTATE_SCALE_DEFAULT, transform: 'scale(0.5) rotateX(-180deg)' }, 29 | { offset: 1, ...ROTATE_SCALE_DEFAULT, transform: 'scale(1) rotateX(-360deg)' } 30 | ]; 31 | 32 | const ROTATE_SCALE_UP_VER: Keyframe[] = [ 33 | { offset: 0, ...ROTATE_SCALE_DEFAULT, transform: 'scale(1) rotateY(0)' }, 34 | { offset: 0.5, ...ROTATE_SCALE_DEFAULT, transform: 'scale(2) rotateY(180deg)' }, 35 | { offset: 1, ...ROTATE_SCALE_DEFAULT, transform: 'scale(1) rotateY(360deg)' } 36 | ]; 37 | 38 | const ROTATE_SCALE_DOWN_VER: Keyframe[] = [ 39 | { offset: 0, ...ROTATE_SCALE_DEFAULT, transform: 'scale(1) rotateY(0)' }, 40 | { offset: 0.5, ...ROTATE_SCALE_DEFAULT, transform: 'scale(0.5) rotateY(180deg)' }, 41 | { offset: 1, ...ROTATE_SCALE_DEFAULT, transform: 'scale(1) rotateY(360deg)' } 42 | ]; 43 | 44 | const ROTATE_SCALE_UP_DIAG_1: Keyframe[] = [ 45 | { offset: 0, ...ROTATE_SCALE_DEFAULT, transform: 'scale(1) rotate3d(1, 1, 0, 0deg)' }, 46 | { offset: 0.5, ...ROTATE_SCALE_DEFAULT, transform: 'scale(2) rotate3d(1, 1, 0, -180deg)' }, 47 | { offset: 1, ...ROTATE_SCALE_DEFAULT, transform: 'scale(1) rotate3d(1, 1, 0, -360deg)' } 48 | ]; 49 | 50 | const ROTATE_SCALE_DOWN_DIAG_1: Keyframe[] = [ 51 | { offset: 0, ...ROTATE_SCALE_DEFAULT, transform: 'scale(1) rotate3d(1, 1, 0, 0deg)' }, 52 | { offset: 0.5, ...ROTATE_SCALE_DEFAULT, transform: 'scale(0.5) rotate3d(1, 1, 0, -180deg)' }, 53 | { offset: 1, ...ROTATE_SCALE_DEFAULT, transform: 'scale(1) rotate3d(1, 1, 0, -360deg)' } 54 | ]; 55 | 56 | const ROTATE_SCALE_UP_DIAG_2: Keyframe[] = [ 57 | { offset: 0, ...ROTATE_SCALE_DEFAULT, transform: 'scale(1) rotate3d(-1, 1, 0, 0deg)' }, 58 | { offset: 0.5, ...ROTATE_SCALE_DEFAULT, transform: 'scale(2) rotate3d(-1, 1, 0, 180deg)' }, 59 | { offset: 1, ...ROTATE_SCALE_DEFAULT, transform: 'scale(1) rotate3d(-1, 1, 0, 360deg)' } 60 | ]; 61 | 62 | const ROTATE_SCALE_DOWN_DIAG_2: Keyframe[] = [ 63 | { offset: 0, ...ROTATE_SCALE_DEFAULT, transform: 'scale(1) rotate3d(-1, 1, 0, 0deg)' }, 64 | { offset: 0.5, ...ROTATE_SCALE_DEFAULT, transform: 'scale(0.5) rotate3d(-1, 1, 0, 180deg)' }, 65 | { offset: 1, ...ROTATE_SCALE_DEFAULT, transform: 'scale(1) rotate3d(-1, 1, 0, 360deg)' } 66 | ]; 67 | 68 | export default { 69 | [ANIMATIONS.ROTATE_SCALE_UP]: ROTATE_SCALE_UP, 70 | [ANIMATIONS.ROTATE_SCALE_DOWN]: ROTATE_SCALE_DOWN, 71 | [ANIMATIONS.ROTATE_SCALE_UP_HOR]: ROTATE_SCALE_UP_HOR, 72 | [ANIMATIONS.ROTATE_SCALE_DOWN_HOR]: ROTATE_SCALE_DOWN_HOR, 73 | [ANIMATIONS.ROTATE_SCALE_UP_VER]: ROTATE_SCALE_UP_VER, 74 | [ANIMATIONS.ROTATE_SCALE_DOWN_VER]: ROTATE_SCALE_DOWN_VER, 75 | [ANIMATIONS.ROTATE_SCALE_UP_DIAG_1]: ROTATE_SCALE_UP_DIAG_1, 76 | [ANIMATIONS.ROTATE_SCALE_DOWN_DIAG_1]: ROTATE_SCALE_DOWN_DIAG_1, 77 | [ANIMATIONS.ROTATE_SCALE_UP_DIAG_2]: ROTATE_SCALE_UP_DIAG_2, 78 | [ANIMATIONS.ROTATE_SCALE_DOWN_DIAG_2]: ROTATE_SCALE_DOWN_DIAG_2 79 | }; -------------------------------------------------------------------------------- /src/animations/animista/scale-down.ts: -------------------------------------------------------------------------------- 1 | import { ANIMATIONS } from './common'; 2 | 3 | const SCALE_DOWN_DEFAULT: Keyframe = { 4 | easing: 'cubic-bezier(0.250, 0.460, 0.450, 0.940)', 5 | fillMode: 'both', 6 | transformOrigin: 'center center' 7 | }; 8 | 9 | const SCALE_DOWN_CENTER: Keyframe[] = [ 10 | { offset: 0, ...SCALE_DOWN_DEFAULT, transform: 'scale(1)' }, 11 | { offset: 1, ...SCALE_DOWN_DEFAULT, transform: 'scale(0.5)' } 12 | ]; 13 | 14 | const SCALE_DOWN_TOP: Keyframe[] = [ 15 | { offset: 0, ...SCALE_DOWN_DEFAULT, transform: 'scale(1)', transformOrigin: '50% 0%' }, 16 | { offset: 1, ...SCALE_DOWN_DEFAULT, transform: 'scale(0.5)', transformOrigin: '50% 0%' } 17 | ]; 18 | 19 | const SCALE_DOWN_TR: Keyframe[] = [ 20 | { offset: 0, ...SCALE_DOWN_DEFAULT, transform: 'scale(1)', transformOrigin: '100% 0%' }, 21 | { offset: 1, ...SCALE_DOWN_DEFAULT, transform: 'scale(0.5)', transformOrigin: '100% 0%' } 22 | ]; 23 | 24 | const SCALE_DOWN_RIGHT: Keyframe[] = [ 25 | { offset: 0, ...SCALE_DOWN_DEFAULT, transform: 'scale(1)', transformOrigin: '100% 50%' }, 26 | { offset: 1, ...SCALE_DOWN_DEFAULT, transform: 'scale(0.5)', transformOrigin: '100% 50%' } 27 | ]; 28 | 29 | const SCALE_DOWN_BR: Keyframe[] = [ 30 | { offset: 0, ...SCALE_DOWN_DEFAULT, transform: 'scale(1)', transformOrigin: '100% 100%' }, 31 | { offset: 1, ...SCALE_DOWN_DEFAULT, transform: 'scale(0.5)', transformOrigin: '100% 100%' } 32 | ]; 33 | 34 | const SCALE_DOWN_BOTTOM: Keyframe[] = [ 35 | { offset: 0, ...SCALE_DOWN_DEFAULT, transform: 'scale(1)', transformOrigin: '50% 100%' }, 36 | { offset: 1, ...SCALE_DOWN_DEFAULT, transform: 'scale(0.5)', transformOrigin: '50% 100%' } 37 | ]; 38 | 39 | const SCALE_DOWN_BL: Keyframe[] = [ 40 | { offset: 0, ...SCALE_DOWN_DEFAULT, transform: 'scale(1)', transformOrigin: '0% 100%' }, 41 | { offset: 1, ...SCALE_DOWN_DEFAULT, transform: 'scale(0.5)', transformOrigin: '0% 100%' } 42 | ]; 43 | 44 | const SCALE_DOWN_LEFT: Keyframe[] = [ 45 | { offset: 0, ...SCALE_DOWN_DEFAULT, transform: 'scale(1)', transformOrigin: '0% 50%' }, 46 | { offset: 1, ...SCALE_DOWN_DEFAULT, transform: 'scale(0.5)', transformOrigin: '0% 50%' } 47 | ]; 48 | 49 | const SCALE_DOWN_TL: Keyframe[] = [ 50 | { offset: 0, ...SCALE_DOWN_DEFAULT, transform: 'scale(1)', transformOrigin: '0% 0%' }, 51 | { offset: 1, ...SCALE_DOWN_DEFAULT, transform: 'scale(0.5)', transformOrigin: '0% 0%' } 52 | ]; 53 | 54 | const SCALE_DOWN_HOR_CENTER: Keyframe[] = [ 55 | { offset: 0, ...SCALE_DOWN_DEFAULT, transform: 'scaleX(1)' }, 56 | { offset: 1, ...SCALE_DOWN_DEFAULT, transform: 'scaleX(0.3)' } 57 | ]; 58 | 59 | const SCALE_DOWN_HOR_LEFT: Keyframe[] = [ 60 | { offset: 0, ...SCALE_DOWN_DEFAULT, transform: 'scaleX(1)', transformOrigin: '0% 0%' }, 61 | { offset: 1, ...SCALE_DOWN_DEFAULT, transform: 'scaleX(0.3)', transformOrigin: '0% 0%' } 62 | ]; 63 | 64 | const SCALE_DOWN_HOR_RIGHT: Keyframe[] = [ 65 | { offset: 0, ...SCALE_DOWN_DEFAULT, transform: 'scaleX(1)', transformOrigin: '100% 100%' }, 66 | { offset: 1, ...SCALE_DOWN_DEFAULT, transform: 'scaleX(0.3)', transformOrigin: '100% 100%' } 67 | ]; 68 | 69 | const SCALE_DOWN_VER_CENTER: Keyframe[] = [ 70 | { offset: 0, ...SCALE_DOWN_DEFAULT, transform: 'scaleY(1)' }, 71 | { offset: 1, ...SCALE_DOWN_DEFAULT, transform: 'scaleY(0.3)' } 72 | ]; 73 | 74 | const SCALE_DOWN_VER_TOP: Keyframe[] = [ 75 | { offset: 0, ...SCALE_DOWN_DEFAULT, transform: 'scaleY(1)', transformOrigin: '100% 0%' }, 76 | { offset: 1, ...SCALE_DOWN_DEFAULT, transform: 'scaleY(0.3)', transformOrigin: '100% 0%' } 77 | ]; 78 | 79 | const SCALE_DOWN_VER_BOTTOM: Keyframe[] = [ 80 | { offset: 0, ...SCALE_DOWN_DEFAULT, transform: 'scaleY(1)', transformOrigin: '0% 100%' }, 81 | { offset: 1, ...SCALE_DOWN_DEFAULT, transform: 'scaleY(0.3)', transformOrigin: '0% 100%' } 82 | ]; 83 | 84 | export default { 85 | [ANIMATIONS.SCALE_DOWN_CENTER]: SCALE_DOWN_CENTER, 86 | [ANIMATIONS.SCALE_DOWN_TOP]: SCALE_DOWN_TOP, 87 | [ANIMATIONS.SCALE_DOWN_TR]: SCALE_DOWN_TR, 88 | [ANIMATIONS.SCALE_DOWN_RIGHT]: SCALE_DOWN_RIGHT, 89 | [ANIMATIONS.SCALE_DOWN_BR]: SCALE_DOWN_BR, 90 | [ANIMATIONS.SCALE_DOWN_BOTTOM]: SCALE_DOWN_BOTTOM, 91 | [ANIMATIONS.SCALE_DOWN_BL]: SCALE_DOWN_BL, 92 | [ANIMATIONS.SCALE_DOWN_LEFT]: SCALE_DOWN_LEFT, 93 | [ANIMATIONS.SCALE_DOWN_TL]: SCALE_DOWN_TL, 94 | [ANIMATIONS.SCALE_DOWN_HOR_CENTER]: SCALE_DOWN_HOR_CENTER, 95 | [ANIMATIONS.SCALE_DOWN_HOR_LEFT]: SCALE_DOWN_HOR_LEFT, 96 | [ANIMATIONS.SCALE_DOWN_HOR_RIGHT]: SCALE_DOWN_HOR_RIGHT, 97 | [ANIMATIONS.SCALE_DOWN_VER_CENTER]: SCALE_DOWN_VER_CENTER, 98 | [ANIMATIONS.SCALE_DOWN_VER_TOP]: SCALE_DOWN_VER_TOP, 99 | [ANIMATIONS.SCALE_DOWN_VER_BOTTOM]: SCALE_DOWN_VER_BOTTOM 100 | } 101 | -------------------------------------------------------------------------------- /src/animations/animista/scale-up.ts: -------------------------------------------------------------------------------- 1 | import { ANIMATIONS } from './common'; 2 | 3 | const SCALE_UP_DEFAULT: Keyframe = { 4 | easing: 'cubic-bezier(0.390, 0.575, 0.565, 1.000)', 5 | fillMode: 'both', 6 | transformOrigin: 'center center' 7 | }; 8 | 9 | const SCALE_UP_CENTER: Keyframe[] = [ 10 | { offset: 0, ...SCALE_UP_DEFAULT, transform: 'scale(0.5)' }, 11 | { offset: 1, ...SCALE_UP_DEFAULT, transform: 'scale(1)' } 12 | ]; 13 | 14 | const SCALE_UP_TOP: Keyframe[] = [ 15 | { offset: 0, ...SCALE_UP_DEFAULT, transform: 'scale(0.5)', transformOrigin: '50% 0%' }, 16 | { offset: 1, ...SCALE_UP_DEFAULT, transform: 'scale(1)', transformOrigin: '50% 0%' } 17 | ]; 18 | 19 | const SCALE_UP_TR: Keyframe[] = [ 20 | { offset: 0, ...SCALE_UP_DEFAULT, transform: 'scale(0.5)', transformOrigin: '100% 0%' }, 21 | { offset: 1, ...SCALE_UP_DEFAULT, transform: 'scale(1)', transformOrigin: '100% 0%' } 22 | ]; 23 | 24 | const SCALE_UP_RIGHT: Keyframe[] = [ 25 | { offset: 0, ...SCALE_UP_DEFAULT, transform: 'scale(0.5)', transformOrigin: '100% 50%' }, 26 | { offset: 1, ...SCALE_UP_DEFAULT, transform: 'scale(1)', transformOrigin: '100% 50%' } 27 | ]; 28 | 29 | const SCALE_UP_BR: Keyframe[] = [ 30 | { offset: 0, ...SCALE_UP_DEFAULT, transform: 'scale(0.5)', transformOrigin: '100% 100%' }, 31 | { offset: 1, ...SCALE_UP_DEFAULT, transform: 'scale(1)', transformOrigin: '100% 100%' } 32 | ]; 33 | 34 | const SCALE_UP_BOTTOM: Keyframe[] = [ 35 | { offset: 0, ...SCALE_UP_DEFAULT, transform: 'scale(0.5)', transformOrigin: '50% 100%' }, 36 | { offset: 1, ...SCALE_UP_DEFAULT, transform: 'scale(1)', transformOrigin: '50% 100%' } 37 | ]; 38 | 39 | const SCALE_UP_BL: Keyframe[] = [ 40 | { offset: 0, ...SCALE_UP_DEFAULT, transform: 'scale(0.5)', transformOrigin: '0% 100%' }, 41 | { offset: 1, ...SCALE_UP_DEFAULT, transform: 'scale(1)', transformOrigin: '0% 100%' } 42 | ]; 43 | 44 | const SCALE_UP_LEFT: Keyframe[] = [ 45 | { offset: 0, ...SCALE_UP_DEFAULT, transform: 'scale(0.5)', transformOrigin: '0% 50%' }, 46 | { offset: 1, ...SCALE_UP_DEFAULT, transform: 'scale(1)', transformOrigin: '0% 50%' } 47 | ]; 48 | 49 | const SCALE_UP_TL: Keyframe[] = [ 50 | { offset: 0, ...SCALE_UP_DEFAULT, transform: 'scale(0.5)', transformOrigin: '0% 0%' }, 51 | { offset: 1, ...SCALE_UP_DEFAULT, transform: 'scale(1)', transformOrigin: '0% 0%' } 52 | ]; 53 | 54 | const SCALE_UP_HOR_CENTER: Keyframe[] = [ 55 | { offset: 0, ...SCALE_UP_DEFAULT, transform: 'scaleX(0.4)' }, 56 | { offset: 1, ...SCALE_UP_DEFAULT, transform: 'scaleX(1)' } 57 | ]; 58 | 59 | const SCALE_UP_HOR_LEFT: Keyframe[] = [ 60 | { offset: 0, ...SCALE_UP_DEFAULT, transform: 'scaleX(0.4)', transformOrigin: '0% 0%' }, 61 | { offset: 1, ...SCALE_UP_DEFAULT, transform: 'scaleX(1)', transformOrigin: '0% 0%' } 62 | ]; 63 | 64 | const SCALE_UP_HOR_RIGHT: Keyframe[] = [ 65 | { offset: 0, ...SCALE_UP_DEFAULT, transform: 'scaleX(0.4)', transformOrigin: '100% 100%' }, 66 | { offset: 1, ...SCALE_UP_DEFAULT, transform: 'scaleX(1)', transformOrigin: '100% 100%' } 67 | ]; 68 | 69 | const SCALE_UP_VER_CENTER: Keyframe[] = [ 70 | { offset: 0, ...SCALE_UP_DEFAULT, transform: 'scaleY(0.4)' }, 71 | { offset: 1, ...SCALE_UP_DEFAULT, transform: 'scaleY(1)' } 72 | ]; 73 | 74 | const SCALE_UP_VER_TOP: Keyframe[] = [ 75 | { offset: 0, ...SCALE_UP_DEFAULT, transform: 'scaleY(0.4)', transformOrigin: '100% 0%' }, 76 | { offset: 1, ...SCALE_UP_DEFAULT, transform: 'scaleY(1)', transformOrigin: '100% 0%' } 77 | ]; 78 | 79 | const SCALE_UP_VER_BOTTOM: Keyframe[] = [ 80 | { offset: 0, ...SCALE_UP_DEFAULT, transform: 'scaleY(0.4)', transformOrigin: '0% 100%' }, 81 | { offset: 1, ...SCALE_UP_DEFAULT, transform: 'scaleY(1)', transformOrigin: '0% 100%' } 82 | ]; 83 | 84 | export default { 85 | [ANIMATIONS.SCALE_UP_CENTER]: SCALE_UP_CENTER, 86 | [ANIMATIONS.SCALE_UP_TOP]: SCALE_UP_TOP, 87 | [ANIMATIONS.SCALE_UP_TR]: SCALE_UP_TR, 88 | [ANIMATIONS.SCALE_UP_RIGHT]: SCALE_UP_RIGHT, 89 | [ANIMATIONS.SCALE_UP_BR]: SCALE_UP_BR, 90 | [ANIMATIONS.SCALE_UP_BOTTOM]: SCALE_UP_BOTTOM, 91 | [ANIMATIONS.SCALE_UP_BL]: SCALE_UP_BL, 92 | [ANIMATIONS.SCALE_UP_LEFT]: SCALE_UP_LEFT, 93 | [ANIMATIONS.SCALE_UP_TL]: SCALE_UP_TL, 94 | [ANIMATIONS.SCALE_UP_HOR_CENTER]: SCALE_UP_HOR_CENTER, 95 | [ANIMATIONS.SCALE_UP_HOR_LEFT]: SCALE_UP_HOR_LEFT, 96 | [ANIMATIONS.SCALE_UP_HOR_RIGHT]: SCALE_UP_HOR_RIGHT, 97 | [ANIMATIONS.SCALE_UP_VER_CENTER]: SCALE_UP_VER_CENTER, 98 | [ANIMATIONS.SCALE_UP_VER_TOP]: SCALE_UP_VER_TOP, 99 | [ANIMATIONS.SCALE_UP_VER_BOTTOM]: SCALE_UP_VER_BOTTOM 100 | } -------------------------------------------------------------------------------- /src/animations/animista/shadow-drop-2.ts: -------------------------------------------------------------------------------- 1 | import { ANIMATIONS } from './common'; 2 | 3 | const SHADOW_DROP_2_DEFAULT: Keyframe = { 4 | easing: 'cubic-bezier(0.250, 0.460, 0.450, 0.940)', 5 | fillMode: 'both' 6 | }; 7 | 8 | const SHADOW_DROP_2_CENTER: Keyframe[] = [ 9 | { offset: 0, ...SHADOW_DROP_2_DEFAULT, boxShadow: '0 0 0 0 rgba(0, 0, 0, 0)', transform: 'translateZ(0)' }, 10 | { offset: 1, ...SHADOW_DROP_2_DEFAULT, boxShadow: '0 0 20px 0px rgba(0, 0, 0, 0.35)', transform: 'translateZ(50px)' } 11 | ]; 12 | 13 | const SHADOW_DROP_2_TOP: Keyframe[] = [ 14 | { offset: 0, ...SHADOW_DROP_2_DEFAULT, boxShadow: '0 0 0 0 rgba(0, 0, 0, 0)', transform: 'translateZ(0) translateY(0)' }, 15 | { offset: 1, ...SHADOW_DROP_2_DEFAULT, boxShadow: '0 -12px 20px -12px rgba(0, 0, 0, 0.35)', transform: 'translateZ(50px) translateY(12px)' } 16 | ]; 17 | 18 | const SHADOW_DROP_2_RIGHT: Keyframe[] = [ 19 | { offset: 0, ...SHADOW_DROP_2_DEFAULT, boxShadow: '0 0 0 0 rgba(0, 0, 0, 0)', transform: 'translateZ(0) translateY(0)' }, 20 | { offset: 1, ...SHADOW_DROP_2_DEFAULT, boxShadow: '12px 0 20px -12px rgba(0, 0, 0, 0.35)', transform: 'translateZ(50px) translateX(-12px)' } 21 | ]; 22 | 23 | const SHADOW_DROP_2_BOTTOM: Keyframe[] = [ 24 | { offset: 0, ...SHADOW_DROP_2_DEFAULT, boxShadow: '0 0 0 0 rgba(0, 0, 0, 0)', transform: 'translateZ(0) translateY(0)' }, 25 | { offset: 1, ...SHADOW_DROP_2_DEFAULT, boxShadow: '0 12px 20px -12px rgba(0, 0, 0, 0.35)', transform: 'translateZ(50px) translateY(-12px)' } 26 | ]; 27 | 28 | const SHADOW_DROP_2_LEFT: Keyframe[] = [ 29 | { offset: 0, ...SHADOW_DROP_2_DEFAULT, boxShadow: '0 0 0 0 rgba(0, 0, 0, 0)', transform: 'translateZ(0) translateX(0)' }, 30 | { offset: 1, ...SHADOW_DROP_2_DEFAULT, boxShadow: '-12px 0 20px -12px rgba(0, 0, 0, 0.35)', transform: 'translateZ(50px) translateX(12px)' } 31 | ]; 32 | 33 | const SHADOW_DROP_2_LR: Keyframe[] = [ 34 | { offset: 0, ...SHADOW_DROP_2_DEFAULT, boxShadow: '0 0 0 0 rgba(0, 0, 0, 0), 0 0 0 0 rgba(0, 0, 0, 0)', transform: 'translateZ(0)' }, 35 | { offset: 1, ...SHADOW_DROP_2_DEFAULT, boxShadow: '-12px 0 20px -12px rgba(0, 0, 0, 0.35), 12px 0 20px -12px rgba(0, 0, 0, 0.35)', transform: 'translateZ(50px)' } 36 | ]; 37 | 38 | const SHADOW_DROP_2_TB: Keyframe[] = [ 39 | { offset: 0, ...SHADOW_DROP_2_DEFAULT, boxShadow: '0 0 0 0 rgba(0, 0, 0, 0), 0 0 0 0 rgba(0, 0, 0, 0)', transform: 'translateZ(0)' }, 40 | { offset: 1, ...SHADOW_DROP_2_DEFAULT, boxShadow: '0 -12px 20px -12px rgba(0, 0, 0, 0.35), 0 12px 20px -12px rgba(0, 0, 0, 0.35)', transform: 'translateZ(50px)' } 41 | ]; 42 | 43 | const SHADOW_DROP_2_TR: Keyframe[] = [ 44 | { offset: 0, ...SHADOW_DROP_2_DEFAULT, boxShadow: '0 0 0 0 rgba(0, 0, 0, 0)', transform: 'translateZ(0) translateX(0) translateY(0)' }, 45 | { offset: 1, ...SHADOW_DROP_2_DEFAULT, boxShadow: '12px -12px 20px -12px rgba(0, 0, 0, 0.35)', transform: 'translateZ(50px) translateX(-12px) translateY(12px)' } 46 | ]; 47 | 48 | const SHADOW_DROP_2_BR: Keyframe[] = [ 49 | { offset: 0, ...SHADOW_DROP_2_DEFAULT, boxShadow: '0 0 0 0 rgba(0, 0, 0, 0)', transform: 'translateZ(0) translateX(0) translateY(0)' }, 50 | { offset: 1, ...SHADOW_DROP_2_DEFAULT, boxShadow: '12px 12px 20px -12px rgba(0, 0, 0, 0.35)', transform: 'translateZ(50px) translateX(-12px) translateY(-12px)' } 51 | ]; 52 | 53 | const SHADOW_DROP_2_BL: Keyframe[] = [ 54 | { offset: 0, ...SHADOW_DROP_2_DEFAULT, boxShadow: '0 0 0 0 rgba(0, 0, 0, 0)', transform: 'translateZ(0) translateX(0) translateY(0)' }, 55 | { offset: 1, ...SHADOW_DROP_2_DEFAULT, boxShadow: '-12px 12px 20px -12px rgba(0, 0, 0, 0.35)', transform: 'translateZ(50px) translateX(12px) translateY(-12px)' } 56 | ]; 57 | 58 | const SHADOW_DROP_2_TL: Keyframe[] = [ 59 | { offset: 0, ...SHADOW_DROP_2_DEFAULT, boxShadow: '0 0 0 0 rgba(0, 0, 0, 0)', transform: 'translateZ(0) translateX(0) translateY(0)' }, 60 | { offset: 1, ...SHADOW_DROP_2_DEFAULT, boxShadow: '-12px -12px 20px -12px rgba(0, 0, 0, 0.35)', transform: 'translateZ(50px) translateX(12px) translateY(12px)' } 61 | ]; 62 | 63 | export default { 64 | [ANIMATIONS.SHADOW_DROP_2_CENTER]: SHADOW_DROP_2_CENTER, 65 | [ANIMATIONS.SHADOW_DROP_2_TOP]: SHADOW_DROP_2_TOP, 66 | [ANIMATIONS.SHADOW_DROP_2_RIGHT]: SHADOW_DROP_2_RIGHT, 67 | [ANIMATIONS.SHADOW_DROP_2_BOTTOM]: SHADOW_DROP_2_BOTTOM, 68 | [ANIMATIONS.SHADOW_DROP_2_LEFT]: SHADOW_DROP_2_LEFT, 69 | [ANIMATIONS.SHADOW_DROP_2_LR]: SHADOW_DROP_2_LR, 70 | [ANIMATIONS.SHADOW_DROP_2_TB]: SHADOW_DROP_2_TB, 71 | [ANIMATIONS.SHADOW_DROP_2_TR]: SHADOW_DROP_2_TR, 72 | [ANIMATIONS.SHADOW_DROP_2_BR]: SHADOW_DROP_2_BR, 73 | [ANIMATIONS.SHADOW_DROP_2_BL]: SHADOW_DROP_2_BL, 74 | [ANIMATIONS.SHADOW_DROP_2_TL]: SHADOW_DROP_2_TL 75 | }; 76 | -------------------------------------------------------------------------------- /src/animations/animista/shadow-drop.ts: -------------------------------------------------------------------------------- 1 | import { ANIMATIONS } from './common'; 2 | 3 | const SHADOW_DROP_DEFAULT: Keyframe = { 4 | easing: 'cubic-bezier(0.250, 0.460, 0.450, 0.940)', 5 | fillMode: 'both' 6 | }; 7 | 8 | const SHADOW_DROP_CENTER: Keyframe[] = [ 9 | { offset: 0, ...SHADOW_DROP_DEFAULT, boxShadow: '0 0 0 0 rgba(0, 0, 0, 0)' }, 10 | { offset: 1, ...SHADOW_DROP_DEFAULT, boxShadow: '0 0 20px 0px rgba(0, 0, 0, 0.35)' } 11 | ]; 12 | 13 | const SHADOW_DROP_TOP: Keyframe[] = [ 14 | { offset: 0, ...SHADOW_DROP_DEFAULT, boxShadow: '0 0 0 0 rgba(0, 0, 0, 0)' }, 15 | { offset: 1, ...SHADOW_DROP_DEFAULT, boxShadow: '0 -12px 20px -12px rgba(0, 0, 0, 0.35)' } 16 | ]; 17 | 18 | const SHADOW_DROP_RIGHT: Keyframe[] = [ 19 | { offset: 0, ...SHADOW_DROP_DEFAULT, boxShadow: '0 0 0 0 rgba(0, 0, 0, 0)' }, 20 | { offset: 1, ...SHADOW_DROP_DEFAULT, boxShadow: '12px 0 20px -12px rgba(0, 0, 0, 0.35)' } 21 | ]; 22 | 23 | const SHADOW_DROP_BOTTOM: Keyframe[] = [ 24 | { offset: 0, ...SHADOW_DROP_DEFAULT, boxShadow: '0 0 0 0 rgba(0, 0, 0, 0)' }, 25 | { offset: 1, ...SHADOW_DROP_DEFAULT, boxShadow: '0 12px 20px -12px rgba(0, 0, 0, 0.35)' } 26 | ]; 27 | 28 | const SHADOW_DROP_LEFT: Keyframe[] = [ 29 | { offset: 0, ...SHADOW_DROP_DEFAULT, boxShadow: '0 0 0 0 rgba(0, 0, 0, 0)' }, 30 | { offset: 1, ...SHADOW_DROP_DEFAULT, boxShadow: '-12px 0 20px -12px rgba(0, 0, 0, 0.35)' } 31 | ]; 32 | 33 | const SHADOW_DROP_LR: Keyframe[] = [ 34 | { offset: 0, ...SHADOW_DROP_DEFAULT, boxShadow: '0 0 0 0 rgba(0, 0, 0, 0), 0 0 0 0 rgba(0, 0, 0, 0)' }, 35 | { offset: 1, ...SHADOW_DROP_DEFAULT, boxShadow: '-12px 0 20px -12px rgba(0, 0, 0, 0.35), 12px 0 20px -12px rgba(0, 0, 0, 0.35)' } 36 | ]; 37 | 38 | const SHADOW_DROP_TB: Keyframe[] = [ 39 | { offset: 0, ...SHADOW_DROP_DEFAULT, boxShadow: '0 0 0 0 rgba(0, 0, 0, 0), 0 0 0 0 rgba(0, 0, 0, 0)' }, 40 | { offset: 1, ...SHADOW_DROP_DEFAULT, boxShadow: '0 -12px 20px -12px rgba(0, 0, 0, 0.35), 0 12px 20px -12px rgba(0, 0, 0, 0.35)' } 41 | ]; 42 | 43 | const SHADOW_DROP_TR: Keyframe[] = [ 44 | { offset: 0, ...SHADOW_DROP_DEFAULT, boxShadow: '0 0 0 0 rgba(0, 0, 0, 0)' }, 45 | { offset: 1, ...SHADOW_DROP_DEFAULT, boxShadow: '12px -12px 20px -12px rgba(0, 0, 0, 0.35)' } 46 | ]; 47 | 48 | const SHADOW_DROP_BR: Keyframe[] = [ 49 | { offset: 0, ...SHADOW_DROP_DEFAULT, boxShadow: '0 0 0 0 rgba(0, 0, 0, 0)' }, 50 | { offset: 1, ...SHADOW_DROP_DEFAULT, boxShadow: '12px 12px 20px -12px rgba(0, 0, 0, 0.35)' } 51 | ]; 52 | 53 | const SHADOW_DROP_BL: Keyframe[] = [ 54 | { offset: 0, ...SHADOW_DROP_DEFAULT, boxShadow: '0 0 0 0 rgba(0, 0, 0, 0)' }, 55 | { offset: 1, ...SHADOW_DROP_DEFAULT, boxShadow: '-12px 12px 20px -12px rgba(0, 0, 0, 0.35)' } 56 | ]; 57 | 58 | const SHADOW_DROP_TL: Keyframe[] = [ 59 | { offset: 0, ...SHADOW_DROP_DEFAULT, boxShadow: '0 0 0 0 rgba(0, 0, 0, 0)' }, 60 | { offset: 1, ...SHADOW_DROP_DEFAULT, boxShadow: '-12px -12px 20px -12px rgba(0, 0, 0, 0.35)' } 61 | ]; 62 | 63 | export default { 64 | [ANIMATIONS.SHADOW_DROP_CENTER]: SHADOW_DROP_CENTER, 65 | [ANIMATIONS.SHADOW_DROP_TOP]: SHADOW_DROP_TOP, 66 | [ANIMATIONS.SHADOW_DROP_RIGHT]: SHADOW_DROP_RIGHT, 67 | [ANIMATIONS.SHADOW_DROP_BOTTOM]: SHADOW_DROP_BOTTOM, 68 | [ANIMATIONS.SHADOW_DROP_LEFT]: SHADOW_DROP_LEFT, 69 | [ANIMATIONS.SHADOW_DROP_LR]: SHADOW_DROP_LR, 70 | [ANIMATIONS.SHADOW_DROP_TB]: SHADOW_DROP_TB, 71 | [ANIMATIONS.SHADOW_DROP_TR]: SHADOW_DROP_TR, 72 | [ANIMATIONS.SHADOW_DROP_BR]: SHADOW_DROP_BR, 73 | [ANIMATIONS.SHADOW_DROP_BL]: SHADOW_DROP_BL, 74 | [ANIMATIONS.SHADOW_DROP_TL]: SHADOW_DROP_TL 75 | }; 76 | -------------------------------------------------------------------------------- /src/animations/animista/shadow-inset.ts: -------------------------------------------------------------------------------- 1 | import { ANIMATIONS } from './common'; 2 | 3 | const SHADOW_INSET_DEFAULT: Keyframe = { 4 | easing: 'cubic-bezier(0.250, 0.460, 0.450, 0.940)', 5 | fillMode: 'both' 6 | }; 7 | 8 | const SHADOW_INSET_CENTER: Keyframe[] = [ 9 | { 10 | offset: 0, 11 | ...SHADOW_INSET_DEFAULT, 12 | boxShadow: 'inset 0 0 0 0 rgba(0, 0, 0, 0)' 13 | }, 14 | { 15 | offset: 1, 16 | ...SHADOW_INSET_DEFAULT, 17 | boxShadow: 'inset 0 0 14px 0px rgba(0, 0, 0, 0.5)' 18 | } 19 | ]; 20 | 21 | const SHADOW_INSET_TOP: Keyframe[] = [ 22 | { 23 | offset: 0, 24 | ...SHADOW_INSET_DEFAULT, 25 | boxShadow: 'inset 0 0 0 0 rgba(0, 0, 0, 0)' 26 | }, 27 | { 28 | offset: 1, 29 | ...SHADOW_INSET_DEFAULT, 30 | boxShadow: 'inset 0 6px 14px -6px rgba(0, 0, 0, 0.5)' 31 | } 32 | ]; 33 | 34 | const SHADOW_INSET_RIGHT: Keyframe[] = [ 35 | { 36 | offset: 0, 37 | ...SHADOW_INSET_DEFAULT, 38 | boxShadow: 'inset 0 0 0 0 rgba(0, 0, 0, 0)' 39 | }, 40 | { 41 | offset: 1, 42 | ...SHADOW_INSET_DEFAULT, 43 | boxShadow: 'inset -6px 0 14px -6px rgba(0, 0, 0, 0.5)' 44 | } 45 | ]; 46 | 47 | const SHADOW_INSET_BOTTOM: Keyframe[] = [ 48 | { 49 | offset: 0, 50 | ...SHADOW_INSET_DEFAULT, 51 | boxShadow: 'inset 0 0 0 0 rgba(0, 0, 0, 0)' 52 | }, 53 | { 54 | offset: 1, 55 | ...SHADOW_INSET_DEFAULT, 56 | boxShadow: 'inset 0 -6px 14px -6px rgba(0, 0, 0, 0.5)' 57 | } 58 | ]; 59 | 60 | const SHADOW_INSET_LEFT: Keyframe[] = [ 61 | { 62 | offset: 0, 63 | ...SHADOW_INSET_DEFAULT, 64 | boxShadow: 'inset 0 0 0 0 rgba(0, 0, 0, 0)' 65 | }, 66 | { 67 | offset: 1, 68 | ...SHADOW_INSET_DEFAULT, 69 | boxShadow: 'inset 6px 0 14px -6px rgba(0, 0, 0, 0.5)' 70 | } 71 | ]; 72 | 73 | const SHADOW_INSET_LR: Keyframe[] = [ 74 | { 75 | offset: 0, 76 | ...SHADOW_INSET_DEFAULT, 77 | boxShadow: 'inset 0 0 0 0 rgba(0, 0, 0, 0), inset 0 0 0 0 rgba(0, 0, 0, 0)' 78 | }, 79 | { 80 | offset: 1, 81 | ...SHADOW_INSET_DEFAULT, 82 | boxShadow: 'inset -6px 0 14px -6px rgba(0, 0, 0, 0.5), inset 6px 0 14px -6px rgba(0, 0, 0, 0.5)' 83 | } 84 | ]; 85 | 86 | const SHADOW_INSET_TB: Keyframe[] = [ 87 | { 88 | offset: 0, 89 | ...SHADOW_INSET_DEFAULT, 90 | boxShadow: 'inset 0 0 0 0 rgba(0, 0, 0, 0), inset 0 0 0 0 rgba(0, 0, 0, 0)' 91 | }, 92 | { 93 | offset: 1, 94 | ...SHADOW_INSET_DEFAULT, 95 | boxShadow: 'inset 0 -6px 14px -6px rgba(0, 0, 0, 0.5), inset 0 6px 14px -6px rgba(0, 0, 0, 0.5)' 96 | } 97 | ]; 98 | 99 | const SHADOW_INSET_TR: Keyframe[] = [ 100 | { 101 | offset: 0, 102 | ...SHADOW_INSET_DEFAULT, 103 | boxShadow: 'inset 0 0 0 0 rgba(0, 0, 0, 0)' 104 | }, 105 | { 106 | offset: 1, 107 | ...SHADOW_INSET_DEFAULT, 108 | boxShadow: 'inset -6px 6px 14px -6px rgba(0, 0, 0, 0.5)' 109 | } 110 | ]; 111 | 112 | const SHADOW_INSET_BR: Keyframe[] = [ 113 | { 114 | offset: 0, 115 | ...SHADOW_INSET_DEFAULT, 116 | boxShadow: 'inset 0 0 0 0 rgba(0, 0, 0, 0)' 117 | }, 118 | { 119 | offset: 1, 120 | ...SHADOW_INSET_DEFAULT, 121 | boxShadow: 'inset -6px -6px 14px -6px rgba(0, 0, 0, 0.5)' 122 | } 123 | ]; 124 | 125 | const SHADOW_INSET_BL: Keyframe[] = [ 126 | { 127 | offset: 0, 128 | ...SHADOW_INSET_DEFAULT, 129 | boxShadow: 'inset 0 0 0 0 rgba(0, 0, 0, 0)' 130 | }, 131 | { 132 | offset: 1, 133 | ...SHADOW_INSET_DEFAULT, 134 | boxShadow: 'inset 6px -6px 14px -6px rgba(0, 0, 0, 0.5)' 135 | } 136 | ]; 137 | 138 | const SHADOW_INSET_TL: Keyframe[] = [ 139 | { 140 | offset: 0, 141 | ...SHADOW_INSET_DEFAULT, 142 | boxShadow: 'inset 0 0 0 0 rgba(0, 0, 0, 0)' 143 | }, 144 | { 145 | offset: 1, 146 | ...SHADOW_INSET_DEFAULT, 147 | boxShadow: 'inset 6px 6px 14px -6px rgba(0, 0, 0, 0.5)' 148 | } 149 | ]; 150 | 151 | export default { 152 | [ANIMATIONS.SHADOW_INSET_CENTER]: SHADOW_INSET_CENTER, 153 | [ANIMATIONS.SHADOW_INSET_TOP]: SHADOW_INSET_TOP, 154 | [ANIMATIONS.SHADOW_INSET_RIGHT]: SHADOW_INSET_RIGHT, 155 | [ANIMATIONS.SHADOW_INSET_BOTTOM]: SHADOW_INSET_BOTTOM, 156 | [ANIMATIONS.SHADOW_INSET_LEFT]: SHADOW_INSET_LEFT, 157 | [ANIMATIONS.SHADOW_INSET_LR]: SHADOW_INSET_LR, 158 | [ANIMATIONS.SHADOW_INSET_TB]: SHADOW_INSET_TB, 159 | [ANIMATIONS.SHADOW_INSET_TR]: SHADOW_INSET_TR, 160 | [ANIMATIONS.SHADOW_INSET_BR]: SHADOW_INSET_BR, 161 | [ANIMATIONS.SHADOW_INSET_BL]: SHADOW_INSET_BL, 162 | [ANIMATIONS.SHADOW_INSET_TL]: SHADOW_INSET_TL 163 | }; 164 | -------------------------------------------------------------------------------- /src/animations/animista/shadow-pop.ts: -------------------------------------------------------------------------------- 1 | import { ANIMATIONS } from './common'; 2 | 3 | const SHADOW_POP_DEFAULT: Keyframe = { 4 | easing: 'cubic-bezier(0.470, 0.000, 0.745, 0.715)', 5 | fillMode: 'both' 6 | }; 7 | 8 | const SHADOW_POP_TR: Keyframe[] = [ 9 | { 10 | offset: 0, 11 | ...SHADOW_POP_DEFAULT, 12 | boxShadow: '0 0 #3e3e3e, 0 0 #3e3e3e, 0 0 #3e3e3e, 0 0 #3e3e3e, 0 0 #3e3e3e, 0 0 #3e3e3e, 0 0 #3e3e3e, 0 0 #3e3e3e', 13 | transform: 'translateX(0) translateY(0)' 14 | }, 15 | { 16 | offset: 1, 17 | ...SHADOW_POP_DEFAULT, 18 | boxShadow: '1px -1px #3e3e3e, 2px -2px #3e3e3e, 3px -3px #3e3e3e, 4px -4px #3e3e3e, 5px -5px #3e3e3e, 6px -6px #3e3e3e, 7px -7px #3e3e3e, 8px -8px #3e3e3e', 19 | transform: 'translateX(-8px) translateY(8px)' 20 | } 21 | ]; 22 | 23 | const SHADOW_POP_BR: Keyframe[] = [ 24 | { 25 | offset: 0, 26 | ...SHADOW_POP_DEFAULT, 27 | boxShadow: '0 0 #3e3e3e, 0 0 #3e3e3e, 0 0 #3e3e3e, 0 0 #3e3e3e, 0 0 #3e3e3e, 0 0 #3e3e3e, 0 0 #3e3e3e, 0 0 #3e3e3e', 28 | transform: 'translateX(0) translateY(0)' 29 | }, 30 | { 31 | offset: 1, 32 | ...SHADOW_POP_DEFAULT, 33 | boxShadow: '1px 1px #3e3e3e, 2px 2px #3e3e3e, 3px 3px #3e3e3e, 4px 4px #3e3e3e, 5px 5px #3e3e3e, 6px 6px #3e3e3e, 7px 7px #3e3e3e, 8px 8px #3e3e3e', 34 | transform: 'translateX(-8px) translateY(-8px)' 35 | } 36 | ]; 37 | 38 | const SHADOW_POP_BL: Keyframe[] = [ 39 | { 40 | offset: 0, 41 | ...SHADOW_POP_DEFAULT, 42 | boxShadow: '0 0 #3e3e3e, 0 0 #3e3e3e, 0 0 #3e3e3e, 0 0 #3e3e3e, 0 0 #3e3e3e, 0 0 #3e3e3e, 0 0 #3e3e3e, 0 0 #3e3e3e', 43 | transform: 'translateX(0) translateY(0)' 44 | }, 45 | { 46 | offset: 1, 47 | ...SHADOW_POP_DEFAULT, 48 | boxShadow: '-1px 1px #3e3e3e, -2px 2px #3e3e3e, -3px 3px #3e3e3e, -4px 4px #3e3e3e, -5px 5px #3e3e3e, -6px 6px #3e3e3e, -7px 7px #3e3e3e, -8px 8px #3e3e3e', 49 | transform: 'translateX(8px) translateY(-8px)' 50 | } 51 | ]; 52 | 53 | const SHADOW_POP_TL: Keyframe[] = [ 54 | { 55 | offset: 0, 56 | ...SHADOW_POP_DEFAULT, 57 | boxShadow: '0 0 #3e3e3e, 0 0 #3e3e3e, 0 0 #3e3e3e, 0 0 #3e3e3e, 0 0 #3e3e3e, 0 0 #3e3e3e, 0 0 #3e3e3e, 0 0 #3e3e3e', 58 | transform: 'translateX(0) translateY(0)' 59 | }, 60 | { 61 | offset: 1, 62 | ...SHADOW_POP_DEFAULT, 63 | boxShadow: '-1px -1px #3e3e3e, -2px -2px #3e3e3e, -3px -3px #3e3e3e, -4px -4px #3e3e3e, -5px -5px #3e3e3e, -6px -6px #3e3e3e, -7px -7px #3e3e3e, -8px -8px #3e3e3e', 64 | transform: 'translateX(8px) translateY(8px)' 65 | } 66 | ]; 67 | 68 | export default { 69 | [ANIMATIONS.SHADOW_POP_TR]: SHADOW_POP_TR, 70 | [ANIMATIONS.SHADOW_POP_BR]: SHADOW_POP_BR, 71 | [ANIMATIONS.SHADOW_POP_BL]: SHADOW_POP_BL, 72 | [ANIMATIONS.SHADOW_POP_TL]: SHADOW_POP_TL 73 | }; 74 | -------------------------------------------------------------------------------- /src/animations/animista/slide-bck.ts: -------------------------------------------------------------------------------- 1 | import { ANIMATIONS } from './common'; 2 | 3 | const SLIDE_BCK_DEFAULT: Keyframe = { 4 | easing: 'cubic-bezier(0.470, 0.000, 0.745, 0.715)', 5 | fillMode: 'both' 6 | }; 7 | 8 | const SLIDE_BCK_CENTER: Keyframe[] = [ 9 | { offset: 0, ...SLIDE_BCK_DEFAULT, transform: 'translateZ(0)' }, 10 | { offset: 1, ...SLIDE_BCK_DEFAULT, transform: 'translateZ(-400px)' } 11 | ]; 12 | 13 | const SLIDE_BCK_TOP: Keyframe[] = [ 14 | { offset: 0, ...SLIDE_BCK_DEFAULT, transform: 'translateZ(0) translateY(0)' }, 15 | { offset: 1, ...SLIDE_BCK_DEFAULT, transform: 'translateZ(-400px) translateY(-200px)' } 16 | ]; 17 | 18 | const SLIDE_BCK_TR: Keyframe[] = [ 19 | { offset: 0, ...SLIDE_BCK_DEFAULT, transform: 'translateZ(0) translateY(0) translateX(0)' }, 20 | { offset: 1, ...SLIDE_BCK_DEFAULT, transform: 'translateZ(-400px) translateY(-200px) translateX(200px)' } 21 | ]; 22 | 23 | const SLIDE_BCK_RIGHT: Keyframe[] = [ 24 | { offset: 0, ...SLIDE_BCK_DEFAULT, transform: 'translateZ(0) translateX(0)' }, 25 | { offset: 1, ...SLIDE_BCK_DEFAULT, transform: 'translateZ(-400px) translateX(200px)' } 26 | ]; 27 | 28 | const SLIDE_BCK_BR: Keyframe[] = [ 29 | { offset: 0, ...SLIDE_BCK_DEFAULT, transform: 'translateZ(0) translateY(0) translateX(0)' }, 30 | { offset: 1, ...SLIDE_BCK_DEFAULT, transform: 'translateZ(-400px) translateY(200px) translateX(200px)' } 31 | ]; 32 | 33 | const SLIDE_BCK_BOTTOM: Keyframe[] = [ 34 | { offset: 0, ...SLIDE_BCK_DEFAULT, transform: 'translateZ(0) translateY(0)' }, 35 | { offset: 1, ...SLIDE_BCK_DEFAULT, transform: 'translateZ(-400px) translateY(200px)' } 36 | ]; 37 | 38 | const SLIDE_BCK_BL: Keyframe[] = [ 39 | { offset: 0, ...SLIDE_BCK_DEFAULT, transform: 'translateZ(0) translateY(0) translateX(0)' }, 40 | { offset: 1, ...SLIDE_BCK_DEFAULT, transform: 'translateZ(-400px) translateY(200px) translateX(-200px)' } 41 | ]; 42 | 43 | const SLIDE_BCK_LEFT: Keyframe[] = [ 44 | { offset: 0, ...SLIDE_BCK_DEFAULT, transform: 'translateZ(0) translateX(0)' }, 45 | { offset: 1, ...SLIDE_BCK_DEFAULT, transform: 'translateZ(-400px) translateX(-200px)' } 46 | ]; 47 | 48 | const SLIDE_BCK_TL: Keyframe[] = [ 49 | { offset: 0, ...SLIDE_BCK_DEFAULT, transform: 'translateZ(0) translateY(0) translateX(0)' }, 50 | { offset: 1, ...SLIDE_BCK_DEFAULT, transform: 'translateZ(-400px) translateY(-200px) translateX(-200px)' } 51 | ]; 52 | 53 | export default { 54 | [ANIMATIONS.SLIDE_BCK_CENTER]: SLIDE_BCK_CENTER, 55 | [ANIMATIONS.SLIDE_BCK_TOP]: SLIDE_BCK_TOP, 56 | [ANIMATIONS.SLIDE_BCK_TR]: SLIDE_BCK_TR, 57 | [ANIMATIONS.SLIDE_BCK_RIGHT]: SLIDE_BCK_RIGHT, 58 | [ANIMATIONS.SLIDE_BCK_BR]: SLIDE_BCK_BR, 59 | [ANIMATIONS.SLIDE_BCK_BOTTOM]: SLIDE_BCK_BOTTOM, 60 | [ANIMATIONS.SLIDE_BCK_BL]: SLIDE_BCK_BL, 61 | [ANIMATIONS.SLIDE_BCK_LEFT]: SLIDE_BCK_LEFT, 62 | [ANIMATIONS.SLIDE_BCK_TL]: SLIDE_BCK_TL 63 | }; 64 | -------------------------------------------------------------------------------- /src/animations/animista/slide-fwd.ts: -------------------------------------------------------------------------------- 1 | import { ANIMATIONS } from './common'; 2 | 3 | const SLIDE_FWD_DEFAULT: Keyframe = { 4 | easing: 'cubic-bezier(0.250, 0.460, 0.450, 0.940)', 5 | fillMode: 'both' 6 | }; 7 | 8 | const SLIDE_FWD_CENTER: Keyframe[] = [ 9 | { offset: 0, ...SLIDE_FWD_DEFAULT, transform: 'translateZ(0)' }, 10 | { offset: 1, ...SLIDE_FWD_DEFAULT, transform: 'translateZ(160px)' } 11 | ]; 12 | 13 | const SLIDE_FWD_TOP: Keyframe[] = [ 14 | { offset: 0, ...SLIDE_FWD_DEFAULT, transform: 'translateZ(0) translateY(0)' }, 15 | { offset: 1, ...SLIDE_FWD_DEFAULT, transform: 'translateZ(160px) translateY(-100px)' } 16 | ]; 17 | 18 | const SLIDE_FWD_TR: Keyframe[] = [ 19 | { offset: 0, ...SLIDE_FWD_DEFAULT, transform: 'translateZ(0) translateY(0) translateX(0)' }, 20 | { offset: 1, ...SLIDE_FWD_DEFAULT, transform: 'translateZ(160px) translateY(-100px) translateX(100px)' } 21 | ]; 22 | 23 | const SLIDE_FWD_RIGHT: Keyframe[] = [ 24 | { offset: 0, ...SLIDE_FWD_DEFAULT, transform: 'translateZ(0) translateX(0)' }, 25 | { offset: 1, ...SLIDE_FWD_DEFAULT, transform: 'translateZ(160px) translateX(100px)' } 26 | ]; 27 | 28 | const SLIDE_FWD_BR: Keyframe[] = [ 29 | { offset: 0, ...SLIDE_FWD_DEFAULT, transform: 'translateZ(0) translateY(0) translateX(0)' }, 30 | { offset: 1, ...SLIDE_FWD_DEFAULT, transform: 'translateZ(160px) translateY(100px) translateX(100px)' } 31 | ]; 32 | 33 | const SLIDE_FWD_BOTTOM: Keyframe[] = [ 34 | { offset: 0, ...SLIDE_FWD_DEFAULT, transform: 'translateZ(0) translateY(0)' }, 35 | { offset: 1, ...SLIDE_FWD_DEFAULT, transform: 'translateZ(160px) translateY(100px)' } 36 | ]; 37 | 38 | const SLIDE_FWD_BL: Keyframe[] = [ 39 | { offset: 0, ...SLIDE_FWD_DEFAULT, transform: 'translateZ(0) translateY(0) translateX(0)' }, 40 | { offset: 1, ...SLIDE_FWD_DEFAULT, transform: 'translateZ(160px) translateY(100px) translateX(-100px)' } 41 | ]; 42 | 43 | const SLIDE_FWD_LEFT: Keyframe[] = [ 44 | { offset: 0, ...SLIDE_FWD_DEFAULT, transform: 'translateZ(0) translateX(0)' }, 45 | { offset: 1, ...SLIDE_FWD_DEFAULT, transform: 'translateZ(160px) translateX(-100px)' } 46 | ]; 47 | 48 | const SLIDE_FWD_TL: Keyframe[] = [ 49 | { offset: 0, ...SLIDE_FWD_DEFAULT, transform: 'translateZ(0) translateY(0) translateX(0)' }, 50 | { offset: 1, ...SLIDE_FWD_DEFAULT, transform: 'translateZ(160px) translateY(-100px) translateX(-100px)' } 51 | ]; 52 | 53 | export default { 54 | [ANIMATIONS.SLIDE_FWD_CENTER]: SLIDE_FWD_CENTER, 55 | [ANIMATIONS.SLIDE_FWD_TOP]: SLIDE_FWD_TOP, 56 | [ANIMATIONS.SLIDE_FWD_TR]: SLIDE_FWD_TR, 57 | [ANIMATIONS.SLIDE_FWD_RIGHT]: SLIDE_FWD_RIGHT, 58 | [ANIMATIONS.SLIDE_FWD_BR]: SLIDE_FWD_BR, 59 | [ANIMATIONS.SLIDE_FWD_BOTTOM]: SLIDE_FWD_BOTTOM, 60 | [ANIMATIONS.SLIDE_FWD_BL]: SLIDE_FWD_BL, 61 | [ANIMATIONS.SLIDE_FWD_LEFT]: SLIDE_FWD_LEFT, 62 | [ANIMATIONS.SLIDE_FWD_TL]: SLIDE_FWD_TL 63 | }; 64 | -------------------------------------------------------------------------------- /src/animations/animista/slide-in-bck.ts: -------------------------------------------------------------------------------- 1 | import { ANIMATIONS } from './common'; 2 | 3 | const SLIDE_IN_BCK_DEFAULT: Keyframe = { 4 | easing: 'cubic-bezier(0.250, 0.460, 0.450, 0.940)', 5 | fillMode: 'both', 6 | }; 7 | 8 | const SLIDE_IN_BCK_CENTER: Keyframe[] = [ 9 | { offset: 0, ...SLIDE_IN_BCK_DEFAULT, transform: 'translateZ(600px)', opacity: 0 }, 10 | { offset: 1, ...SLIDE_IN_BCK_DEFAULT, transform: 'translateZ(0)', opacity: 1 } 11 | ]; 12 | 13 | const SLIDE_IN_BCK_TOP: Keyframe[] = [ 14 | { offset: 0, ...SLIDE_IN_BCK_DEFAULT, transform: 'translateZ(700px) translateY(-300px)', opacity: 0 }, 15 | { offset: 1, ...SLIDE_IN_BCK_DEFAULT, transform: 'translateZ(0) translateY(0)', opacity: 1 } 16 | ]; 17 | 18 | const SLIDE_IN_BCK_TR: Keyframe[] = [ 19 | { offset: 0, ...SLIDE_IN_BCK_DEFAULT, transform: 'translateZ(700px) translateY(-300px) translateX(400px)', opacity: 0 }, 20 | { offset: 1, ...SLIDE_IN_BCK_DEFAULT, transform: 'translateZ(0) translateY(0) translateX(0)', opacity: 1 } 21 | ]; 22 | 23 | const SLIDE_IN_BCK_RIGHT: Keyframe[] = [ 24 | { offset: 0, ...SLIDE_IN_BCK_DEFAULT, transform: 'translateZ(700px) translateX(400px)', opacity: 0 }, 25 | { offset: 1, ...SLIDE_IN_BCK_DEFAULT, transform: 'translateZ(0) translateX(0)', opacity: 1 } 26 | ]; 27 | 28 | const SLIDE_IN_BCK_BR: Keyframe[] = [ 29 | { offset: 0, ...SLIDE_IN_BCK_DEFAULT, transform: 'translateZ(700px) translateY(300px) translateX(400px)', opacity: 0 }, 30 | { offset: 1, ...SLIDE_IN_BCK_DEFAULT, transform: 'translateZ(0) translateY(0) translateX(0)', opacity: 1 } 31 | ]; 32 | 33 | const SLIDE_IN_BCK_BOTTOM: Keyframe[] = [ 34 | { offset: 0, ...SLIDE_IN_BCK_DEFAULT, transform: 'translateZ(700px) translateY(300px)', opacity: 0 }, 35 | { offset: 1, ...SLIDE_IN_BCK_DEFAULT, transform: 'translateZ(0) translateY(0)', opacity: 1 } 36 | ]; 37 | 38 | const SLIDE_IN_BCK_BL: Keyframe[] = [ 39 | { offset: 0, ...SLIDE_IN_BCK_DEFAULT, transform: 'translateZ(700px) translateY(300px) translateX(-400px)', opacity: 0 }, 40 | { offset: 1, ...SLIDE_IN_BCK_DEFAULT, transform: 'translateZ(0) translateY(0) translateX(0)', opacity: 1 } 41 | ]; 42 | 43 | const SLIDE_IN_BCK_LEFT: Keyframe[] = [ 44 | { offset: 0, ...SLIDE_IN_BCK_DEFAULT, transform: 'translateZ(700px) translateX(-400px)', opacity: 0 }, 45 | { offset: 1, ...SLIDE_IN_BCK_DEFAULT, transform: 'translateZ(0) translateX(0)', opacity: 1 } 46 | ]; 47 | 48 | const SLIDE_IN_BCK_TL: Keyframe[] = [ 49 | { offset: 0, ...SLIDE_IN_BCK_DEFAULT, transform: 'translateZ(700px) translateY(-300px) translateX(-400px)', opacity: 0 }, 50 | { offset: 1, ...SLIDE_IN_BCK_DEFAULT, transform: 'translateZ(0) translateY(0) translateX(0)', opacity: 1 } 51 | ]; 52 | 53 | export default { 54 | [ANIMATIONS.SLIDE_IN_BCK_CENTER]: SLIDE_IN_BCK_CENTER, 55 | [ANIMATIONS.SLIDE_IN_BCK_TOP]: SLIDE_IN_BCK_TOP, 56 | [ANIMATIONS.SLIDE_IN_BCK_TR]: SLIDE_IN_BCK_TR, 57 | [ANIMATIONS.SLIDE_IN_BCK_RIGHT]: SLIDE_IN_BCK_RIGHT, 58 | [ANIMATIONS.SLIDE_IN_BCK_BR]: SLIDE_IN_BCK_BR, 59 | [ANIMATIONS.SLIDE_IN_BCK_BOTTOM]: SLIDE_IN_BCK_BOTTOM, 60 | [ANIMATIONS.SLIDE_IN_BCK_BL]: SLIDE_IN_BCK_BL, 61 | [ANIMATIONS.SLIDE_IN_BCK_LEFT]: SLIDE_IN_BCK_LEFT, 62 | [ANIMATIONS.SLIDE_IN_BCK_TL]: SLIDE_IN_BCK_TL 63 | }; 64 | -------------------------------------------------------------------------------- /src/animations/animista/slide-in-elliptic.ts: -------------------------------------------------------------------------------- 1 | import { ANIMATIONS } from './common'; 2 | 3 | const SLIDE_IN_ELLIPTIC_DEFAULT: Keyframe = { 4 | easing: 'cubic-bezier(0.250, 0.460, 0.450, 0.940)', 5 | fillMode: 'both', 6 | }; 7 | 8 | const SLIDE_IN_ELLIPTIC_TOP_FWD: Keyframe[] = [ 9 | { 10 | offset: 0, 11 | ...SLIDE_IN_ELLIPTIC_DEFAULT, 12 | transform: 'translateY(-600px) rotateX(-30deg) scale(0)', 13 | transformOrigin: '50% 100%', 14 | opacity: 0 15 | }, 16 | { 17 | offset: 1, 18 | ...SLIDE_IN_ELLIPTIC_DEFAULT, 19 | transform: 'translateY(0) rotateX(0) scale(1)', 20 | transformOrigin: '50% 100vh', 21 | opacity: 1 22 | } 23 | ]; 24 | 25 | const SLIDE_IN_ELLIPTIC_TOP_BCK: Keyframe[] = [ 26 | { 27 | offset: 0, 28 | ...SLIDE_IN_ELLIPTIC_DEFAULT, 29 | transform: 'translateY(-600px) rotateX(30deg) scale(6.5)', 30 | transformOrigin: '50% 200%', 31 | opacity: 0 32 | }, 33 | { 34 | offset: 1, 35 | ...SLIDE_IN_ELLIPTIC_DEFAULT, 36 | transform: 'translateY(0) rotateX(0) scale(1)', 37 | transformOrigin: '50% -500px', 38 | opacity: 1 39 | } 40 | ]; 41 | 42 | const SLIDE_IN_ELLIPTIC_RIGHT_FWD: Keyframe[] = [ 43 | { 44 | offset: 0, 45 | ...SLIDE_IN_ELLIPTIC_DEFAULT, 46 | transform: 'translateX(800px) rotateY(-30deg) scale(0)', 47 | transformOrigin: '100% 50%', 48 | opacity: 0 49 | }, 50 | { 51 | offset: 1, 52 | ...SLIDE_IN_ELLIPTIC_DEFAULT, 53 | transform: 'translateX(0) rotateY(0) scale(1)', 54 | transformOrigin: '-100vw 50%', 55 | opacity: 1 56 | } 57 | ]; 58 | 59 | const SLIDE_IN_ELLIPTIC_RIGHT_BCK: Keyframe[] = [ 60 | { 61 | offset: 0, 62 | ...SLIDE_IN_ELLIPTIC_DEFAULT, 63 | transform: 'translateX(800px) rotateY(30deg) scale(6.5)', 64 | transformOrigin: '-100% 50%', 65 | opacity: 0 66 | }, 67 | { 68 | offset: 1, 69 | ...SLIDE_IN_ELLIPTIC_DEFAULT, 70 | transform: 'translateX(0) rotateY(0) scale(1)', 71 | transformOrigin: '600px 50%', 72 | opacity: 1 73 | } 74 | ]; 75 | 76 | const SLIDE_IN_ELLIPTIC_BOTTOM_FWD: Keyframe[] = [ 77 | { 78 | offset: 0, 79 | ...SLIDE_IN_ELLIPTIC_DEFAULT, 80 | transform: 'translateY(600px) rotateX(30deg) scale(0)', 81 | transformOrigin: '50% 100%', 82 | opacity: 0 83 | }, 84 | { 85 | offset: 1, 86 | ...SLIDE_IN_ELLIPTIC_DEFAULT, 87 | transform: 'translateY(0) rotateX(0) scale(1)', 88 | transformOrigin: '50% -100vh', 89 | opacity: 1 90 | } 91 | ]; 92 | 93 | const SLIDE_IN_ELLIPTIC_BOTTOM_BCK: Keyframe[] = [ 94 | { 95 | offset: 0, 96 | ...SLIDE_IN_ELLIPTIC_DEFAULT, 97 | transform: 'translateY(600px) rotateX(-30deg) scale(6.5)', 98 | transformOrigin: '50% -100%', 99 | opacity: 0 100 | }, 101 | { 102 | offset: 1, 103 | ...SLIDE_IN_ELLIPTIC_DEFAULT, 104 | transform: 'translateY(0) rotateX(0) scale(1)', 105 | transformOrigin: '50% 500px', 106 | opacity: 1 107 | } 108 | ]; 109 | 110 | const SLIDE_IN_ELLIPTIC_LEFT_FWD: Keyframe[] = [ 111 | { 112 | offset: 0, 113 | ...SLIDE_IN_ELLIPTIC_DEFAULT, 114 | transform: 'translateX(-800px) rotateY(30deg) scale(0)', 115 | transformOrigin: '-100% 50%', 116 | opacity: 0 117 | }, 118 | { 119 | offset: 1, 120 | ...SLIDE_IN_ELLIPTIC_DEFAULT, 121 | transform: 'translateX(0) rotateY(0) scale(1)', 122 | transformOrigin: '100vw 50%', 123 | opacity: 1 124 | } 125 | ]; 126 | 127 | const SLIDE_IN_ELLIPTIC_LEFT_BCK: Keyframe[] = [ 128 | { 129 | offset: 0, 130 | ...SLIDE_IN_ELLIPTIC_DEFAULT, 131 | transform: 'translateX(-800px) rotateY(-30deg) scale(6.5)', 132 | transformOrigin: '200% 50%', 133 | opacity: 0 134 | }, 135 | { 136 | offset: 1, 137 | ...SLIDE_IN_ELLIPTIC_DEFAULT, 138 | transform: 'translateX(0) rotateY(0) scale(1)', 139 | transformOrigin: '-600px 50%', 140 | opacity: 1 141 | } 142 | ]; 143 | 144 | export default { 145 | [ANIMATIONS.SLIDE_IN_ELLIPTIC_TOP_FWD]: SLIDE_IN_ELLIPTIC_TOP_FWD, 146 | [ANIMATIONS.SLIDE_IN_ELLIPTIC_TOP_BCK]: SLIDE_IN_ELLIPTIC_TOP_BCK, 147 | [ANIMATIONS.SLIDE_IN_ELLIPTIC_RIGHT_FWD]: SLIDE_IN_ELLIPTIC_RIGHT_FWD, 148 | [ANIMATIONS.SLIDE_IN_ELLIPTIC_RIGHT_BCK]: SLIDE_IN_ELLIPTIC_RIGHT_BCK, 149 | [ANIMATIONS.SLIDE_IN_ELLIPTIC_BOTTOM_FWD]: SLIDE_IN_ELLIPTIC_BOTTOM_FWD, 150 | [ANIMATIONS.SLIDE_IN_ELLIPTIC_BOTTOM_BCK]: SLIDE_IN_ELLIPTIC_BOTTOM_BCK, 151 | [ANIMATIONS.SLIDE_IN_ELLIPTIC_LEFT_FWD]: SLIDE_IN_ELLIPTIC_LEFT_FWD, 152 | [ANIMATIONS.SLIDE_IN_ELLIPTIC_LEFT_BCK]: SLIDE_IN_ELLIPTIC_LEFT_BCK 153 | }; 154 | -------------------------------------------------------------------------------- /src/animations/animista/slide-in-fwd.ts: -------------------------------------------------------------------------------- 1 | import { ANIMATIONS } from './common'; 2 | 3 | const SLIDE_IN_FWD_DEFAULT: Keyframe = { 4 | easing: 'cubic-bezier(0.250, 0.460, 0.450, 0.940)', 5 | fillMode: 'both', 6 | }; 7 | 8 | const SLIDE_IN_FWD_CENTER: Keyframe[] = [ 9 | { offset: 0, ...SLIDE_IN_FWD_DEFAULT, transform: 'translateZ(-1400px)', opacity: 0 }, 10 | { offset: 1, ...SLIDE_IN_FWD_DEFAULT, transform: 'translateZ(0)', opacity: 1 } 11 | ]; 12 | 13 | const SLIDE_IN_FWD_TOP: Keyframe[] = [ 14 | { offset: 0, ...SLIDE_IN_FWD_DEFAULT, transform: 'translateZ(-1400px) translateY(-100vh)', opacity: 0 }, 15 | { offset: 1, ...SLIDE_IN_FWD_DEFAULT, transform: 'translateZ(0) translateY(0)', opacity: 1 } 16 | ]; 17 | 18 | const SLIDE_IN_FWD_TR: Keyframe[] = [ 19 | { offset: 0, ...SLIDE_IN_FWD_DEFAULT, transform: 'translateZ(-1400px) translateY(-100vh) translateX(100vw)', opacity: 0 }, 20 | { offset: 1, ...SLIDE_IN_FWD_DEFAULT, transform: 'translateZ(0) translateY(0) translateX(0)', opacity: 1 } 21 | ]; 22 | 23 | const SLIDE_IN_FWD_RIGHT: Keyframe[] = [ 24 | { offset: 0, ...SLIDE_IN_FWD_DEFAULT, transform: 'translateZ(-1400px) translateX(100vw)', opacity: 0 }, 25 | { offset: 1, ...SLIDE_IN_FWD_DEFAULT, transform: 'translateZ(0) translateX(0)', opacity: 1 } 26 | ]; 27 | 28 | const SLIDE_IN_FWD_BR: Keyframe[] = [ 29 | { offset: 0, ...SLIDE_IN_FWD_DEFAULT, transform: 'translateZ(-1400px) translateY(100vh) translateX(100vw)', opacity: 0 }, 30 | { offset: 1, ...SLIDE_IN_FWD_DEFAULT, transform: 'translateZ(0) translateY(0) translateX(0)', opacity: 1 } 31 | ]; 32 | 33 | const SLIDE_IN_FWD_BOTTOM: Keyframe[] = [ 34 | { offset: 0, ...SLIDE_IN_FWD_DEFAULT, transform: 'translateZ(-1400px) translateY(100vh)', opacity: 0 }, 35 | { offset: 1, ...SLIDE_IN_FWD_DEFAULT, transform: 'translateZ(0) translateY(0)', opacity: 1 } 36 | ]; 37 | 38 | const SLIDE_IN_FWD_BL: Keyframe[] = [ 39 | { offset: 0, ...SLIDE_IN_FWD_DEFAULT, transform: 'translateZ(-1400px) translateY(100vh) translateX(-100vw)', opacity: 0 }, 40 | { offset: 1, ...SLIDE_IN_FWD_DEFAULT, transform: 'translateZ(0) translateY(0) translateX(0)', opacity: 1 } 41 | ]; 42 | 43 | const SLIDE_IN_FWD_LEFT: Keyframe[] = [ 44 | { offset: 0, ...SLIDE_IN_FWD_DEFAULT, transform: 'translateZ(-1400px) translateX(-100vw)', opacity: 0 }, 45 | { offset: 1, ...SLIDE_IN_FWD_DEFAULT, transform: 'translateZ(0) translateX(0)', opacity: 1 } 46 | ]; 47 | 48 | const SLIDE_IN_FWD_TL: Keyframe[] = [ 49 | { offset: 0, ...SLIDE_IN_FWD_DEFAULT, transform: 'translateZ(-1400px) translateY(-100vh) translateX(-100vw)', opacity: 0 }, 50 | { offset: 1, ...SLIDE_IN_FWD_DEFAULT, transform: 'translateZ(0) translateY(0) translateX(0)', opacity: 1 } 51 | ]; 52 | 53 | export default { 54 | [ANIMATIONS.SLIDE_IN_FWD_CENTER]: SLIDE_IN_FWD_CENTER, 55 | [ANIMATIONS.SLIDE_IN_FWD_TOP]: SLIDE_IN_FWD_TOP, 56 | [ANIMATIONS.SLIDE_IN_FWD_TR]: SLIDE_IN_FWD_TR, 57 | [ANIMATIONS.SLIDE_IN_FWD_RIGHT]: SLIDE_IN_FWD_RIGHT, 58 | [ANIMATIONS.SLIDE_IN_FWD_BR]: SLIDE_IN_FWD_BR, 59 | [ANIMATIONS.SLIDE_IN_FWD_BOTTOM]: SLIDE_IN_FWD_BOTTOM, 60 | [ANIMATIONS.SLIDE_IN_FWD_BL]: SLIDE_IN_FWD_BL, 61 | [ANIMATIONS.SLIDE_IN_FWD_LEFT]: SLIDE_IN_FWD_LEFT, 62 | [ANIMATIONS.SLIDE_IN_FWD_TL]: SLIDE_IN_FWD_TL 63 | }; 64 | -------------------------------------------------------------------------------- /src/animations/animista/slide-in.ts: -------------------------------------------------------------------------------- 1 | import { ANIMATIONS } from './common'; 2 | 3 | const SLIDE_IN_DEFAULT: Keyframe = { 4 | easing: 'cubic-bezier(0.250, 0.460, 0.450, 0.940)', 5 | fillMode: 'both', 6 | }; 7 | 8 | const SLIDE_IN_TOP: Keyframe[] = [ 9 | { offset: 0, ...SLIDE_IN_DEFAULT, transform: 'translateY(-100vh)', opacity: 0 }, 10 | { offset: 1, ...SLIDE_IN_DEFAULT, transform: 'translateY(0)', opacity: 1 } 11 | ]; 12 | 13 | const SLIDE_IN_TR: Keyframe[] = [ 14 | { offset: 0, ...SLIDE_IN_DEFAULT, transform: 'translateY(-100vh) translateX(100vw)', opacity: 0 }, 15 | { offset: 1, ...SLIDE_IN_DEFAULT, transform: 'translateY(0) translateX(0)', opacity: 1 } 16 | ]; 17 | 18 | const SLIDE_IN_RIGHT: Keyframe[] = [ 19 | { offset: 0, ...SLIDE_IN_DEFAULT, transform: 'translateX(100vw)', opacity: 0 }, 20 | { offset: 1, ...SLIDE_IN_DEFAULT, transform: 'translateX(0)', opacity: 1 } 21 | ]; 22 | 23 | const SLIDE_IN_BR: Keyframe[] = [ 24 | { offset: 0, ...SLIDE_IN_DEFAULT, transform: 'translateY(100vh) translateX(100vw)', opacity: 0 }, 25 | { offset: 1, ...SLIDE_IN_DEFAULT, transform: 'translateY(0) translateX(0)', opacity: 1 } 26 | ]; 27 | 28 | const SLIDE_IN_BOTTOM: Keyframe[] = [ 29 | { offset: 0, ...SLIDE_IN_DEFAULT, transform: 'translateY(100vh)', opacity: 0 }, 30 | { offset: 1, ...SLIDE_IN_DEFAULT, transform: 'translateY(0)', opacity: 1 } 31 | ]; 32 | 33 | const SLIDE_IN_BL: Keyframe[] = [ 34 | { offset: 0, ...SLIDE_IN_DEFAULT, transform: 'translateY(100vh) translateX(-100vw)', opacity: 0 }, 35 | { offset: 1, ...SLIDE_IN_DEFAULT, transform: 'translateY(0) translateX(0)', opacity: 1 } 36 | ]; 37 | 38 | const SLIDE_IN_LEFT: Keyframe[] = [ 39 | { offset: 0, ...SLIDE_IN_DEFAULT, transform: 'translateX(-100vw)', opacity: 0 }, 40 | { offset: 1, ...SLIDE_IN_DEFAULT, transform: 'translateX(0)', opacity: 1 } 41 | ]; 42 | 43 | const SLIDE_IN_TL: Keyframe[] = [ 44 | { offset: 0, ...SLIDE_IN_DEFAULT, transform: 'translateY(-100vh) translateX(-100vw)', opacity: 0 }, 45 | { offset: 1, ...SLIDE_IN_DEFAULT, transform: 'translateY(0) translateX(0)', opacity: 1 } 46 | ]; 47 | 48 | export default { 49 | [ANIMATIONS.SLIDE_IN_TOP]: SLIDE_IN_TOP, 50 | [ANIMATIONS.SLIDE_IN_TR]: SLIDE_IN_TR, 51 | [ANIMATIONS.SLIDE_IN_RIGHT]: SLIDE_IN_RIGHT, 52 | [ANIMATIONS.SLIDE_IN_BR]: SLIDE_IN_BR, 53 | [ANIMATIONS.SLIDE_IN_BOTTOM]: SLIDE_IN_BOTTOM, 54 | [ANIMATIONS.SLIDE_IN_BL]: SLIDE_IN_BL, 55 | [ANIMATIONS.SLIDE_IN_LEFT]: SLIDE_IN_LEFT, 56 | [ANIMATIONS.SLIDE_IN_TL]: SLIDE_IN_TL 57 | }; 58 | -------------------------------------------------------------------------------- /src/animations/animista/slide-rotate.ts: -------------------------------------------------------------------------------- 1 | import { ANIMATIONS } from './common'; 2 | 3 | const SLIDE_ROTATE_DEFAULT: Keyframe = { 4 | easing: 'cubic-bezier(0.250, 0.460, 0.450, 0.940)', 5 | fillMode: 'both' 6 | }; 7 | 8 | const SLIDE_ROTATE_HOR_TOP: Keyframe[] = [ 9 | { offset: 0, ...SLIDE_ROTATE_DEFAULT, transform: 'translateY(0) rotateX(0deg)' }, 10 | { offset: 1, ...SLIDE_ROTATE_DEFAULT, transform: 'translateY(-150px) rotateX(-90deg)' } 11 | ]; 12 | 13 | const SLIDE_ROTATE_HOR_T_BCK: Keyframe[] = [ 14 | { offset: 0, ...SLIDE_ROTATE_DEFAULT, transform: 'translateY(0) translateZ(0) rotateX(0deg)', transformOrigin: 'top center' }, 15 | { offset: 1, ...SLIDE_ROTATE_DEFAULT, transform: 'translateY(-150px) translateZ(-230px) rotateX(-90deg)', transformOrigin: 'top center' } 16 | ]; 17 | 18 | const SLIDE_ROTATE_HOR_T_FWD: Keyframe[] = [ 19 | { offset: 0, ...SLIDE_ROTATE_DEFAULT, transform: 'translateY(0) translateZ(0) rotateX(0deg)', transformOrigin: 'bottom center' }, 20 | { offset: 1, ...SLIDE_ROTATE_DEFAULT, transform: 'translateY(-150px) translateZ(130px) rotateX(-90deg)', transformOrigin: 'bottom center' } 21 | ]; 22 | 23 | const SLIDE_ROTATE_VER_RIGHT: Keyframe[] = [ 24 | { offset: 0, ...SLIDE_ROTATE_DEFAULT, transform: 'translateX(0) rotateY(0)' }, 25 | { offset: 1, ...SLIDE_ROTATE_DEFAULT, transform: 'translateX(150px) rotateY(-90deg)' } 26 | ]; 27 | 28 | const SLIDE_ROTATE_VER_R_BCK: Keyframe[] = [ 29 | { offset: 0, ...SLIDE_ROTATE_DEFAULT, transform: 'translateX(0) translateZ(0) rotateY(0)', transformOrigin: 'center right' }, 30 | { offset: 1, ...SLIDE_ROTATE_DEFAULT, transform: 'translateX(150px) translateZ(-230px) rotateY(-90deg)', transformOrigin: 'center right' } 31 | ]; 32 | 33 | const SLIDE_ROTATE_VER_R_FWD: Keyframe[] = [ 34 | { offset: 0, ...SLIDE_ROTATE_DEFAULT, transform: 'translateX(0) translateZ(0) rotateY(0)', transformOrigin: 'center left' }, 35 | { offset: 1, ...SLIDE_ROTATE_DEFAULT, transform: 'translateX(150px) translateZ(130px) rotateY(-90deg)', transformOrigin: 'center left' } 36 | ]; 37 | 38 | const SLIDE_ROTATE_HOR_BOTTOM: Keyframe[] = [ 39 | { offset: 0, ...SLIDE_ROTATE_DEFAULT, transform: 'translateY(0) rotateX(0deg)' }, 40 | { offset: 1, ...SLIDE_ROTATE_DEFAULT, transform: 'translateY(150px) rotateX(90deg)' } 41 | ]; 42 | 43 | const SLIDE_ROTATE_HOR_B_BCK: Keyframe[] = [ 44 | { offset: 0, ...SLIDE_ROTATE_DEFAULT, transform: 'translateY(0) translateZ(0) rotateX(0deg)', transformOrigin: 'bottom center' }, 45 | { offset: 1, ...SLIDE_ROTATE_DEFAULT, transform: 'translateY(150px) translateZ(-230px) rotateX(90deg)', transformOrigin: 'bottom center' } 46 | ]; 47 | 48 | const SLIDE_ROTATE_HOR_B_FWD: Keyframe[] = [ 49 | { offset: 0, ...SLIDE_ROTATE_DEFAULT, transform: 'translateY(0) translateZ(0) rotateX(0deg)', transformOrigin: 'top center' }, 50 | { offset: 1, ...SLIDE_ROTATE_DEFAULT, transform: 'translateY(150px) translateZ(130px) rotateX(90deg)', transformOrigin: 'top center' } 51 | ]; 52 | 53 | const SLIDE_ROTATE_VER_LEFT: Keyframe[] = [ 54 | { offset: 0, ...SLIDE_ROTATE_DEFAULT, transform: 'translateX(0) rotateY(0)' }, 55 | { offset: 1, ...SLIDE_ROTATE_DEFAULT, transform: 'translateX(-150px) rotateY(90deg)' } 56 | ]; 57 | 58 | const SLIDE_ROTATE_VER_L_BCK: Keyframe[] = [ 59 | { offset: 0, ...SLIDE_ROTATE_DEFAULT, transform: 'translateX(0) translateZ(0) rotateY(0)', transformOrigin: 'center left' }, 60 | { offset: 1, ...SLIDE_ROTATE_DEFAULT, transform: 'translateX(-150px) translateZ(-230px) rotateY(90deg)', transformOrigin: 'center left' } 61 | ]; 62 | 63 | const SLIDE_ROTATE_VER_L_FWD: Keyframe[] = [ 64 | { offset: 0, ...SLIDE_ROTATE_DEFAULT, transform: 'translateX(0) translateZ(0) rotateY(0)', transformOrigin: 'center right' }, 65 | { offset: 1, ...SLIDE_ROTATE_DEFAULT, transform: 'translateX(-150px) translateZ(130px) rotateY(90deg)', transformOrigin: 'center right' } 66 | ]; 67 | 68 | export default { 69 | [ANIMATIONS.SLIDE_ROTATE_HOR_TOP]: SLIDE_ROTATE_HOR_TOP, 70 | [ANIMATIONS.SLIDE_ROTATE_HOR_T_BCK]: SLIDE_ROTATE_HOR_T_BCK, 71 | [ANIMATIONS.SLIDE_ROTATE_HOR_T_FWD]: SLIDE_ROTATE_HOR_T_FWD, 72 | [ANIMATIONS.SLIDE_ROTATE_VER_RIGHT]: SLIDE_ROTATE_VER_RIGHT, 73 | [ANIMATIONS.SLIDE_ROTATE_VER_R_BCK]: SLIDE_ROTATE_VER_R_BCK, 74 | [ANIMATIONS.SLIDE_ROTATE_VER_R_FWD]: SLIDE_ROTATE_VER_R_FWD, 75 | [ANIMATIONS.SLIDE_ROTATE_HOR_BOTTOM]: SLIDE_ROTATE_HOR_BOTTOM, 76 | [ANIMATIONS.SLIDE_ROTATE_HOR_B_BCK]: SLIDE_ROTATE_HOR_B_BCK, 77 | [ANIMATIONS.SLIDE_ROTATE_HOR_B_FWD]: SLIDE_ROTATE_HOR_B_FWD, 78 | [ANIMATIONS.SLIDE_ROTATE_VER_LEFT]: SLIDE_ROTATE_VER_LEFT, 79 | [ANIMATIONS.SLIDE_ROTATE_VER_L_BCK]: SLIDE_ROTATE_VER_L_BCK, 80 | [ANIMATIONS.SLIDE_ROTATE_VER_L_FWD]: SLIDE_ROTATE_VER_L_FWD 81 | }; 82 | -------------------------------------------------------------------------------- /src/animations/animista/slide.ts: -------------------------------------------------------------------------------- 1 | import { ANIMATIONS } from './common'; 2 | 3 | const SLIDE_DEFAULT: Keyframe = { 4 | easing: 'cubic-bezier(0.250, 0.460, 0.450, 0.940)', 5 | fillMode: 'both' 6 | }; 7 | 8 | const SLIDE_TOP: Keyframe[] = [ 9 | { offset: 0, ...SLIDE_DEFAULT, transform: 'translateY(0)' }, 10 | { offset: 1, ...SLIDE_DEFAULT, transform: 'translateY(-100px)' } 11 | ]; 12 | 13 | const SLIDE_TR: Keyframe[] = [ 14 | { offset: 0, ...SLIDE_DEFAULT, transform: 'translateY(0) translateX(0)' }, 15 | { offset: 1, ...SLIDE_DEFAULT, transform: 'translateY(-100px) translateX(100px)' } 16 | ]; 17 | 18 | const SLIDE_RIGHT: Keyframe[] = [ 19 | { offset: 0, ...SLIDE_DEFAULT, transform: 'translateX(0)' }, 20 | { offset: 1, ...SLIDE_DEFAULT, transform: 'translateX(100px)' } 21 | ]; 22 | 23 | const SLIDE_BR: Keyframe[] = [ 24 | { offset: 0, ...SLIDE_DEFAULT, transform: 'translateY(0) translateX(0)' }, 25 | { offset: 1, ...SLIDE_DEFAULT, transform: 'translateY(100px) translateX(100px)' } 26 | ]; 27 | 28 | const SLIDE_BOTTOM: Keyframe[] = [ 29 | { offset: 0, ...SLIDE_DEFAULT, transform: 'translateY(0)' }, 30 | { offset: 1, ...SLIDE_DEFAULT, transform: 'translateY(100px)' } 31 | ]; 32 | 33 | const SLIDE_BL: Keyframe[] = [ 34 | { offset: 0, ...SLIDE_DEFAULT, transform: 'translateY(0) translateX(0)' }, 35 | { offset: 1, ...SLIDE_DEFAULT, transform: 'translateY(100px) translateX(-100px)' } 36 | ]; 37 | 38 | const SLIDE_LEFT: Keyframe[] = [ 39 | { offset: 0, ...SLIDE_DEFAULT, transform: 'translateX(0)' }, 40 | { offset: 1, ...SLIDE_DEFAULT, transform: 'translateX(-100px)' } 41 | ]; 42 | 43 | const SLIDE_TL: Keyframe[] = [ 44 | { offset: 0, ...SLIDE_DEFAULT, transform: 'translateY(0) translateX(0)' }, 45 | { offset: 1, ...SLIDE_DEFAULT, transform: 'translateY(-100px) translateX(-100px)' } 46 | ]; 47 | 48 | export default { 49 | [ANIMATIONS.SLIDE_TOP]: SLIDE_TOP, 50 | [ANIMATIONS.SLIDE_TR]: SLIDE_TR, 51 | [ANIMATIONS.SLIDE_RIGHT]: SLIDE_RIGHT, 52 | [ANIMATIONS.SLIDE_BR]: SLIDE_BR, 53 | [ANIMATIONS.SLIDE_BOTTOM]: SLIDE_BOTTOM, 54 | [ANIMATIONS.SLIDE_BL]: SLIDE_BL, 55 | [ANIMATIONS.SLIDE_LEFT]: SLIDE_LEFT, 56 | [ANIMATIONS.SLIDE_TL]: SLIDE_TL 57 | }; 58 | -------------------------------------------------------------------------------- /src/animations/animista/slit-in.ts: -------------------------------------------------------------------------------- 1 | import { ANIMATIONS } from './common'; 2 | 3 | const SLIT_IN_DEFAULT: Keyframe = { 4 | easing: 'ease-out', 5 | fillMode: 'both', 6 | transformOrigin: 'center center' 7 | }; 8 | 9 | const SLIT_IN_VERTICAL: Keyframe[] = [ 10 | { offset: 0, ...SLIT_IN_DEFAULT, transform: 'translateZ(-800px) rotateY(90deg)', opacity: 0 }, 11 | { offset: 0.54, ...SLIT_IN_DEFAULT, transform: 'translateZ(-160px) rotateY(87deg)', opacity: 1 }, 12 | { offset: 1, ...SLIT_IN_DEFAULT, transform: 'translateZ(0) rotateY(0)', opacity: 1 } 13 | ]; 14 | 15 | const SLIT_IN_HORIZONTAL: Keyframe[] = [ 16 | { offset: 0, ...SLIT_IN_DEFAULT, transform: 'translateZ(-800px) rotateX(90deg)', opacity: 0 }, 17 | { offset: 0.54, ...SLIT_IN_DEFAULT, transform: 'translateZ(-160px) rotateX(87deg)', opacity: 1 }, 18 | { offset: 1, ...SLIT_IN_DEFAULT, transform: 'translateZ(0) rotateX(0)', opacity: 1 } 19 | ]; 20 | 21 | const SLIT_IN_DIAGONAL_1: Keyframe[] = [ 22 | { 23 | offset: 0, 24 | ...SLIT_IN_DEFAULT, 25 | transform: 'translateZ(-800px) rotate3d(1, 1, 0, 90deg)', 26 | easing: 'ease-in', 27 | opacity: 0 28 | }, 29 | { 30 | offset: 0.54, 31 | ...SLIT_IN_DEFAULT, 32 | transform: 'translateZ(-160px) rotate3d(1, 1, 0, 87deg)', 33 | easing: 'ease-in-out', 34 | opacity: 1 35 | }, 36 | { 37 | offset: 1, 38 | ...SLIT_IN_DEFAULT, 39 | transform: 'translateZ(0) rotate3d(1, 1, 0, 0)', 40 | easing: 'ease-out', 41 | opacity: 1 42 | } 43 | ]; 44 | 45 | const SLIT_IN_DIAGONAL_2: Keyframe[] = [ 46 | { 47 | offset: 0, 48 | ...SLIT_IN_DEFAULT, 49 | transform: 'translateZ(-800px) rotate3d(-1, 1, 0, -90deg)', 50 | easing: 'ease-in', 51 | opacity: 0 52 | }, 53 | { 54 | offset: 0.54, 55 | ...SLIT_IN_DEFAULT, 56 | transform: 'translateZ(-160px) rotate3d(-1, 1, 0, -87deg)', 57 | easing: 'ease-in-out', 58 | opacity: 1 59 | }, 60 | { 61 | offset: 1, 62 | ...SLIT_IN_DEFAULT, 63 | transform: 'translateZ(0) rotate3d(-1, 1, 0, 0)', 64 | easing: 'ease-out', 65 | opacity: 1 66 | } 67 | ]; 68 | 69 | export default { 70 | [ANIMATIONS.SLIT_IN_VERTICAL]: SLIT_IN_VERTICAL, 71 | [ANIMATIONS.SLIT_IN_HORIZONTAL]: SLIT_IN_HORIZONTAL, 72 | [ANIMATIONS.SLIT_IN_DIAGONAL_1]: SLIT_IN_DIAGONAL_1, 73 | [ANIMATIONS.SLIT_IN_DIAGONAL_2]: SLIT_IN_DIAGONAL_2 74 | }; 75 | -------------------------------------------------------------------------------- /src/animations/animista/swing-in.ts: -------------------------------------------------------------------------------- 1 | import { ANIMATIONS } from './common'; 2 | 3 | const SWING_IN_DEFAULT: Keyframe = { 4 | easing: 'cubic-bezier(0.175, 0.885, 0.320, 1.275)', 5 | fillMode: 'both' 6 | }; 7 | 8 | const SWING_IN_TOP_FWD: Keyframe[] = [ 9 | { 10 | offset: 0, 11 | ...SWING_IN_DEFAULT, 12 | transform: 'rotateX(-100deg)', 13 | transformOrigin: 'top', 14 | opacity: 0 15 | }, 16 | { 17 | offset: 1, 18 | ...SWING_IN_DEFAULT, 19 | transform: 'rotateX(0deg)', 20 | transformOrigin: 'top', 21 | opacity: 1 22 | } 23 | ]; 24 | 25 | const SWING_IN_TOP_BCK: Keyframe[] = [ 26 | { 27 | offset: 0, 28 | ...SWING_IN_DEFAULT, 29 | transform: 'rotateX(70deg)', 30 | transformOrigin: 'top', 31 | opacity: 0 32 | }, 33 | { 34 | offset: 1, 35 | ...SWING_IN_DEFAULT, 36 | transform: 'rotateX(0deg)', 37 | transformOrigin: 'top', 38 | opacity: 1 39 | } 40 | ]; 41 | 42 | const SWING_IN_RIGHT_FWD: Keyframe[] = [ 43 | { 44 | offset: 0, 45 | ...SWING_IN_DEFAULT, 46 | transform: 'rotateY(-100deg)', 47 | transformOrigin: 'right', 48 | opacity: 0 49 | }, 50 | { 51 | offset: 1, 52 | ...SWING_IN_DEFAULT, 53 | transform: 'rotateY(0)', 54 | transformOrigin: 'right', 55 | opacity: 1 56 | } 57 | ]; 58 | 59 | const SWING_IN_RIGHT_BCK: Keyframe[] = [ 60 | { 61 | offset: 0, 62 | ...SWING_IN_DEFAULT, 63 | transform: 'rotateY(70deg)', 64 | transformOrigin: 'right', 65 | opacity: 0 66 | }, 67 | { 68 | offset: 1, 69 | ...SWING_IN_DEFAULT, 70 | transform: 'rotateY(0)', 71 | transformOrigin: 'right', 72 | opacity: 1 73 | } 74 | ]; 75 | 76 | const SWING_IN_BOTTOM_FWD: Keyframe[] = [ 77 | { 78 | offset: 0, 79 | ...SWING_IN_DEFAULT, 80 | transform: 'rotateX(100deg)', 81 | transformOrigin: 'bottom', 82 | opacity: 0 83 | }, 84 | { 85 | offset: 1, 86 | ...SWING_IN_DEFAULT, 87 | transform: 'rotateX(0)', 88 | transformOrigin: 'bottom', 89 | opacity: 1 90 | } 91 | ]; 92 | 93 | const SWING_IN_BOTTOM_BCK: Keyframe[] = [ 94 | { 95 | offset: 0, 96 | ...SWING_IN_DEFAULT, 97 | transform: 'rotateX(-70deg)', 98 | transformOrigin: 'bottom', 99 | opacity: 0 100 | }, 101 | { 102 | offset: 1, 103 | ...SWING_IN_DEFAULT, 104 | transform: 'rotateX(0)', 105 | transformOrigin: 'bottom', 106 | opacity: 1 107 | } 108 | ]; 109 | 110 | const SWING_IN_LEFT_FWD: Keyframe[] = [ 111 | { 112 | offset: 0, 113 | ...SWING_IN_DEFAULT, 114 | transform: 'rotateY(100deg)', 115 | transformOrigin: 'left', 116 | opacity: 0 117 | }, 118 | { 119 | offset: 1, 120 | ...SWING_IN_DEFAULT, 121 | transform: 'rotateY(0)', 122 | transformOrigin: 'left', 123 | opacity: 1 124 | } 125 | ]; 126 | 127 | const SWING_IN_LEFT_BCK: Keyframe[] = [ 128 | { 129 | offset: 0, 130 | ...SWING_IN_DEFAULT, 131 | transform: 'rotateY(-70deg)', 132 | transformOrigin: 'left', 133 | opacity: 0 134 | }, 135 | { 136 | offset: 1, 137 | ...SWING_IN_DEFAULT, 138 | transform: 'rotateY(0)', 139 | transformOrigin: 'left', 140 | opacity: 1 141 | } 142 | ]; 143 | 144 | export default { 145 | [ANIMATIONS.SWING_IN_TOP_FWD]: SWING_IN_TOP_FWD, 146 | [ANIMATIONS.SWING_IN_TOP_BCK]: SWING_IN_TOP_BCK, 147 | [ANIMATIONS.SWING_IN_RIGHT_FWD]: SWING_IN_RIGHT_FWD, 148 | [ANIMATIONS.SWING_IN_RIGHT_BCK]: SWING_IN_RIGHT_BCK, 149 | [ANIMATIONS.SWING_IN_BOTTOM_FWD]: SWING_IN_BOTTOM_FWD, 150 | [ANIMATIONS.SWING_IN_BOTTOM_BCK]: SWING_IN_BOTTOM_BCK, 151 | [ANIMATIONS.SWING_IN_LEFT_FWD]: SWING_IN_LEFT_FWD, 152 | [ANIMATIONS.SWING_IN_LEFT_BCK]: SWING_IN_LEFT_BCK 153 | }; 154 | -------------------------------------------------------------------------------- /src/animations/animista/text-shadow-drop.ts: -------------------------------------------------------------------------------- 1 | import { ANIMATIONS } from './common'; 2 | 3 | const TEXT_SHADOW_DROP_DEFAULT: Keyframe = { 4 | fillMode: 'both' 5 | }; 6 | 7 | const TEXT_SHADOW_DROP_CENTER: Keyframe[] = [ 8 | { offset: 0, ...TEXT_SHADOW_DROP_DEFAULT, textShadow: '0 0 0 rgba(0, 0, 0, 0)' }, 9 | { offset: 1, ...TEXT_SHADOW_DROP_DEFAULT, textShadow: '0 0 18px rgba(0, 0, 0, 0.35)' } 10 | ]; 11 | 12 | const TEXT_SHADOW_DROP_TOP: Keyframe[] = [ 13 | { offset: 0, ...TEXT_SHADOW_DROP_DEFAULT, textShadow: '0 0 0 rgba(0, 0, 0, 0)' }, 14 | { offset: 1, ...TEXT_SHADOW_DROP_DEFAULT, textShadow: '0 -6px 18px rgba(0, 0, 0, 0.35)' } 15 | ]; 16 | 17 | const TEXT_SHADOW_DROP_TR: Keyframe[] = [ 18 | { offset: 0, ...TEXT_SHADOW_DROP_DEFAULT, textShadow: '0 0 0 rgba(0, 0, 0, 0)' }, 19 | { offset: 1, ...TEXT_SHADOW_DROP_DEFAULT, textShadow: '6px -6px 18px rgba(0, 0, 0, 0.35)' } 20 | ]; 21 | 22 | const TEXT_SHADOW_DROP_RIGHT: Keyframe[] = [ 23 | { offset: 0, ...TEXT_SHADOW_DROP_DEFAULT, textShadow: '0 0 0 rgba(0, 0, 0, 0)' }, 24 | { offset: 1, ...TEXT_SHADOW_DROP_DEFAULT, textShadow: '6px 0 18px rgba(0, 0, 0, 0.35)' } 25 | ]; 26 | 27 | const TEXT_SHADOW_DROP_BR: Keyframe[] = [ 28 | { offset: 0, ...TEXT_SHADOW_DROP_DEFAULT, textShadow: '0 0 0 rgba(0, 0, 0, 0)' }, 29 | { offset: 1, ...TEXT_SHADOW_DROP_DEFAULT, textShadow: '6px 6px 18px rgba(0, 0, 0, 0.35)' } 30 | ]; 31 | 32 | const TEXT_SHADOW_DROP_BOTTOM: Keyframe[] = [ 33 | { offset: 0, ...TEXT_SHADOW_DROP_DEFAULT, textShadow: '0 0 0 rgba(0, 0, 0, 0)' }, 34 | { offset: 1, ...TEXT_SHADOW_DROP_DEFAULT, textShadow: '0 6px 18px rgba(0, 0, 0, 0.35)' } 35 | ]; 36 | 37 | const TEXT_SHADOW_DROP_BL: Keyframe[] = [ 38 | { offset: 0, ...TEXT_SHADOW_DROP_DEFAULT, textShadow: '0 0 0 rgba(0, 0, 0, 0)' }, 39 | { offset: 1, ...TEXT_SHADOW_DROP_DEFAULT, textShadow: '-6px 6px 18px rgba(0, 0, 0, 0.35)' } 40 | ]; 41 | 42 | const TEXT_SHADOW_DROP_LEFT: Keyframe[] = [ 43 | { offset: 0, ...TEXT_SHADOW_DROP_DEFAULT, textShadow: '0 0 0 rgba(0, 0, 0, 0)' }, 44 | { offset: 1, ...TEXT_SHADOW_DROP_DEFAULT, textShadow: '-6px 0 18px rgba(0, 0, 0, 0.35)' } 45 | ]; 46 | 47 | const TEXT_SHADOW_DROP_TL: Keyframe[] = [ 48 | { offset: 0, ...TEXT_SHADOW_DROP_DEFAULT, textShadow: '0 0 0 rgba(0, 0, 0, 0)' }, 49 | { offset: 1, ...TEXT_SHADOW_DROP_DEFAULT, textShadow: '-6px -6px 18px rgba(0, 0, 0, 0.35)' } 50 | ]; 51 | 52 | export default { 53 | [ANIMATIONS.TEXT_SHADOW_DROP_CENTER]: TEXT_SHADOW_DROP_CENTER, 54 | [ANIMATIONS.TEXT_SHADOW_DROP_TOP]: TEXT_SHADOW_DROP_TOP, 55 | [ANIMATIONS.TEXT_SHADOW_DROP_TR]: TEXT_SHADOW_DROP_TR, 56 | [ANIMATIONS.TEXT_SHADOW_DROP_RIGHT]: TEXT_SHADOW_DROP_RIGHT, 57 | [ANIMATIONS.TEXT_SHADOW_DROP_BR]: TEXT_SHADOW_DROP_BR, 58 | [ANIMATIONS.TEXT_SHADOW_DROP_BOTTOM]: TEXT_SHADOW_DROP_BOTTOM, 59 | [ANIMATIONS.TEXT_SHADOW_DROP_BL]: TEXT_SHADOW_DROP_BL, 60 | [ANIMATIONS.TEXT_SHADOW_DROP_LEFT]: TEXT_SHADOW_DROP_LEFT, 61 | [ANIMATIONS.TEXT_SHADOW_DROP_TL]: TEXT_SHADOW_DROP_TL 62 | }; 63 | -------------------------------------------------------------------------------- /src/animations/animista/tilt-in-fwd.ts: -------------------------------------------------------------------------------- 1 | import { ANIMATIONS } from './common'; 2 | 3 | const TILT_IN_FWD_DEFAULT: Keyframe = { 4 | easing: 'cubic-bezier(0.250, 0.460, 0.450, 0.940)', 5 | fillMode: 'both' 6 | }; 7 | 8 | const TILT_IN_FWD_TR: Keyframe[] = [ 9 | { 10 | offset: 0, 11 | ...TILT_IN_FWD_DEFAULT, 12 | transform: 'rotateY(20deg) rotateX(35deg) translate(300px, -300px) skew(-35deg, 10deg)', 13 | opacity: 0 14 | }, 15 | { 16 | offset: 1, 17 | ...TILT_IN_FWD_DEFAULT, 18 | transform: 'rotateY(0) rotateX(0deg) translate(0, 0) skew(0deg, 0deg)', 19 | opacity: 1 20 | } 21 | ]; 22 | 23 | const TILT_IN_FWD_BR: Keyframe[] = [ 24 | { 25 | offset: 0, 26 | ...TILT_IN_FWD_DEFAULT, 27 | transform: 'rotateY(20deg) rotateX(-35deg) translate(300px, 300px) skew(35deg, -10deg)', 28 | opacity: 0 29 | }, 30 | { 31 | offset: 1, 32 | ...TILT_IN_FWD_DEFAULT, 33 | transform: 'rotateY(0) rotateX(0deg) translate(0, 0) skew(0deg, 0deg)', 34 | opacity: 1 35 | } 36 | ]; 37 | 38 | const TILT_IN_FWD_BL: Keyframe[] = [ 39 | { 40 | offset: 0, 41 | ...TILT_IN_FWD_DEFAULT, 42 | transform: 'rotateY(-20deg) rotateX(-35deg) translate(-300px, 300px) skew(-35deg, 10deg)', 43 | opacity: 0 44 | }, 45 | { 46 | offset: 1, 47 | ...TILT_IN_FWD_DEFAULT, 48 | transform: 'rotateY(0) rotateX(0deg) translate(0, 0) skew(0deg, 0deg)', 49 | opacity: 1 50 | } 51 | ]; 52 | 53 | const TILT_IN_FWD_TL: Keyframe[] = [ 54 | { 55 | offset: 0, 56 | ...TILT_IN_FWD_DEFAULT, 57 | transform: 'rotateY(-20deg) rotateX(35deg) translate(-300px, -300px) skew(35deg, -10deg)', 58 | opacity: 0 59 | }, 60 | { 61 | offset: 1, 62 | ...TILT_IN_FWD_DEFAULT, 63 | transform: 'rotateY(0) rotateX(0deg) translate(0, 0) skew(0deg, 0deg)', 64 | opacity: 1 65 | } 66 | ]; 67 | 68 | export default { 69 | [ANIMATIONS.TILT_IN_FWD_TR]: TILT_IN_FWD_TR, 70 | [ANIMATIONS.TILT_IN_FWD_BR]: TILT_IN_FWD_BR, 71 | [ANIMATIONS.TILT_IN_FWD_BL]: TILT_IN_FWD_BL, 72 | [ANIMATIONS.TILT_IN_FWD_TL]: TILT_IN_FWD_TL 73 | }; 74 | -------------------------------------------------------------------------------- /src/animations/animista/tracking-in.ts: -------------------------------------------------------------------------------- 1 | import { ANIMATIONS } from './common'; 2 | 3 | const TRACKING_IN_DEFAULT: Keyframe = { 4 | easing: 'cubic-bezier(0.215, 0.610, 0.355, 1.000)', 5 | fillMode: 'both' 6 | }; 7 | 8 | const TRACKING_IN_EXPAND: Keyframe[] = [ 9 | { offset: 0, ...TRACKING_IN_DEFAULT, letterSpacing: '-0.5em', opacity: 0 }, 10 | { offset: 0.4, ...TRACKING_IN_DEFAULT, letterSpacing: 'normal', opacity: 0.6 }, 11 | { offset: 1, ...TRACKING_IN_DEFAULT, letterSpacing: 'normal', opacity: 1 } 12 | ]; 13 | 14 | const TRACKING_IN_EXPAND_FWD: Keyframe[] = [ 15 | { offset: 0, ...TRACKING_IN_DEFAULT, letterSpacing: '-0.5em', transform: 'translateZ(-700px)', opacity: 0 }, 16 | { offset: 0.4, ...TRACKING_IN_DEFAULT, letterSpacing: 'normal', opacity: 0.6 }, 17 | { offset: 1, ...TRACKING_IN_DEFAULT, letterSpacing: 'normal', transform: 'translateZ(0)', opacity: 1 } 18 | ]; 19 | 20 | const TRACKING_IN_EXPAND_FWD_TOP: Keyframe[] = [ 21 | { offset: 0, ...TRACKING_IN_DEFAULT, letterSpacing: '-0.5em', transform: 'translateZ(-700px) translateY(-500px)', opacity: 0 }, 22 | { offset: 0.4, ...TRACKING_IN_DEFAULT, letterSpacing: 'normal', opacity: 0.6 }, 23 | { offset: 1, ...TRACKING_IN_DEFAULT, letterSpacing: 'normal', transform: 'translateZ(0) translateY(0)', opacity: 1 } 24 | ]; 25 | 26 | const TRACKING_IN_EXPAND_FWD_BOTTOM: Keyframe[] = [ 27 | { offset: 0, ...TRACKING_IN_DEFAULT, letterSpacing: '-0.5em', transform: 'translateZ(-700px) translateY(500px)', opacity: 0 }, 28 | { offset: 0.4, ...TRACKING_IN_DEFAULT, letterSpacing: 'normal', opacity: 0.6 }, 29 | { offset: 1, ...TRACKING_IN_DEFAULT, letterSpacing: 'normal', transform: 'translateZ(0) translateY(0)', opacity: 1 } 30 | ]; 31 | 32 | const TRACKING_IN_CONTRACT: Keyframe[] = [ 33 | { offset: 0, ...TRACKING_IN_DEFAULT, letterSpacing: '1em', opacity: 0 }, 34 | { offset: 0.4, ...TRACKING_IN_DEFAULT, letterSpacing: 'normal', opacity: 0.6 }, 35 | { offset: 1, ...TRACKING_IN_DEFAULT, letterSpacing: 'normal', opacity: 1 } 36 | ]; 37 | 38 | const TRACKING_IN_CONTRACT_BCK: Keyframe[] = [ 39 | { offset: 0, ...TRACKING_IN_DEFAULT, letterSpacing: '1em', transform: 'translateZ(400px)', opacity: 0 }, 40 | { offset: 0.4, ...TRACKING_IN_DEFAULT, letterSpacing: 'normal', opacity: 0.6 }, 41 | { offset: 1, ...TRACKING_IN_DEFAULT, letterSpacing: 'normal', transform: 'translateZ(0)', opacity: 1 } 42 | ]; 43 | 44 | const TRACKING_IN_CONTRACT_BCK_TOP: Keyframe[] = [ 45 | { offset: 0, ...TRACKING_IN_DEFAULT, letterSpacing: '1em', transform: 'translateZ(400px) translateY(-300px)', opacity: 0 }, 46 | { offset: 0.4, ...TRACKING_IN_DEFAULT, letterSpacing: 'normal', opacity: 0.6 }, 47 | { offset: 1, ...TRACKING_IN_DEFAULT, letterSpacing: 'normal', transform: 'translateZ(0) translateY(0)', opacity: 1 } 48 | ]; 49 | 50 | const TRACKING_IN_CONTRACT_BCK_BOTTOM: Keyframe[] = [ 51 | { offset: 0, ...TRACKING_IN_DEFAULT, letterSpacing: '1em', transform: 'translateZ(400px) translateY(300px)', opacity: 0 }, 52 | { offset: 0.4, ...TRACKING_IN_DEFAULT, letterSpacing: 'normal', opacity: 0.6 }, 53 | { offset: 1, ...TRACKING_IN_DEFAULT, letterSpacing: 'normal', transform: 'translateZ(0) translateY(0)', opacity: 1 } 54 | ]; 55 | 56 | export default { 57 | [ANIMATIONS.TRACKING_IN_EXPAND]: TRACKING_IN_EXPAND, 58 | [ANIMATIONS.TRACKING_IN_EXPAND_FWD]: TRACKING_IN_EXPAND_FWD, 59 | [ANIMATIONS.TRACKING_IN_EXPAND_FWD_TOP]: TRACKING_IN_EXPAND_FWD_TOP, 60 | [ANIMATIONS.TRACKING_IN_EXPAND_FWD_BOTTOM]: TRACKING_IN_EXPAND_FWD_BOTTOM, 61 | [ANIMATIONS.TRACKING_IN_CONTRACT]: TRACKING_IN_CONTRACT, 62 | [ANIMATIONS.TRACKING_IN_CONTRACT_BCK]: TRACKING_IN_CONTRACT_BCK, 63 | [ANIMATIONS.TRACKING_IN_CONTRACT_BCK_TOP]: TRACKING_IN_CONTRACT_BCK_TOP, 64 | [ANIMATIONS.TRACKING_IN_CONTRACT_BCK_BOTTOM]: TRACKING_IN_CONTRACT_BCK_BOTTOM 65 | }; 66 | -------------------------------------------------------------------------------- /src/animations/animista/vibrate.ts: -------------------------------------------------------------------------------- 1 | import { ANIMATIONS } from './common'; 2 | 3 | const VIBRATE_DEFAULT: Keyframe = { 4 | easing: 'linear', 5 | fillMode: 'both' 6 | }; 7 | 8 | const VIBRATE_1: Keyframe[] = [ 9 | { offset: 0, ...VIBRATE_DEFAULT, transform: 'translate(0)' }, 10 | { offset: 0.2, ...VIBRATE_DEFAULT, transform: 'translate(-2px, 2px)' }, 11 | { offset: 0.4, ...VIBRATE_DEFAULT, transform: 'translate(-2px, -2px)' }, 12 | { offset: 0.6, ...VIBRATE_DEFAULT, transform: 'translate(2px, 2px)' }, 13 | { offset: 0.8, ...VIBRATE_DEFAULT, transform: 'translate(2px, -2px)' }, 14 | { offset: 1, ...VIBRATE_DEFAULT, transform: 'translate(0)' } 15 | ]; 16 | 17 | const VIBRATE_2: Keyframe[] = [ 18 | { offset: 0, ...VIBRATE_DEFAULT, transform: 'translate(0)' }, 19 | { offset: 0.1, ...VIBRATE_DEFAULT, transform: 'translate(-2px, -2px)' }, 20 | { offset: 0.2, ...VIBRATE_DEFAULT, transform: 'translate(2px, -2px)' }, 21 | { offset: 0.3, ...VIBRATE_DEFAULT, transform: 'translate(-2px, 2px)' }, 22 | { offset: 0.4, ...VIBRATE_DEFAULT, transform: 'translate(2px, 2px)' }, 23 | { offset: 0.5, ...VIBRATE_DEFAULT, transform: 'translate(-2px, -2px)' }, 24 | { offset: 0.6, ...VIBRATE_DEFAULT, transform: 'translate(2px, -2px)' }, 25 | { offset: 0.7, ...VIBRATE_DEFAULT, transform: 'translate(-2px, 2px)' }, 26 | { offset: 0.8, ...VIBRATE_DEFAULT, transform: 'translate(-2px, -2px)' }, 27 | { offset: 0.9, ...VIBRATE_DEFAULT, transform: 'translate(2px, -2px)' }, 28 | { offset: 1, ...VIBRATE_DEFAULT, transform: 'translate(0)' } 29 | ]; 30 | 31 | export default { 32 | [ANIMATIONS.VIBRATE_1]: VIBRATE_1, 33 | [ANIMATIONS.VIBRATE_2]: VIBRATE_2 34 | }; 35 | -------------------------------------------------------------------------------- /src/animations/animista/wobble.ts: -------------------------------------------------------------------------------- 1 | import { ANIMATIONS } from './common'; 2 | 3 | const WOBBLE_DEFAULT: Keyframe = { 4 | fillMode: 'both' 5 | }; 6 | 7 | const WOBBLE_HOR_BOTTOM: Keyframe[] = [ 8 | { offset: 0, ...WOBBLE_DEFAULT, transform: 'translateX(0)', transformOrigin: '50% 50%' }, 9 | { offset: 0.15, ...WOBBLE_DEFAULT, transform: 'translateX(-30px) rotate(-6deg)' }, 10 | { offset: 0.3, ...WOBBLE_DEFAULT, transform: 'translateX(15px) rotate(6deg)' }, 11 | { offset: 0.45, ...WOBBLE_DEFAULT, transform: 'translateX(-15px) rotate(-3.6deg)' }, 12 | { offset: 0.6, ...WOBBLE_DEFAULT, transform: 'translateX(9px) rotate(2.4deg)' }, 13 | { offset: 0.75, ...WOBBLE_DEFAULT, transform: 'translateX(-6px) rotate(-1.2deg)' }, 14 | { offset: 1, ...WOBBLE_DEFAULT, transform: 'translateX(0)', transformOrigin: '50% 50%' } 15 | ]; 16 | 17 | const WOBBLE_HOR_TOP: Keyframe[] = [ 18 | { offset: 0, ...WOBBLE_DEFAULT, transform: 'translateX(0)', transformOrigin: '50% 50%' }, 19 | { offset: 0.15, ...WOBBLE_DEFAULT, transform: 'translateX(-30px) rotate(6deg)' }, 20 | { offset: 0.3, ...WOBBLE_DEFAULT, transform: 'translateX(15px) rotate(-6deg)' }, 21 | { offset: 0.45, ...WOBBLE_DEFAULT, transform: 'translateX(-15px) rotate(3.6deg)' }, 22 | { offset: 0.6, ...WOBBLE_DEFAULT, transform: 'translateX(9px) rotate(-2.4deg)' }, 23 | { offset: 0.75, ...WOBBLE_DEFAULT, transform: 'translateX(-6px) rotate(1.2deg)' }, 24 | { offset: 1, ...WOBBLE_DEFAULT, transform: 'translateX(0)', transformOrigin: '50% 50%' } 25 | ]; 26 | 27 | const WOBBLE_VER_LEFT: Keyframe[] = [ 28 | { offset: 0, ...WOBBLE_DEFAULT, transform: 'translateY(0) rotate(0)', transformOrigin: '50% 50%' }, 29 | { offset: 0.15, ...WOBBLE_DEFAULT, transform: 'translateY(-30px) rotate(-6deg)' }, 30 | { offset: 0.3, ...WOBBLE_DEFAULT, transform: 'translateY(15px) rotate(6deg)' }, 31 | { offset: 0.45, ...WOBBLE_DEFAULT, transform: 'translateY(-15px) rotate(-3.6deg)' }, 32 | { offset: 0.6, ...WOBBLE_DEFAULT, transform: 'translateY(9px) rotate(2.4deg)' }, 33 | { offset: 0.75, ...WOBBLE_DEFAULT, transform: 'translateY(-6px) rotate(-1.2deg)' }, 34 | { offset: 1, ...WOBBLE_DEFAULT, transform: 'translateY(0) rotate(0)', transformOrigin: '50% 50%' } 35 | ]; 36 | 37 | const WOBBLE_VER_RIGHT: Keyframe[] = [ 38 | { offset: 0, ...WOBBLE_DEFAULT, transform: 'translateY(0) rotate(0)', transformOrigin: '50% 50%' }, 39 | { offset: 0.15, ...WOBBLE_DEFAULT, transform: 'translateY(-30px) rotate(6deg)' }, 40 | { offset: 0.3, ...WOBBLE_DEFAULT, transform: 'translateY(15px) rotate(-6deg)' }, 41 | { offset: 0.45, ...WOBBLE_DEFAULT, transform: 'translateY(-15px) rotate(3.6deg)' }, 42 | { offset: 0.6, ...WOBBLE_DEFAULT, transform: 'translateY(9px) rotate(-2.4deg)' }, 43 | { offset: 0.75, ...WOBBLE_DEFAULT, transform: 'translateY(-6px) rotate(1.2deg)' }, 44 | { offset: 1, ...WOBBLE_DEFAULT, transform: 'translateY(0) rotate(0)', transformOrigin: '50% 50%' } 45 | ]; 46 | 47 | 48 | export default { 49 | [ANIMATIONS.WOBBLE_HOR_BOTTOM]: WOBBLE_HOR_BOTTOM, 50 | [ANIMATIONS.WOBBLE_HOR_TOP]: WOBBLE_HOR_TOP, 51 | [ANIMATIONS.WOBBLE_VER_LEFT]: WOBBLE_VER_LEFT, 52 | [ANIMATIONS.WOBBLE_VER_RIGHT]: WOBBLE_VER_RIGHT 53 | }; 54 | -------------------------------------------------------------------------------- /src/animations/common.ts: -------------------------------------------------------------------------------- 1 | /** 2 | * Animate.css Animations 3 | */ 4 | import { ANIMATIONS as ANIMATIONS_ANIMATE_CSS } from './animate/common'; 5 | 6 | /** 7 | * Animista Animations 8 | */ 9 | import { ANIMATIONS as ANIMATIONS_ANIMISTA } from './animista/common'; 10 | 11 | export const ANIMATIONS = { 12 | /** 13 | * DEFAULT ANIMATION 14 | */ 15 | NONE: 'none', 16 | ...ANIMATIONS_ANIMATE_CSS, 17 | ...ANIMATIONS_ANIMISTA, 18 | } as const; 19 | 20 | export type AnimationsType = typeof ANIMATIONS[keyof typeof ANIMATIONS]; -------------------------------------------------------------------------------- /src/animations/index.ts: -------------------------------------------------------------------------------- 1 | import { ANIMATIONS, AnimationsType } from './common'; 2 | import ANIMATE from './animate'; 3 | import ANIMISTA from './animista'; 4 | 5 | export const ANIMATION_KEY_ERROR = 'Animation not supported'; 6 | export { ANIMATIONS, AnimationsType }; 7 | export const KEYFRAMES = { 8 | [ANIMATIONS.NONE]: [] as Keyframe[], 9 | ...ANIMATE, 10 | ...ANIMISTA, 11 | } as const; 12 | 13 | /** 14 | * Get the keyframes of the animation 15 | * @param animation - Name of the animation. 16 | */ 17 | export function getKeyFramesByAnimation (animation: AnimationsType) { 18 | const keyFrames = KEYFRAMES[animation]; 19 | if (keyFrames !== undefined) { 20 | return keyFrames; 21 | } else { 22 | throw new Error(ANIMATION_KEY_ERROR); 23 | } 24 | } -------------------------------------------------------------------------------- /src/easing/easing.ts: -------------------------------------------------------------------------------- 1 | export const EASING = { 2 | LINEAR : 'linear', 3 | EASE : 'ease', 4 | EASE_IN: 'ease-in', 5 | EASE_OUT: 'ease-out', 6 | EASE_IN_OUT: 'ease-in-out', 7 | EASE_IN_CUBIC: 'ease-in-cubic', 8 | EASE_OUT_CUBIC: 'ease-out-cubic', 9 | EASE_IN_OUT_CUBIC: 'ease-in-out-cubic', 10 | EASE_IN_CIRC: 'ease-in-circ', 11 | EASE_OUT_CIRC: 'ease-out-circ', 12 | EASE_IN_OUT_CIRC: 'ease-in-out-circ', 13 | EASE_IN_EXPO: 'ease-in-expo', 14 | EASE_OUT_EXPO: 'ease-out-expo', 15 | EASE_IN_OUT_EXPO: 'ease-in-out-expo', 16 | EASE_IN_QUAD: 'ease-in-quad', 17 | EASE_OUT_QUAD: 'ease-out-quad', 18 | EASE_IN_OUT_QUAD: 'ease-in-out-quad', 19 | EASE_IN_QUART: 'ease-in-quart', 20 | EASE_OUT_QUART: 'ease-out-quart', 21 | EASE_IN_OUT_QUART: 'ease-in-out-quart', 22 | EASE_IN_QUINT: 'ease-in-quint', 23 | EASE_OUT_QUINT: 'ease-out-quint', 24 | EASE_IN_OUT_QUINT: 'ease-in-out-quint', 25 | EASE_IN_SINE: 'ease-in-sine', 26 | EASE_OUT_SINE: 'ease-out-sine', 27 | EASE_IN_OUT_SINE: 'ease-in-out-sine', 28 | EASE_IN_BACK: 'ease-in-back', 29 | EASE_OUT_BACK: 'ease-out-back', 30 | EASE_IN_OUT_BACK: 'ease-in-out-back' 31 | } as const; 32 | 33 | export const EASING_FUNCTIONS = { 34 | [EASING.LINEAR]: 'linear', 35 | [EASING.EASE]: 'cubic-bezier(0.25, 0.1, 0.25, 1)', 36 | [EASING.EASE_IN]: 'cubic-bezier(0.42, 0, 1, 1)', 37 | [EASING.EASE_OUT]: 'cubic-bezier(0, 0, 0.58, 1)', 38 | [EASING.EASE_IN_OUT]: 'cubic-bezier(0.42, 0, 0.58, 1)', 39 | [EASING.EASE_IN_CUBIC]: 'cubic-bezier(0.55, 0.055, 0.675, 0.19)', 40 | [EASING.EASE_OUT_CUBIC]: 'cubic-bezier(0.215, 0.61, 0.355, 1.0)', 41 | [EASING.EASE_IN_OUT_CUBIC]: 'cubic-bezier(0.645, 0.045, 0.355, 1.0)', 42 | [EASING.EASE_IN_CIRC]: 'cubic-bezier(0.6, 0.04, 0.98, 0.335)', 43 | [EASING.EASE_OUT_CIRC]: 'cubic-bezier(0.075, 0.82, 0.165, 1.0)', 44 | [EASING.EASE_IN_OUT_CIRC]: 'cubic-bezier(0.785, 0.135, 0.15, 0.86)', 45 | [EASING.EASE_IN_EXPO]: 'cubic-bezier(0.95, 0.05, 0.795, 0.035)', 46 | [EASING.EASE_OUT_EXPO]: 'cubic-bezier(0.19, 1.0, 0.22, 1.0)', 47 | [EASING.EASE_IN_OUT_EXPO]: 'cubic-bezier(1.0, 0.0, 0.0, 1.0)', 48 | [EASING.EASE_IN_QUAD]: 'cubic-bezier(0.55, 0.085, 0.68, 0.53)', 49 | [EASING.EASE_OUT_QUAD]: 'cubic-bezier(0.25, 0.46, 0.45, 0.94)', 50 | [EASING.EASE_IN_OUT_QUAD]: 'cubic-bezier(0.455, 0.03, 0.515, 0.955)', 51 | [EASING.EASE_IN_QUART]: 'cubic-bezier(0.895, 0.03, 0.685, 0.22)', 52 | [EASING.EASE_OUT_QUART]: 'cubic-bezier(0.165, 0.84, 0.44, 1.0)', 53 | [EASING.EASE_IN_OUT_QUART]: 'cubic-bezier(0.77, 0.0, 0.175, 1.0)', 54 | [EASING.EASE_IN_QUINT]: 'cubic-bezier(0.755, 0.05, 0.855, 0.06)', 55 | [EASING.EASE_OUT_QUINT]: 'cubic-bezier(0.23, 1.0, 0.32, 1.0)', 56 | [EASING.EASE_IN_OUT_QUINT]: 'cubic-bezier(0.86, 0.0, 0.07, 1.0)', 57 | [EASING.EASE_IN_SINE]: 'cubic-bezier(0.47, 0.0, 0.745, 0.715)', 58 | [EASING.EASE_OUT_SINE]: 'cubic-bezier(0.39, 0.575, 0.565, 1.0)', 59 | [EASING.EASE_IN_OUT_SINE]: 'cubic-bezier(0.445, 0.05, 0.55, 0.95)', 60 | [EASING.EASE_IN_BACK]: 'cubic-bezier(0.6, -0.28, 0.735, 0.045)', 61 | [EASING.EASE_OUT_BACK]: 'cubic-bezier(0.175, 0.885, 0.32, 1.275)', 62 | [EASING.EASE_IN_OUT_BACK]: 'cubic-bezier(0.68, -0.55, 0.265, 1.55)' 63 | }; 64 | 65 | export type EasingType = typeof EASING[keyof typeof EASING]; -------------------------------------------------------------------------------- /src/hocs/index.tsx: -------------------------------------------------------------------------------- 1 | import { h, FunctionalComponent, ComponentInterface } from '@stencil/core'; 2 | import { JSXBase, HTMLStencilElement } from '@stencil/core/internal'; 3 | import { JSX } from '../components'; 4 | 5 | /** 6 | * HOC to wrap components with Animatable component 7 | * @param WrappedComponent - Component to be animated with Animatable component 8 | */ 9 | export function createAnimatableComponent ( 10 | WrappedComponent: FunctionalComponent 11 | ) { 12 | type ComponentProps = Props 13 | & ComponentInterface 14 | & JSX.AnimatableComponent 15 | & JSXBase.HTMLAttributes 16 | & JSXBase.HTMLAttributes 17 | & JSXBase.HTMLAttributes; 18 | 19 | return (props: ComponentProps): FunctionalComponent => { 20 | const { 21 | ref, 22 | animation, 23 | keyFrames, 24 | keyFramesData, 25 | options, 26 | optionsData, 27 | animateId, 28 | delay, 29 | endDelay, 30 | duration, 31 | direction, 32 | composite, 33 | easing, 34 | fill, 35 | iterations, 36 | iterationStart, 37 | iterationComposite, 38 | autoPlay, 39 | fromClassName, 40 | toClassName, 41 | currentTime, 42 | startTime, 43 | playbackRate, 44 | onStart, 45 | onFinish, 46 | onCancel, 47 | ...rest 48 | } = props 49 | return 77 | 78 | 79 | }; 80 | }; -------------------------------------------------------------------------------- /src/index.ts: -------------------------------------------------------------------------------- 1 | export { Components, JSX } from './components'; 2 | export * from './easing/easing'; 3 | export * from './animations'; 4 | export * from './hocs'; -------------------------------------------------------------------------------- /src/models/animatable.ts: -------------------------------------------------------------------------------- 1 | import { EventEmitter, ComponentInterface } from "@stencil/core"; 2 | import { AnimationsType } from "../animations"; 3 | 4 | export interface IAnimatable { 5 | animation?: AnimationsType 6 | keyFrames?: Keyframe[] 7 | keyFramesData?: string 8 | options?: KeyframeAnimationOptions 9 | optionsData?: string 10 | animateId?: string 11 | delay?: number 12 | endDelay?: number 13 | duration?: number 14 | direction?: PlaybackDirection 15 | composite?: CompositeOperation 16 | easing?: string 17 | fill?: FillMode 18 | iterations?: number 19 | iterationStart?: number 20 | iterationComposite?: IterationCompositeOperation 21 | autoPlay?: boolean 22 | fromClassName?: string 23 | toClassName?: string 24 | currentTime?: number; 25 | startTime?: number; 26 | playbackRate?: number; 27 | onStart: EventEmitter 28 | onFinish: EventEmitter 29 | onCancel: EventEmitter 30 | } 31 | 32 | export type IAnimatableComponent = IAnimatable & ComponentInterface; -------------------------------------------------------------------------------- /src/utils/dom.ts: -------------------------------------------------------------------------------- 1 | /** 2 | * Get element to animate 3 | */ 4 | export const getElementToAnimate = ( 5 | parent: HTMLElement 6 | ): HTMLElement => { 7 | return parent.shadowRoot !== null ? parent : ( 8 | parent.firstElementChild 9 | || (parent.children.length && parent.children[0]) 10 | || parent 11 | ) as HTMLElement; 12 | } -------------------------------------------------------------------------------- /src/utils/index.ts: -------------------------------------------------------------------------------- 1 | export * from './dom'; 2 | export * from './waapi'; -------------------------------------------------------------------------------- /stencil.config.ts: -------------------------------------------------------------------------------- 1 | import { Config } from '@stencil/core'; 2 | import { reactOutputTarget } from '@stencil/react-output-target'; 3 | 4 | export const config: Config = { 5 | namespace: 'animatable-component', 6 | outputTargets: [ 7 | reactOutputTarget({ 8 | componentCorePackage: '@proyecto26/animatable-component', 9 | proxiesFile: './react/src/components.ts', 10 | includeDefineCustomElements: true, 11 | includePolyfills: true 12 | }), 13 | { 14 | type: 'dist', 15 | esmLoaderPath: '../loader' 16 | }, 17 | { 18 | type: 'docs-readme' 19 | }, 20 | { 21 | type: 'www', 22 | serviceWorker: null // disable service workers 23 | } 24 | ] 25 | }; 26 | -------------------------------------------------------------------------------- /tsconfig.json: -------------------------------------------------------------------------------- 1 | { 2 | "compilerOptions": { 3 | "allowSyntheticDefaultImports": true, 4 | "allowUnreachableCode": false, 5 | "declaration": false, 6 | "experimentalDecorators": true, 7 | "lib": [ 8 | "dom", 9 | "es2017" 10 | ], 11 | "moduleResolution": "node", 12 | "module": "esnext", 13 | "target": "es2017", 14 | "noUnusedLocals": true, 15 | "noUnusedParameters": true, 16 | "jsx": "react", 17 | "jsxFactory": "h" 18 | }, 19 | "include": [ 20 | "src", 21 | "types/jsx.d.ts" 22 | ], 23 | "exclude": [ 24 | "node_modules" 25 | ] 26 | } 27 | --------------------------------------------------------------------------------