├── .gitignore ├── .npmignore ├── LICENSE ├── README.md ├── demo ├── .eslintrc.cjs ├── .gitignore ├── .vscode │ └── extensions.json ├── README.md ├── index.html ├── jsconfig.json ├── package-lock.json ├── package.json ├── postcss.config.js ├── public │ ├── favicon.ico │ └── social.png ├── src │ ├── App.vue │ ├── assets │ │ ├── css │ │ │ └── main.css │ │ └── img │ │ │ ├── animate4vue.svg │ │ │ ├── bell.png │ │ │ ├── pinia.png │ │ │ ├── vue.webp │ │ │ └── vueanimate.svg │ ├── components │ │ ├── Animations.vue │ │ ├── AnimationsObject.vue │ │ ├── Attention.vue │ │ ├── AttentionObject.vue │ │ └── Tab.vue │ ├── main.js │ ├── stores │ │ └── store.js │ └── utils │ │ └── setTheme.js ├── tailwind.config.js └── vite.config.js ├── dist ├── animations │ ├── attentionSeekers │ │ ├── bounce.d.ts │ │ ├── bounce.js │ │ ├── constructAnimation.d.ts │ │ ├── constructAnimation.js │ │ ├── flash.d.ts │ │ ├── flash.js │ │ ├── headShake.d.ts │ │ ├── headShake.js │ │ ├── heartBeat.d.ts │ │ ├── heartBeat.js │ │ ├── jello.d.ts │ │ ├── jello.js │ │ ├── puff.d.ts │ │ ├── puff.js │ │ ├── pulse.d.ts │ │ ├── pulse.js │ │ ├── rubberBand.d.ts │ │ ├── rubberBand.js │ │ ├── shakeHorizontal.d.ts │ │ ├── shakeHorizontal.js │ │ ├── shakeVertical.d.ts │ │ ├── shakeVertical.js │ │ ├── spin.d.ts │ │ ├── spin.js │ │ ├── swing.d.ts │ │ ├── swing.js │ │ ├── tada.d.ts │ │ ├── tada.js │ │ ├── wobble.d.ts │ │ └── wobble.js │ ├── blur.d.ts │ ├── blur.js │ ├── customAnimation.d.ts │ ├── customAnimation.js │ ├── fade.d.ts │ ├── fade.js │ ├── flip.d.ts │ ├── flip.js │ ├── openClose.d.ts │ ├── openClose.js │ ├── perspective.d.ts │ ├── perspective.js │ ├── puff.d.ts │ ├── puff.js │ ├── roll.d.ts │ ├── roll.js │ ├── rotate.d.ts │ ├── rotate.js │ ├── skew.d.ts │ ├── skew.js │ ├── slide.d.ts │ ├── slide.js │ ├── text.d.ts │ ├── text.js │ ├── vanish.d.ts │ ├── vanish.js │ ├── wrap.d.ts │ ├── wrap.js │ ├── zoom.d.ts │ └── zoom.js ├── index.d.ts ├── index.esm.js ├── index.esm.js.map ├── index.js └── utils │ ├── animate.d.ts │ ├── animate.js │ ├── animationIsRunning.d.ts │ ├── animationIsRunning.js │ ├── globalTypes.d.ts │ ├── globalTypes.js │ ├── runtimeChecks.d.ts │ ├── runtimeChecks.js │ ├── setOffset.d.ts │ ├── setOffset.js │ ├── types.d.ts │ └── types.js ├── md_assets ├── animate4vue.svg ├── demo1.gif ├── demo2.gif ├── demo3.gif └── demo4.gif ├── package-lock.json ├── package.json ├── rollup.config.js ├── src ├── animations │ ├── attentionSeekers │ │ ├── bounce.ts │ │ ├── constructAnimation.ts │ │ ├── flash.ts │ │ ├── headShake.ts │ │ ├── heartBeat.ts │ │ ├── jello.ts │ │ ├── puff.ts │ │ ├── pulse.ts │ │ ├── rubberBand.ts │ │ ├── shakeHorizontal.ts │ │ ├── shakeVertical.ts │ │ ├── spin.ts │ │ ├── swing.ts │ │ ├── tada.ts │ │ └── wobble.ts │ ├── blur.ts │ ├── customAnimation.ts │ ├── fade.ts │ ├── flip.ts │ ├── openClose.ts │ ├── perspective.ts │ ├── puff.ts │ ├── roll.ts │ ├── rotate.ts │ ├── skew.ts │ ├── slide.ts │ ├── text.ts │ ├── vanish.ts │ ├── wrap.ts │ └── zoom.ts ├── index.ts └── utils │ ├── animate.ts │ ├── animationIsRunning.ts │ ├── globalTypes.ts │ ├── runtimeChecks.ts │ ├── setOffset.ts │ └── types.ts └── tsconfig.json /.gitignore: -------------------------------------------------------------------------------- 1 | node_modules 2 | demo/node_modules 3 | demo/dist -------------------------------------------------------------------------------- /.npmignore: -------------------------------------------------------------------------------- 1 | src 2 | test 3 | tsconfig.json 4 | .npmignore 5 | demo 6 | md_assets -------------------------------------------------------------------------------- /LICENSE: -------------------------------------------------------------------------------- 1 | MIT License 2 | 3 | Copyright (c) 2024 MK 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. -------------------------------------------------------------------------------- /demo/.eslintrc.cjs: -------------------------------------------------------------------------------- 1 | /* eslint-env node */ 2 | module.exports = { 3 | root: true, 4 | 'extends': [ 5 | 'plugin:vue/vue3-essential', 6 | 'eslint:recommended' 7 | ], 8 | parserOptions: { 9 | ecmaVersion: 'latest' 10 | } 11 | } 12 | -------------------------------------------------------------------------------- /demo/.gitignore: -------------------------------------------------------------------------------- 1 | # Logs 2 | logs 3 | *.log 4 | npm-debug.log* 5 | yarn-debug.log* 6 | yarn-error.log* 7 | pnpm-debug.log* 8 | lerna-debug.log* 9 | 10 | node_modules 11 | .DS_Store 12 | dist 13 | dist-ssr 14 | coverage 15 | *.local 16 | 17 | /cypress/videos/ 18 | /cypress/screenshots/ 19 | 20 | # Editor directories and files 21 | .vscode/* 22 | !.vscode/extensions.json 23 | .idea 24 | *.suo 25 | *.ntvs* 26 | *.njsproj 27 | *.sln 28 | *.sw? 29 | 30 | *.tsbuildinfo 31 | -------------------------------------------------------------------------------- /demo/.vscode/extensions.json: -------------------------------------------------------------------------------- 1 | { 2 | "recommendations": [ 3 | "Vue.volar", 4 | "dbaeumer.vscode-eslint" 5 | ] 6 | } 7 | -------------------------------------------------------------------------------- /demo/README.md: -------------------------------------------------------------------------------- 1 | # Animate4vue Demo Frontend 2 | 3 | ## Recommended IDE Setup 4 | 5 | [VSCode](https://code.visualstudio.com/) + [Volar](https://marketplace.visualstudio.com/items?itemName=Vue.volar) (and disable Vetur). 6 | 7 | ## Customize configuration 8 | 9 | See [Vite Configuration Reference](https://vitejs.dev/config/). 10 | 11 | ## Project Setup 12 | 13 | ```sh 14 | npm install 15 | ``` 16 | 17 | ### Compile and Hot-Reload for Development 18 | 19 | ```sh 20 | npm run dev 21 | ``` 22 | 23 | ### Compile and Minify for Production 24 | 25 | ```sh 26 | npm run build 27 | ``` 28 | 29 | ### Lint with [ESLint](https://eslint.org/) 30 | 31 | ```sh 32 | npm run lint 33 | ``` 34 | -------------------------------------------------------------------------------- /demo/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | Animate4vue Demo 13 | 14 | 15 | 16 | 17 | 18 | 19 | 20 | 21 | 22 | -------------------------------------------------------------------------------- /demo/jsconfig.json: -------------------------------------------------------------------------------- 1 | { 2 | "compilerOptions": { 3 | "paths": { 4 | "@/*": ["./src/*"] 5 | } 6 | }, 7 | "exclude": ["node_modules", "dist"] 8 | } 9 | -------------------------------------------------------------------------------- /demo/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "animate4vue-demo", 3 | "version": "1.0.0", 4 | "private": true, 5 | "type": "module", 6 | "scripts": { 7 | "dev": "vite", 8 | "build": "vite build", 9 | "preview": "vite preview", 10 | "lint": "eslint . --ext .vue,.js,.jsx,.cjs,.mjs --fix --ignore-path .gitignore" 11 | }, 12 | "dependencies": { 13 | "@phosphor-icons/vue": "^2.2.1", 14 | "animate4vue": "^1.3.2", 15 | "pinia": "^2.1.7", 16 | "vue": "^3.4.29", 17 | "vue.animate": "file:.." 18 | }, 19 | "devDependencies": { 20 | "@vitejs/plugin-vue": "^5.0.5", 21 | "autoprefixer": "^10.4.20", 22 | "eslint": "^8.57.0", 23 | "eslint-plugin-vue": "^9.23.0", 24 | "postcss": "^8.4.41", 25 | "tailwindcss": "^3.4.7", 26 | "vite": "^5.3.1" 27 | } 28 | } 29 | -------------------------------------------------------------------------------- /demo/postcss.config.js: -------------------------------------------------------------------------------- 1 | export default { 2 | plugins: { 3 | tailwindcss: {}, 4 | autoprefixer: {}, 5 | }, 6 | } 7 | -------------------------------------------------------------------------------- /demo/public/favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/artisticLogicMK/animate4vue/a54fa85160e663bf0f5e9be7812b09888bd4d41c/demo/public/favicon.ico -------------------------------------------------------------------------------- /demo/public/social.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/artisticLogicMK/animate4vue/a54fa85160e663bf0f5e9be7812b09888bd4d41c/demo/public/social.png -------------------------------------------------------------------------------- /demo/src/App.vue: -------------------------------------------------------------------------------- 1 | 26 | 27 | 78 | 79 | 87 | -------------------------------------------------------------------------------- /demo/src/assets/css/main.css: -------------------------------------------------------------------------------- 1 | @tailwind base; 2 | @tailwind components; 3 | @tailwind utilities; 4 | 5 | :root { 6 | --main-color: #ffffff; 7 | --border-color: rgba(0,0,0,0.1); 8 | --text-color: #35495E; 9 | --text-color-light: #587da3; 10 | --green: #388E3C; 11 | --main-color-d: #171717; 12 | --border-color-d: rgba(255, 255, 255, 0.1); 13 | --text-color-d: #e0e0e0; 14 | --green-d: #41b883; 15 | } 16 | 17 | html, body{ 18 | width: 100%; 19 | height: 100%; 20 | font-family: 'Open Sans', sans-serif; 21 | overflow-x: hidden; 22 | } 23 | *{ 24 | outline: none; 25 | -webkit-tap-highlight-color: rgba(0,0,0,0); 26 | scroll-behavior: smooth; 27 | } 28 | *:focus { 29 | outline: 0 !important; 30 | box-shadow: none !important; 31 | } 32 | 33 | *::-webkit-scrollbar{ 34 | @apply w-[4px] sm:w-[6px] bg-transparent 35 | } 36 | *::-webkit-scrollbar-thumb{ 37 | @apply bg-black/[0.2] dark:bg-white/[0.2] rounded-full 38 | } 39 | *::-webkit-scrollbar-thumb:hover{ 40 | @apply bg-black/[0.4] dark:bg-white/[0.4] 41 | } 42 | 43 | /* apply mozila specific style to scrollbar */ 44 | @-moz-document url-prefix() { 45 | body * { 46 | scrollbar-width: thin; 47 | scrollbar-color: rgba(0,0,0,.2) transparent; 48 | } 49 | @media (prefers-color-scheme: dark) { 50 | body * { 51 | scrollbar-color: rgba(255,255,255,.2) transparent; 52 | } 53 | } 54 | } 55 | 56 | .lines { @apply border-[--border-color] dark:border-[--border-color-d]} -------------------------------------------------------------------------------- /demo/src/assets/img/animate4vue.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | 19 | 20 | 21 | 22 | 23 | 24 | -------------------------------------------------------------------------------- /demo/src/assets/img/bell.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/artisticLogicMK/animate4vue/a54fa85160e663bf0f5e9be7812b09888bd4d41c/demo/src/assets/img/bell.png -------------------------------------------------------------------------------- /demo/src/assets/img/pinia.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/artisticLogicMK/animate4vue/a54fa85160e663bf0f5e9be7812b09888bd4d41c/demo/src/assets/img/pinia.png -------------------------------------------------------------------------------- /demo/src/assets/img/vue.webp: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/artisticLogicMK/animate4vue/a54fa85160e663bf0f5e9be7812b09888bd4d41c/demo/src/assets/img/vue.webp -------------------------------------------------------------------------------- /demo/src/assets/img/vueanimate.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | 19 | 20 | -------------------------------------------------------------------------------- /demo/src/components/Animations.vue: -------------------------------------------------------------------------------- 1 | 161 | 162 | 192 | 193 | -------------------------------------------------------------------------------- /demo/src/components/AnimationsObject.vue: -------------------------------------------------------------------------------- 1 | 167 | 168 | 180 | 181 | -------------------------------------------------------------------------------- /demo/src/components/Attention.vue: -------------------------------------------------------------------------------- 1 | 17 | 18 | -------------------------------------------------------------------------------- /demo/src/components/AttentionObject.vue: -------------------------------------------------------------------------------- 1 | 39 | 40 | 54 | 55 | -------------------------------------------------------------------------------- /demo/src/components/Tab.vue: -------------------------------------------------------------------------------- 1 | 99 | 100 | 124 | 125 | -------------------------------------------------------------------------------- /demo/src/main.js: -------------------------------------------------------------------------------- 1 | import './assets/css/main.css' 2 | 3 | import { createApp } from 'vue' 4 | import { createPinia } from 'pinia' 5 | import App from './App.vue' 6 | 7 | const app = createApp(App) 8 | 9 | app.use(createPinia()) 10 | 11 | app.mount('#app') 12 | -------------------------------------------------------------------------------- /demo/src/stores/store.js: -------------------------------------------------------------------------------- 1 | import { ref, computed } from 'vue' 2 | import { defineStore } from 'pinia' 3 | 4 | export const useStore = defineStore('store', () => { 5 | const openTab = ref('animations') 6 | 7 | return { openTab } 8 | }) 9 | -------------------------------------------------------------------------------- /demo/src/utils/setTheme.js: -------------------------------------------------------------------------------- 1 | const setThemeMode = () => { 2 | 3 | const setTheme = (mode) => { 4 |     // append document body class name with specified theme (dark/light) 5 |     // app uses tailwindcss 'class' dark mode =>  6 |     document.documentElement.classList.remove("dark", "light") 7 |     document.documentElement.classList.add(mode) 8 |     document.querySelector('meta[name=theme-color]').setAttribute("content", mode == 'dark' ? "#171717" : "#ffffff") 9 | } 10 | 11 | // if theme item exist and is dark, & system dark mode on, set to dark theme 12 | if (localStorage.theme === 'dark' || window.matchMedia('(prefers-color-scheme: dark)').matches) { 13 |     setTheme('dark') 14 | } 15 | // if theme item not set, remove dark theme 16 | else { 17 |     setTheme('light') 18 | } 19 | 20 | } 21 | 22 | export default setThemeMode -------------------------------------------------------------------------------- /demo/tailwind.config.js: -------------------------------------------------------------------------------- 1 | /** @type {import('tailwindcss').Config} */ 2 | module.exports = { 3 | darkMode: 'class', 4 | content: [ 5 | "./index.html", 6 | "./src/**/*.{vue,js,ts,jsx,tsx}" 7 | ], 8 | theme: { 9 | screens: { 10 | 'mic': '281px', 11 | 'xs': '540px', 12 | 'sm': '640px', 13 | 'md': '768px', 14 | 'mdb': '900px', 15 | 'lg': '1024px', 16 | 'lgb': '1150px', 17 | 'xl': '1280px', 18 | '2xl': '1536px', 19 | } 20 | }, 21 | plugins: [], 22 | } 23 | -------------------------------------------------------------------------------- /demo/vite.config.js: -------------------------------------------------------------------------------- 1 | import { fileURLToPath, URL } from 'node:url' 2 | 3 | import { defineConfig } from 'vite' 4 | import vue from '@vitejs/plugin-vue' 5 | 6 | // https://vitejs.dev/config/ 7 | export default defineConfig({ 8 | plugins: [ 9 | vue(), 10 | ], 11 | resolve: { 12 | alias: { 13 | '@': fileURLToPath(new URL('./src', import.meta.url)) 14 | } 15 | } 16 | }) 17 | -------------------------------------------------------------------------------- /dist/animations/attentionSeekers/bounce.d.ts: -------------------------------------------------------------------------------- 1 | import ConstructAnimation from './constructAnimation'; 2 | import { AttentionOptions } from '../../utils/types'; 3 | export declare function bounce(element: HTMLElement | any, options: AttentionOptions): ConstructAnimation | undefined; 4 | -------------------------------------------------------------------------------- /dist/animations/attentionSeekers/bounce.js: -------------------------------------------------------------------------------- 1 | import { __assign } from "tslib"; 2 | import ConstructAnimation from './constructAnimation'; 3 | import { isValidAttOptions } from '../../utils/runtimeChecks'; 4 | import animationIsRunning from '../../utils/animationIsRunning'; 5 | export function bounce(element, options) { 6 | options = __assign({}, options); 7 | // Validate options object to ensure it contains only allowed properties 8 | if (!isValidAttOptions(options)) { 9 | console.error('Options object should only include: duration(number), delay(number), loop(boolean)'); 10 | return; 11 | } 12 | // Prevent starting a new animation if the current element is already animating 13 | if (animationIsRunning(element)) 14 | return; // exit 15 | return new ConstructAnimation(element, { 16 | keyframes: [ 17 | { y: 0, scaleY: 1, duration: 0.1, ease: "cubic-bezier(0.215, 0.61, 0.355, 1)" }, 18 | { y: -30, scaleY: 1.1, duration: 0.2, ease: "cubic-bezier(0.755, 0.05, 0.855, 0.06)" }, 19 | { y: -15, scaleY: 1.05, duration: 0.2, ease: "cubic-bezier(0.755, 0.05, 0.855, 0.06)" }, 20 | { y: 0, scaleY: 0.95, duration: 0.1, ease: "cubic-bezier(0.215, 0.61, 0.355, 1)" }, 21 | { y: -4, scaleY: 1.02, duration: 0.1 } 22 | ], 23 | repeat: options.loop ? -1 : 0, 24 | repeatDelay: options.delay ? options.delay : 0.111, 25 | duration: options.duration ? options.duration : 2, 26 | yolo: true 27 | }); 28 | } 29 | -------------------------------------------------------------------------------- /dist/animations/attentionSeekers/constructAnimation.d.ts: -------------------------------------------------------------------------------- 1 | import '../../utils/globalTypes'; 2 | declare class ConstructAnimation { 3 | private animation; 4 | private element; 5 | private options; 6 | constructor(element: HTMLElement | any, options: Record); 7 | kill(): this; 8 | } 9 | export default ConstructAnimation; 10 | -------------------------------------------------------------------------------- /dist/animations/attentionSeekers/constructAnimation.js: -------------------------------------------------------------------------------- 1 | import { __assign } from "tslib"; 2 | import gsap from 'gsap'; 3 | import '../../utils/globalTypes'; 4 | var ConstructAnimation = /** @class */ (function () { 5 | function ConstructAnimation(element, options) { 6 | var _this = this; 7 | this.element = element; 8 | this.options = options; 9 | this.animation = gsap.to(element, __assign(__assign({}, options), { onComplete: function () { 10 | // If animation is set to perform once, 11 | // Run kill method to clear animation 12 | if (options.repeat === 0) 13 | _this.kill(); 14 | } })); 15 | } 16 | ConstructAnimation.prototype.kill = function () { 17 | // Ensure the animation exists before calling kill 18 | if (this.animation) { 19 | this.animation.kill(); 20 | // Clear properties set by GSAP to revert element to its initial state 21 | gsap.set(this.element, { clearProps: "all" }); 22 | // Clear the global animation state when the animation is finished 23 | window.attAnimation = undefined; 24 | } 25 | return this; // Return `this` for chaining 26 | }; 27 | return ConstructAnimation; 28 | }()); 29 | export default ConstructAnimation; 30 | -------------------------------------------------------------------------------- /dist/animations/attentionSeekers/flash.d.ts: -------------------------------------------------------------------------------- 1 | import ConstructAnimation from './constructAnimation'; 2 | import { AttentionOptions } from '../../utils/types'; 3 | export declare function flash(element: HTMLElement | any, options: AttentionOptions): ConstructAnimation | undefined; 4 | -------------------------------------------------------------------------------- /dist/animations/attentionSeekers/flash.js: -------------------------------------------------------------------------------- 1 | import { __assign } from "tslib"; 2 | import ConstructAnimation from './constructAnimation'; 3 | import { isValidAttOptions } from '../../utils/runtimeChecks'; 4 | import animationIsRunning from '../../utils/animationIsRunning'; 5 | export function flash(element, options) { 6 | options = __assign({}, options); 7 | // Validate options object to ensure it contains only allowed properties 8 | if (!isValidAttOptions(options)) { 9 | console.error('Options object should only include: duration(number), delay(number), loop(boolean)'); 10 | return; 11 | } 12 | // Prevent starting a new animation if the current element is already animating 13 | if (animationIsRunning(element)) 14 | return; // exit 15 | return new ConstructAnimation(element, { 16 | keyframes: [ 17 | { opacity: 1, duration: 0.25 }, 18 | { opacity: 0, duration: 0.25 }, 19 | { opacity: 1, duration: 0.25 } 20 | ], 21 | repeat: options.loop ? -1 : 0, 22 | repeatDelay: options.delay ? options.delay : 0.111, 23 | duration: options.duration ? options.duration : 1.2, 24 | yolo: true 25 | }); 26 | } 27 | -------------------------------------------------------------------------------- /dist/animations/attentionSeekers/headShake.d.ts: -------------------------------------------------------------------------------- 1 | import ConstructAnimation from './constructAnimation'; 2 | import { AttentionOptions } from '../../utils/types'; 3 | export declare function headShake(element: HTMLElement | any, options: AttentionOptions): ConstructAnimation | undefined; 4 | -------------------------------------------------------------------------------- /dist/animations/attentionSeekers/headShake.js: -------------------------------------------------------------------------------- 1 | import { __assign } from "tslib"; 2 | import ConstructAnimation from './constructAnimation'; 3 | import { isValidAttOptions } from '../../utils/runtimeChecks'; 4 | import animationIsRunning from '../../utils/animationIsRunning'; 5 | export function headShake(element, options) { 6 | options = __assign({}, options); 7 | // Validate options object to ensure it contains only allowed properties 8 | if (!isValidAttOptions(options)) { 9 | console.error('Options object should only include: duration(number), delay(number), loop(boolean)'); 10 | return; 11 | } 12 | // Prevent starting a new animation if the current element is already animating 13 | if (animationIsRunning(element)) 14 | return; // exit 15 | return new ConstructAnimation(element, { 16 | keyframes: [ 17 | { transform: "translateX(0) rotateY(0deg)", duration: 0.065 }, 18 | { transform: "translateX(-6px) rotateY(-9deg)", duration: 0.065 }, 19 | { transform: "translateX(5px) rotateY(7deg)", duration: 0.12 }, 20 | { transform: "translateX(-3px) rotateY(-5deg)", duration: 0.12 }, 21 | { transform: "translateX(2px) rotateY(3deg)", duration: 0.12 }, 22 | { transform: "translateX(0) rotateY(0deg)", duration: 0.18 } 23 | ], 24 | ease: "power1.inOut", 25 | repeat: options.loop ? -1 : 0, 26 | repeatDelay: options.delay ? options.delay : 0.111, 27 | duration: options.duration ? options.duration : 1.5, 28 | yolo: true 29 | }); 30 | } 31 | -------------------------------------------------------------------------------- /dist/animations/attentionSeekers/heartBeat.d.ts: -------------------------------------------------------------------------------- 1 | import ConstructAnimation from './constructAnimation'; 2 | import { AttentionOptions } from '../../utils/types'; 3 | export declare function heartBeat(element: HTMLElement | any, options: AttentionOptions): ConstructAnimation | undefined; 4 | -------------------------------------------------------------------------------- /dist/animations/attentionSeekers/heartBeat.js: -------------------------------------------------------------------------------- 1 | import { __assign } from "tslib"; 2 | import ConstructAnimation from './constructAnimation'; 3 | import { isValidAttOptions } from '../../utils/runtimeChecks'; 4 | import animationIsRunning from '../../utils/animationIsRunning'; 5 | export function heartBeat(element, options) { 6 | options = __assign({}, options); 7 | // Validate options object to ensure it contains only allowed properties 8 | if (!isValidAttOptions(options)) { 9 | console.error('Options object should only include: duration(number), delay(number), loop(boolean)'); 10 | return; 11 | } 12 | // Prevent starting a new animation if the current element is already animating 13 | if (animationIsRunning(element)) 14 | return; // exit 15 | return new ConstructAnimation(element, { 16 | keyframes: [ 17 | { scale: 1, duration: 0.14 }, 18 | { scale: 1.3, duration: 0.14 }, 19 | { scale: 1, duration: 0.14 }, 20 | { scale: 1.3, duration: 0.28 }, 21 | { scale: 1, duration: 0.3 } 22 | ], 23 | ease: "power1.inOut", 24 | repeat: options.loop ? -1 : 0, 25 | repeatDelay: options.delay ? options.delay : 0.111, 26 | duration: options.duration ? options.duration : 1.5, 27 | yolo: true 28 | }); 29 | } 30 | -------------------------------------------------------------------------------- /dist/animations/attentionSeekers/jello.d.ts: -------------------------------------------------------------------------------- 1 | import ConstructAnimation from './constructAnimation'; 2 | import { AttentionOptions } from '../../utils/types'; 3 | export declare function jello(element: HTMLElement | any, options: AttentionOptions): ConstructAnimation | undefined; 4 | -------------------------------------------------------------------------------- /dist/animations/attentionSeekers/jello.js: -------------------------------------------------------------------------------- 1 | import { __assign } from "tslib"; 2 | import ConstructAnimation from './constructAnimation'; 3 | import { isValidAttOptions } from '../../utils/runtimeChecks'; 4 | import animationIsRunning from '../../utils/animationIsRunning'; 5 | export function jello(element, options) { 6 | options = __assign({}, options); 7 | // Validate options object to ensure it contains only allowed properties 8 | if (!isValidAttOptions(options)) { 9 | console.error('Options object should only include: duration(number), delay(number), loop(boolean)'); 10 | return; 11 | } 12 | // Prevent starting a new animation if the current element is already animating 13 | if (animationIsRunning(element)) 14 | return; // exit 15 | return new ConstructAnimation(element, { 16 | keyframes: [ 17 | { skewX: "-12.5deg", skewY: "-12.5deg", ease: "none", duration: 0.222 }, 18 | { skewX: "6.25deg", skewY: "6.25deg", ease: "none", duration: 0.111 }, 19 | { skewX: "-3.125deg", skewY: "-3.125deg", ease: "none", duration: 0.111 }, 20 | { skewX: "1.5625deg", skewY: "1.5625deg", ease: "none", duration: 0.111 }, 21 | { skewX: "-0.78125deg", skewY: "-0.78125deg", ease: "none", duration: 0.111 }, 22 | { skewX: "0.390625deg", skewY: "0.390625deg", ease: "none", duration: 0.111 }, 23 | { skewX: "-0.1953125deg", skewY: "-0.1953125deg", ease: "none", duration: 0.111 } 24 | ], 25 | repeat: options.loop ? -1 : 0, 26 | repeatDelay: options.delay ? options.delay : 0.111, 27 | duration: options.duration ? options.duration : 1, 28 | yolo: true 29 | }); 30 | } 31 | -------------------------------------------------------------------------------- /dist/animations/attentionSeekers/puff.d.ts: -------------------------------------------------------------------------------- 1 | import ConstructAnimation from './constructAnimation'; 2 | import { AttentionOptions } from '../../utils/types'; 3 | export declare function puff(element: HTMLElement | any, options: AttentionOptions): ConstructAnimation | undefined; 4 | -------------------------------------------------------------------------------- /dist/animations/attentionSeekers/puff.js: -------------------------------------------------------------------------------- 1 | import { __assign } from "tslib"; 2 | import ConstructAnimation from './constructAnimation'; 3 | import { isValidAttOptions } from '../../utils/runtimeChecks'; 4 | import animationIsRunning from '../../utils/animationIsRunning'; 5 | export function puff(element, options) { 6 | options = __assign({}, options); 7 | // Validate options object to ensure it contains only allowed properties 8 | if (!isValidAttOptions(options)) { 9 | console.error('Options object should only include: duration(number), delay(number), loop(boolean)'); 10 | return; 11 | } 12 | // Prevent starting a new animation if the current element is already animating 13 | if (animationIsRunning(element)) 14 | return; // exit 15 | return new ConstructAnimation(element, { 16 | keyframes: [ 17 | { 18 | scale: 1.5, 19 | filter: "blur(2px)", 20 | transformOrigin: "50% 50%", 21 | opacity: 0, 22 | }, 23 | { 24 | scale: 1, 25 | filter: "blur(0px)", 26 | transformOrigin: "none", 27 | opacity: 1, 28 | }, 29 | ], 30 | ease: "power1.inOut", 31 | repeat: options.loop ? -1 : 0, 32 | repeatDelay: options.delay ? options.delay : 0.111, 33 | duration: options.duration ? options.duration : 1.5, 34 | yolo: true 35 | }); 36 | } 37 | -------------------------------------------------------------------------------- /dist/animations/attentionSeekers/pulse.d.ts: -------------------------------------------------------------------------------- 1 | import ConstructAnimation from './constructAnimation'; 2 | import { AttentionOptions } from '../../utils/types'; 3 | export declare function pulse(element: HTMLElement | any, options: AttentionOptions): ConstructAnimation | undefined; 4 | -------------------------------------------------------------------------------- /dist/animations/attentionSeekers/pulse.js: -------------------------------------------------------------------------------- 1 | import { __assign } from "tslib"; 2 | import ConstructAnimation from './constructAnimation'; 3 | import { isValidAttOptions } from '../../utils/runtimeChecks'; 4 | import animationIsRunning from '../../utils/animationIsRunning'; 5 | export function pulse(element, options) { 6 | options = __assign({}, options); 7 | // Validate options object to ensure it contains only allowed properties 8 | if (!isValidAttOptions(options)) { 9 | console.error('Options object should only include: duration(number), delay(number), loop(boolean)'); 10 | return; 11 | } 12 | // Prevent starting a new animation if the current element is already animating 13 | if (animationIsRunning(element)) 14 | return; // exit 15 | return new ConstructAnimation(element, { 16 | scale: 1.05, 17 | ease: "power1.inOut", 18 | repeat: options.loop ? -1 : 0, 19 | repeatDelay: options.delay ? options.delay : 0.111, 20 | duration: options.duration ? options.duration : 1.5, 21 | yolo: true 22 | }); 23 | } 24 | -------------------------------------------------------------------------------- /dist/animations/attentionSeekers/rubberBand.d.ts: -------------------------------------------------------------------------------- 1 | import ConstructAnimation from './constructAnimation'; 2 | import { AttentionOptions } from '../../utils/types'; 3 | export declare function rubberBand(element: HTMLElement | any, options: AttentionOptions): ConstructAnimation | undefined; 4 | -------------------------------------------------------------------------------- /dist/animations/attentionSeekers/rubberBand.js: -------------------------------------------------------------------------------- 1 | import { __assign } from "tslib"; 2 | import ConstructAnimation from './constructAnimation'; 3 | import { isValidAttOptions } from '../../utils/runtimeChecks'; 4 | import animationIsRunning from '../../utils/animationIsRunning'; 5 | export function rubberBand(element, options) { 6 | options = __assign({}, options); 7 | // Validate options object to ensure it contains only allowed properties 8 | if (!isValidAttOptions(options)) { 9 | console.error('Options object should only include: duration(number), delay(number), loop(boolean)'); 10 | return; 11 | } 12 | // Prevent starting a new animation if the current element is already animating 13 | if (animationIsRunning(element)) 14 | return; // exit 15 | return new ConstructAnimation(element, { 16 | keyframes: [ 17 | { scaleX: 1, scaleY: 1, duration: 0.1 }, 18 | { scaleX: 1.25, scaleY: 0.75, duration: 0.1 }, 19 | { scaleX: 0.75, scaleY: 1.25, duration: 0.1 }, 20 | { scaleX: 1.15, scaleY: 0.85, duration: 0.1 }, 21 | { scaleX: 0.95, scaleY: 1.05, duration: 0.1 }, 22 | { scaleX: 1.05, scaleY: 0.95, duration: 0.1 }, 23 | { scaleX: 1, scaleY: 1, duration: 0.1 } 24 | ], 25 | ease: "power1.inOut", 26 | repeat: options.loop ? -1 : 0, 27 | repeatDelay: options.delay ? options.delay : 0.111, 28 | duration: options.duration ? options.duration : 2, 29 | yolo: true 30 | }); 31 | } 32 | -------------------------------------------------------------------------------- /dist/animations/attentionSeekers/shakeHorizontal.d.ts: -------------------------------------------------------------------------------- 1 | import ConstructAnimation from './constructAnimation'; 2 | import { AttentionOptions } from '../../utils/types'; 3 | export declare function shakeHorizontal(element: HTMLElement | any, options: AttentionOptions): ConstructAnimation | undefined; 4 | -------------------------------------------------------------------------------- /dist/animations/attentionSeekers/shakeHorizontal.js: -------------------------------------------------------------------------------- 1 | import { __assign } from "tslib"; 2 | import ConstructAnimation from './constructAnimation'; 3 | import { isValidAttOptions } from '../../utils/runtimeChecks'; 4 | import animationIsRunning from '../../utils/animationIsRunning'; 5 | export function shakeHorizontal(element, options) { 6 | options = __assign({}, options); 7 | // Validate options object to ensure it contains only allowed properties 8 | if (!isValidAttOptions(options)) { 9 | console.error('Options object should only include: duration(number), delay(number), loop(boolean)'); 10 | return; 11 | } 12 | // Prevent starting a new animation if the current element is already animating 13 | if (animationIsRunning(element)) 14 | return; // exit 15 | return new ConstructAnimation(element, { 16 | keyframes: [ 17 | { x: 0, duration: 0.1 }, // 0% 18 | { x: -10, duration: 0.1 }, // 10% 19 | { x: 10, duration: 0.1 }, // 20% 20 | { x: -10, duration: 0.1 }, // 30% 21 | { x: 10, duration: 0.1 }, // 40% 22 | { x: -10, duration: 0.1 }, // 50% 23 | { x: 10, duration: 0.1 }, // 60% 24 | { x: -10, duration: 0.1 }, // 70% 25 | { x: 10, duration: 0.1 }, // 80% 26 | { x: -10, duration: 0.1 }, // 90% 27 | { x: 0, duration: 0.1 } // 100% 28 | ], 29 | ease: "power1.inOut", 30 | repeat: options.loop ? -1 : 0, 31 | repeatDelay: options.delay ? options.delay : 0.111, 32 | duration: options.duration ? options.duration : 2, 33 | yolo: true 34 | }); 35 | } 36 | -------------------------------------------------------------------------------- /dist/animations/attentionSeekers/shakeVertical.d.ts: -------------------------------------------------------------------------------- 1 | import ConstructAnimation from './constructAnimation'; 2 | import { AttentionOptions } from '../../utils/types'; 3 | export declare function shakeVertical(element: HTMLElement | any, options: AttentionOptions): ConstructAnimation | undefined; 4 | -------------------------------------------------------------------------------- /dist/animations/attentionSeekers/shakeVertical.js: -------------------------------------------------------------------------------- 1 | import { __assign } from "tslib"; 2 | import ConstructAnimation from './constructAnimation'; 3 | import { isValidAttOptions } from '../../utils/runtimeChecks'; 4 | import animationIsRunning from '../../utils/animationIsRunning'; 5 | export function shakeVertical(element, options) { 6 | options = __assign({}, options); 7 | // Validate options object to ensure it contains only allowed properties 8 | if (!isValidAttOptions(options)) { 9 | console.error('Options object should only include: duration(number), delay(number), loop(boolean)'); 10 | return; 11 | } 12 | // Prevent starting a new animation if the current element is already animating 13 | if (animationIsRunning(element)) 14 | return; // exit 15 | return new ConstructAnimation(element, { 16 | keyframes: [ 17 | { y: 0, duration: 0.1 }, // 0% 18 | { y: -10, duration: 0.1 }, // 10% 19 | { y: 10, duration: 0.1 }, // 20% 20 | { y: -10, duration: 0.1 }, // 30% 21 | { y: 10, duration: 0.1 }, // 40% 22 | { y: -10, duration: 0.1 }, // 50% 23 | { y: 10, duration: 0.1 }, // 60% 24 | { y: -10, duration: 0.1 }, // 70% 25 | { y: 10, duration: 0.1 }, // 80% 26 | { y: -10, duration: 0.1 }, // 90% 27 | { y: 0, duration: 0.1 } // 100% 28 | ], 29 | ease: "power1.inOut", 30 | repeat: options.loop ? -1 : 0, 31 | repeatDelay: options.delay ? options.delay : 0.111, 32 | duration: options.duration ? options.duration : 2, 33 | yolo: true 34 | }); 35 | } 36 | -------------------------------------------------------------------------------- /dist/animations/attentionSeekers/spin.d.ts: -------------------------------------------------------------------------------- 1 | import ConstructAnimation from './constructAnimation'; 2 | import { AttentionOptions } from '../../utils/types'; 3 | export declare function spin(element: HTMLElement | any, options: AttentionOptions): ConstructAnimation | undefined; 4 | -------------------------------------------------------------------------------- /dist/animations/attentionSeekers/spin.js: -------------------------------------------------------------------------------- 1 | import { __assign } from "tslib"; 2 | import ConstructAnimation from './constructAnimation'; 3 | import { isValidAttOptions } from '../../utils/runtimeChecks'; 4 | import animationIsRunning from '../../utils/animationIsRunning'; 5 | export function spin(element, options) { 6 | options = __assign({}, options); 7 | // Validate options object to ensure it contains only allowed properties 8 | if (!isValidAttOptions(options)) { 9 | console.error('Options object should only include: duration(number), delay(number), loop(boolean)'); 10 | return; 11 | } 12 | // Prevent starting a new animation if the current element is already animating 13 | if (animationIsRunning(element)) 14 | return; // exit 15 | return new ConstructAnimation(element, { 16 | rotate: 360, 17 | ease: "power1.inOut", 18 | repeat: options.loop ? -1 : 0, 19 | repeatDelay: options.delay ? options.delay : 0.111, 20 | duration: options.duration ? options.duration : 1.6, 21 | yolo: true 22 | }); 23 | } 24 | -------------------------------------------------------------------------------- /dist/animations/attentionSeekers/swing.d.ts: -------------------------------------------------------------------------------- 1 | import ConstructAnimation from './constructAnimation'; 2 | import { AttentionOptions } from '../../utils/types'; 3 | export declare function swing(element: HTMLElement | any, options: AttentionOptions): ConstructAnimation | undefined; 4 | -------------------------------------------------------------------------------- /dist/animations/attentionSeekers/swing.js: -------------------------------------------------------------------------------- 1 | import { __assign } from "tslib"; 2 | import ConstructAnimation from './constructAnimation'; 3 | import { isValidAttOptions } from '../../utils/runtimeChecks'; 4 | import animationIsRunning from '../../utils/animationIsRunning'; 5 | export function swing(element, options) { 6 | options = __assign({}, options); 7 | // Validate options object to ensure it contains only allowed properties 8 | if (!isValidAttOptions(options)) { 9 | console.error('Options object should only include: duration(number), delay(number), loop(boolean)'); 10 | return; 11 | } 12 | // Prevent starting a new animation if the current element is already animating 13 | if (animationIsRunning(element)) 14 | return; // exit 15 | return new ConstructAnimation(element, { 16 | rotation: 15, 17 | transformOrigin: 'top center', 18 | keyframes: [ 19 | { rotation: 15, duration: 0.2 }, 20 | { rotation: -10, duration: 0.2 }, 21 | { rotation: 5, duration: 0.2 }, 22 | { rotation: -5, duration: 0.2 }, 23 | { rotation: 0, duration: 0.2 } 24 | ], 25 | ease: "power1.inOut", 26 | repeat: options.loop ? -1 : 0, 27 | repeatDelay: options.delay ? options.delay : 0.111, 28 | duration: options.duration ? options.duration : 1.2, 29 | yolo: true 30 | }); 31 | } 32 | -------------------------------------------------------------------------------- /dist/animations/attentionSeekers/tada.d.ts: -------------------------------------------------------------------------------- 1 | import ConstructAnimation from './constructAnimation'; 2 | import { AttentionOptions } from '../../utils/types'; 3 | export declare function tada(element: HTMLElement | any, options: AttentionOptions): ConstructAnimation | undefined; 4 | -------------------------------------------------------------------------------- /dist/animations/attentionSeekers/tada.js: -------------------------------------------------------------------------------- 1 | import { __assign } from "tslib"; 2 | import ConstructAnimation from './constructAnimation'; 3 | import { isValidAttOptions } from '../../utils/runtimeChecks'; 4 | import animationIsRunning from '../../utils/animationIsRunning'; 5 | export function tada(element, options) { 6 | options = __assign({}, options); 7 | // Validate options object to ensure it contains only allowed properties 8 | if (!isValidAttOptions(options)) { 9 | console.error('Options object should only include: duration(number), delay(number), loop(boolean)'); 10 | return; 11 | } 12 | // Prevent starting a new animation if the current element is already animating 13 | if (animationIsRunning(element)) 14 | return; // exit 15 | return new ConstructAnimation(element, { 16 | keyframes: [ 17 | { scaleX: 1, scaleY: 1, rotationZ: 0, duration: 0.2 }, 18 | { scaleX: 0.9, scaleY: 0.9, rotationZ: -3, duration: 0.2 }, 19 | { scaleX: 1.1, scaleY: 1.1, rotationZ: 3, duration: 0.2 }, 20 | { scaleX: 1.1, scaleY: 1.1, rotationZ: -3, duration: 0.2 }, 21 | { scaleX: 1.1, scaleY: 1.1, rotationZ: 3, duration: 0.2 }, 22 | { scaleX: 1.1, scaleY: 1.1, rotationZ: -3, duration: 0.2 }, 23 | { scaleX: 1, scaleY: 1, rotationZ: 0, duration: 0.2 } 24 | ], 25 | transformOrigin: 'center center', 26 | ease: "power1.inOut", 27 | repeat: options.loop ? -1 : 0, 28 | repeatDelay: options.delay ? options.delay : 0.111, 29 | duration: options.duration ? options.duration : 1.4, 30 | yolo: true 31 | }); 32 | } 33 | -------------------------------------------------------------------------------- /dist/animations/attentionSeekers/wobble.d.ts: -------------------------------------------------------------------------------- 1 | import ConstructAnimation from './constructAnimation'; 2 | import { AttentionOptions } from '../../utils/types'; 3 | export declare function wobble(element: HTMLElement | any, options: AttentionOptions): ConstructAnimation | undefined; 4 | -------------------------------------------------------------------------------- /dist/animations/attentionSeekers/wobble.js: -------------------------------------------------------------------------------- 1 | import { __assign } from "tslib"; 2 | import ConstructAnimation from './constructAnimation'; 3 | import { isValidAttOptions } from '../../utils/runtimeChecks'; 4 | import animationIsRunning from '../../utils/animationIsRunning'; 5 | export function wobble(element, options) { 6 | options = __assign({}, options); 7 | // Validate options object to ensure it contains only allowed properties 8 | if (!isValidAttOptions(options)) { 9 | console.error('Options object should only include: duration(number), delay(number), loop(boolean)'); 10 | return; 11 | } 12 | // Prevent starting a new animation if the current element is already animating 13 | if (animationIsRunning(element)) 14 | return; // exit 15 | return new ConstructAnimation(element, { 16 | keyframes: [ 17 | { xPercent: 0, rotation: 0, duration: 0.2 }, 18 | { xPercent: -25, rotation: -5, duration: 0.15 }, 19 | { xPercent: 20, rotation: 3, duration: 0.15 }, 20 | { xPercent: -15, rotation: -3, duration: 0.15 }, 21 | { xPercent: 10, rotation: 2, duration: 0.15 }, 22 | { xPercent: -5, rotation: -1, duration: 0.15 }, 23 | { xPercent: 0, rotation: 0, duration: 0.2 } 24 | ], 25 | transformOrigin: 'center center', 26 | ease: "power1.inOut", 27 | repeat: options.loop ? -1 : 0, 28 | repeatDelay: options.delay ? options.delay : 0.111, 29 | duration: options.duration ? options.duration : 2, 30 | yolo: true 31 | }); 32 | } 33 | -------------------------------------------------------------------------------- /dist/animations/blur.d.ts: -------------------------------------------------------------------------------- 1 | import { Options } from '../utils/types'; 2 | declare const blurIn: (target: HTMLElement | any, done: (() => void), options: Options) => Promise; 3 | declare const blurOut: (target: HTMLElement | any, done: (() => void), options: Options) => Promise; 4 | export { blurIn, blurOut }; 5 | -------------------------------------------------------------------------------- /dist/animations/blur.js: -------------------------------------------------------------------------------- 1 | import animate from '../utils/animate'; 2 | var blurOptions = { 3 | opacity: 0.5, 4 | filter: "blur(6px)" 5 | }; 6 | var blurIn = function (target, done, options) { 7 | return animate('in', target, done, options, blurOptions); 8 | }; 9 | var blurOut = function (target, done, options) { 10 | return animate('out', target, done, options, blurOptions); 11 | }; 12 | export { blurIn, blurOut }; 13 | -------------------------------------------------------------------------------- /dist/animations/customAnimation.d.ts: -------------------------------------------------------------------------------- 1 | /** 2 | * Handles custom animations for entering and leaving a target element. 3 | * 4 | * @param {HTMLElement | any} target - The element or target to apply the animation to. 5 | * @param {() => void} done - A callback function to be called when the animation is complete. 6 | * @param {"enter" | "leave"} direction - Specifies whether the animation is for entering or leaving. 7 | * @param {object} config - Configuration object containing animation properties. 8 | * @returns {Promise} - A promise that resolves when the animation is complete. 9 | */ 10 | declare const customAnimation: (target: HTMLElement | any, done: (() => void), direction: "enter" | "leave", config: object) => Promise; 11 | export default customAnimation; 12 | -------------------------------------------------------------------------------- /dist/animations/customAnimation.js: -------------------------------------------------------------------------------- 1 | /** 2 | * Handles custom animations for entering and leaving a target element. 3 | * 4 | * @param {HTMLElement | any} target - The element or target to apply the animation to. 5 | * @param {() => void} done - A callback function to be called when the animation is complete. 6 | * @param {"enter" | "leave"} direction - Specifies whether the animation is for entering or leaving. 7 | * @param {object} config - Configuration object containing animation properties. 8 | * @returns {Promise} - A promise that resolves when the animation is complete. 9 | */ 10 | import { gsap } from 'gsap'; 11 | var customAnimation = function (target, done, direction, config) { 12 | return new Promise(function (resolve, reject) { 13 | try { 14 | // Initialize timeline animation of element 15 | var timeline = gsap.timeline(); 16 | // Perform the animation based on the direction 'enter' or 'leave' 17 | if (direction === 'enter') { // Animation to enter 18 | // Animate from the target state to the default state (e.g. fade in) 19 | timeline.from(target, config); 20 | timeline.to(target, { onComplete: function () { 21 | done(); // Let vue know animation is complete 22 | resolve(); // Resolve promise 23 | } 24 | }); 25 | } 26 | else { 27 | // Animate from the default state to the target state (e.g. fade in) 28 | timeline.to(target, config); 29 | timeline.to(target, { 30 | onStart: function () { return done(); }, // Let vue know animation is complete 31 | onComplete: function () { return resolve(); } // Resolve promise 32 | }); 33 | } 34 | } 35 | catch (error) { 36 | reject('Animate.vue: ' + error); 37 | } 38 | }); 39 | }; 40 | export default customAnimation; 41 | -------------------------------------------------------------------------------- /dist/animations/fade.d.ts: -------------------------------------------------------------------------------- 1 | import { Options } from '../utils/types'; 2 | declare const fadeIn: (target: HTMLElement | any, done: (() => void), options: Options) => Promise; 3 | declare const fadeOut: (target: HTMLElement | any, done: (() => void), options: Options) => Promise; 4 | export { fadeIn, fadeOut }; 5 | -------------------------------------------------------------------------------- /dist/animations/fade.js: -------------------------------------------------------------------------------- 1 | import animate from '../utils/animate'; 2 | // entrance animations 3 | var fadeIn = function (target, done, options) { 4 | return animate('in', target, done, options); 5 | }; 6 | // leaving animations 7 | var fadeOut = function (target, done, options) { 8 | return animate('out', target, done, options); 9 | }; 10 | export { fadeIn, fadeOut }; 11 | -------------------------------------------------------------------------------- /dist/animations/flip.d.ts: -------------------------------------------------------------------------------- 1 | import { Options } from '../utils/types'; 2 | declare const flipInHorizontal: (target: HTMLElement | any, done: (() => void), options: Options) => Promise; 3 | declare const flipOutHorizontal: (target: HTMLElement | any, done: (() => void), options: Options) => Promise; 4 | declare const flipInVertical: (target: HTMLElement | any, done: (() => void), options: Options) => Promise; 5 | declare const flipOutVertical: (target: HTMLElement | any, done: (() => void), options: Options) => Promise; 6 | declare const flipInHorizontalRight: (target: HTMLElement | any, done: (() => void), options: Options) => Promise; 7 | declare const flipInHorizontalLeft: (target: HTMLElement | any, done: (() => void), options: Options) => Promise; 8 | declare const flipInHorizontalTop: (target: HTMLElement | any, done: (() => void), options: Options) => Promise; 9 | declare const flipInHorizontalBottom: (target: HTMLElement | any, done: (() => void), options: Options) => Promise; 10 | declare const flipOutHorizontalRight: (target: HTMLElement | any, done: (() => void), options: Options) => Promise; 11 | declare const flipOutHorizontalLeft: (target: HTMLElement | any, done: (() => void), options: Options) => Promise; 12 | declare const flipOutHorizontalTop: (target: HTMLElement | any, done: (() => void), options: Options) => Promise; 13 | declare const flipOutHorizontalBottom: (target: HTMLElement | any, done: (() => void), options: Options) => Promise; 14 | declare const flipInVerticalRight: (target: HTMLElement | any, done: (() => void), options: Options) => Promise; 15 | declare const flipInVerticalLeft: (target: HTMLElement | any, done: (() => void), options: Options) => Promise; 16 | declare const flipInVerticalTop: (target: HTMLElement | any, done: (() => void), options: Options) => Promise; 17 | declare const flipInVerticalBottom: (target: HTMLElement | any, done: (() => void), options: Options) => Promise; 18 | declare const flipOutVerticalRight: (target: HTMLElement | any, done: (() => void), options: Options) => Promise; 19 | declare const flipOutVerticalLeft: (target: HTMLElement | any, done: (() => void), options: Options) => Promise; 20 | declare const flipOutVerticalTop: (target: HTMLElement | any, done: (() => void), options: Options) => Promise; 21 | declare const flipOutVerticalBottom: (target: HTMLElement | any, done: (() => void), options: Options) => Promise; 22 | export { flipInHorizontal, flipOutHorizontal, flipInVertical, flipOutVertical, flipInHorizontalRight, flipInHorizontalLeft, flipInHorizontalTop, flipInHorizontalBottom, flipOutHorizontalRight, flipOutHorizontalLeft, flipOutHorizontalTop, flipOutHorizontalBottom, flipInVerticalRight, flipInVerticalLeft, flipInVerticalTop, flipInVerticalBottom, flipOutVerticalRight, flipOutVerticalLeft, flipOutVerticalTop, flipOutVerticalBottom }; 23 | -------------------------------------------------------------------------------- /dist/animations/flip.js: -------------------------------------------------------------------------------- 1 | import animate from '../utils/animate'; 2 | import setOffset from '../utils/setOffset'; 3 | var flip = function (direction) { 4 | var _a; 5 | direction = direction === "horizontal" ? "rotationY" : "rotationX"; 6 | return _a = { 7 | perspective: 400 8 | }, 9 | _a[direction] = 180, 10 | _a; 11 | }; 12 | var flipInHorizontal = function (target, done, options) { 13 | return animate('in', target, done, options, flip('horizontal')); 14 | }; 15 | var flipOutHorizontal = function (target, done, options) { 16 | return animate('out', target, done, options, flip('horizontal')); 17 | }; 18 | var flipInVertical = function (target, done, options) { 19 | return animate('in', target, done, options, flip('vertical')); 20 | }; 21 | var flipOutVertical = function (target, done, options) { 22 | return animate('out', target, done, options, flip('vertical')); 23 | }; 24 | var flipInHorizontalRight = function (target, done, options) { 25 | var offset = setOffset(target, options); 26 | return animate('in', target, done, options, Object.assign(flip('horizontal'), { x: offset ? "".concat(offset) : '100%' })); 27 | }; 28 | var flipInHorizontalLeft = function (target, done, options) { 29 | var offset = setOffset(target, options); 30 | return animate('in', target, done, options, Object.assign(flip('horizontal'), { x: offset ? "-".concat(offset) : '-100%' })); 31 | }; 32 | var flipInHorizontalTop = function (target, done, options) { 33 | var offset = setOffset(target, options); 34 | return animate('in', target, done, options, Object.assign(flip('horizontal'), { y: offset ? "-".concat(offset) : '-100%' })); 35 | }; 36 | var flipInHorizontalBottom = function (target, done, options) { 37 | var offset = setOffset(target, options); 38 | return animate('in', target, done, options, Object.assign(flip('horizontal'), { y: offset ? "".concat(offset) : '100%' })); 39 | }; 40 | var flipOutHorizontalRight = function (target, done, options) { 41 | var offset = setOffset(target, options); 42 | return animate('out', target, done, options, Object.assign(flip('horizontal'), { x: offset ? "".concat(offset) : '100%' })); 43 | }; 44 | var flipOutHorizontalLeft = function (target, done, options) { 45 | var offset = setOffset(target, options); 46 | return animate('out', target, done, options, Object.assign(flip('horizontal'), { x: offset ? "-".concat(offset) : '-100%' })); 47 | }; 48 | var flipOutHorizontalTop = function (target, done, options) { 49 | var offset = setOffset(target, options); 50 | return animate('out', target, done, options, Object.assign(flip('horizontal'), { y: offset ? "-".concat(offset) : '-100%' })); 51 | }; 52 | var flipOutHorizontalBottom = function (target, done, options) { 53 | var offset = setOffset(target, options); 54 | return animate('out', target, done, options, Object.assign(flip('horizontal'), { y: offset ? "".concat(offset) : '100%' })); 55 | }; 56 | // flip verticals 57 | var flipInVerticalRight = function (target, done, options) { 58 | var offset = setOffset(target, options); 59 | return animate('in', target, done, options, Object.assign(flip('vertical'), { x: offset ? "-".concat(offset) : '100%' })); 60 | }; 61 | var flipInVerticalLeft = function (target, done, options) { 62 | var offset = setOffset(target, options); 63 | return animate('in', target, done, options, Object.assign(flip('vertical'), { x: offset ? "-".concat(offset) : '-100%' })); 64 | }; 65 | var flipInVerticalTop = function (target, done, options) { 66 | var offset = setOffset(target, options); 67 | return animate('in', target, done, options, Object.assign(flip('vertical'), { y: offset ? "-".concat(offset) : '-100%' })); 68 | }; 69 | var flipInVerticalBottom = function (target, done, options) { 70 | var offset = setOffset(target, options); 71 | return animate('in', target, done, options, Object.assign(flip('vertical'), { y: offset ? "".concat(offset) : '100%' })); 72 | }; 73 | var flipOutVerticalRight = function (target, done, options) { 74 | var offset = setOffset(target, options); 75 | return animate('out', target, done, options, Object.assign(flip('vertical'), { x: offset ? "".concat(offset) : '100%' })); 76 | }; 77 | var flipOutVerticalLeft = function (target, done, options) { 78 | var offset = setOffset(target, options); 79 | return animate('out', target, done, options, Object.assign(flip('vertical'), { x: offset ? "-".concat(offset) : '-100%' })); 80 | }; 81 | var flipOutVerticalTop = function (target, done, options) { 82 | var offset = setOffset(target, options); 83 | return animate('out', target, done, options, Object.assign(flip('vertical'), { y: offset ? "-".concat(offset) : '-100%' })); 84 | }; 85 | var flipOutVerticalBottom = function (target, done, options) { 86 | var offset = setOffset(target, options); 87 | return animate('out', target, done, options, Object.assign(flip('vertical'), { y: offset ? "".concat(offset) : '100%' })); 88 | }; 89 | export { flipInHorizontal, flipOutHorizontal, flipInVertical, flipOutVertical, flipInHorizontalRight, flipInHorizontalLeft, flipInHorizontalTop, flipInHorizontalBottom, flipOutHorizontalRight, flipOutHorizontalLeft, flipOutHorizontalTop, flipOutHorizontalBottom, flipInVerticalRight, flipInVerticalLeft, flipInVerticalTop, flipInVerticalBottom, flipOutVerticalRight, flipOutVerticalLeft, flipOutVerticalTop, flipOutVerticalBottom }; 90 | -------------------------------------------------------------------------------- /dist/animations/openClose.d.ts: -------------------------------------------------------------------------------- 1 | import { Options } from '../utils/types'; 2 | declare const openTopRight: (target: HTMLElement | any, done: (() => void), options: Options) => Promise; 3 | declare const openTopLeft: (target: HTMLElement | any, done: (() => void), options: Options) => Promise; 4 | declare const openBottomRight: (target: HTMLElement | any, done: (() => void), options: Options) => Promise; 5 | declare const openBottomLeft: (target: HTMLElement | any, done: (() => void), options: Options) => Promise; 6 | declare const closeTopRight: (target: HTMLElement | any, done: (() => void), options: Options) => Promise; 7 | declare const closeTopLeft: (target: HTMLElement | any, done: (() => void), options: Options) => Promise; 8 | declare const closeBottomRight: (target: HTMLElement | any, done: (() => void), options: Options) => Promise; 9 | declare const closeBottomLeft: (target: HTMLElement | any, done: (() => void), options: Options) => Promise; 10 | export { openTopLeft, openTopRight, openBottomLeft, openBottomRight, closeTopLeft, closeTopRight, closeBottomLeft, closeBottomRight }; 11 | -------------------------------------------------------------------------------- /dist/animations/openClose.js: -------------------------------------------------------------------------------- 1 | import { __assign } from "tslib"; 2 | import animate from '../utils/animate'; 3 | var openOptions = { 4 | ease: "power.inOut" 5 | }; 6 | // entrance animations 7 | var openTopRight = function (target, done, options) { 8 | return animate('in', target, done, options, __assign(__assign({}, openOptions), { transformOrigin: "top right", rotation: -110 })); 9 | }; 10 | var openTopLeft = function (target, done, options) { 11 | return animate('in', target, done, options, __assign(__assign({}, openOptions), { transformOrigin: "top left", rotation: 110 })); 12 | }; 13 | var openBottomRight = function (target, done, options) { 14 | return animate('in', target, done, options, __assign(__assign({}, openOptions), { transformOrigin: "bottom right", rotation: 110 })); 15 | }; 16 | var openBottomLeft = function (target, done, options) { 17 | return animate('in', target, done, options, __assign(__assign({}, openOptions), { transformOrigin: "bottom left", rotation: -110 })); 18 | }; 19 | // Leaving animations 20 | var closeTopRight = function (target, done, options) { 21 | return animate('out', target, done, options, __assign(__assign({}, openOptions), { transformOrigin: "top right", rotation: -110 })); 22 | }; 23 | var closeTopLeft = function (target, done, options) { 24 | return animate('out', target, done, options, __assign(__assign({}, openOptions), { transformOrigin: "top left", rotation: 110 })); 25 | }; 26 | var closeBottomRight = function (target, done, options) { 27 | return animate('out', target, done, options, __assign(__assign({}, openOptions), { transformOrigin: "bottom right", rotation: -110 })); 28 | }; 29 | var closeBottomLeft = function (target, done, options) { 30 | return animate('out', target, done, options, __assign(__assign({}, openOptions), { transformOrigin: "bottom left", rotation: 110 })); 31 | }; 32 | export { openTopLeft, openTopRight, openBottomLeft, openBottomRight, closeTopLeft, closeTopRight, closeBottomLeft, closeBottomRight }; 33 | -------------------------------------------------------------------------------- /dist/animations/perspective.d.ts: -------------------------------------------------------------------------------- 1 | import { Options } from '../utils/types'; 2 | declare const perspectiveInRight: (target: HTMLElement | any, done: (() => void), options: Options) => Promise; 3 | declare const perspectiveInLeft: (target: HTMLElement | any, done: (() => void), options: Options) => Promise; 4 | declare const perspectiveInTop: (target: HTMLElement | any, done: (() => void), options: Options) => Promise; 5 | declare const perspectiveInBottom: (target: HTMLElement | any, done: (() => void), options: Options) => Promise; 6 | declare const perspectiveOutRight: (target: HTMLElement | any, done: (() => void), options: Options) => Promise; 7 | declare const perspectiveOutLeft: (target: HTMLElement | any, done: (() => void), options: Options) => Promise; 8 | declare const perspectiveOutTop: (target: HTMLElement | any, done: (() => void), options: Options) => Promise; 9 | declare const perspectiveOutBottom: (target: HTMLElement | any, done: (() => void), options: Options) => Promise; 10 | export { perspectiveInRight, perspectiveInLeft, perspectiveInTop, perspectiveInBottom, perspectiveOutRight, perspectiveOutLeft, perspectiveOutTop, perspectiveOutBottom }; 11 | -------------------------------------------------------------------------------- /dist/animations/perspective.js: -------------------------------------------------------------------------------- 1 | import animate from '../utils/animate'; 2 | var rightOptions = { 3 | transformOrigin: "100% 0", 4 | perspective: "800px", 5 | rotationY: 180 6 | }; 7 | var leftOptions = { 8 | transformOrigin: "0 0", 9 | perspective: "800px", 10 | rotationY: -180 11 | }; 12 | var topOptions = { 13 | transformOrigin: "0 100%", 14 | perspective: "800px", 15 | rotationX: 180 16 | }; 17 | var bottomOptions = { 18 | transformOrigin: "0 0", 19 | perspective: "800px", 20 | rotationX: -180 21 | }; 22 | // entrance animations 23 | var perspectiveInRight = function (target, done, options) { 24 | return animate('in', target, done, options, rightOptions); 25 | }; 26 | var perspectiveInLeft = function (target, done, options) { 27 | return animate('in', target, done, options, leftOptions); 28 | }; 29 | var perspectiveInTop = function (target, done, options) { 30 | return animate('in', target, done, options, topOptions); 31 | }; 32 | var perspectiveInBottom = function (target, done, options) { 33 | return animate('in', target, done, options, bottomOptions); 34 | }; 35 | // leaving animations 36 | var perspectiveOutRight = function (target, done, options) { 37 | return animate('out', target, done, options, rightOptions); 38 | }; 39 | var perspectiveOutLeft = function (target, done, options) { 40 | return animate('out', target, done, options, leftOptions); 41 | }; 42 | var perspectiveOutTop = function (target, done, options) { 43 | return animate('out', target, done, options, topOptions); 44 | }; 45 | var perspectiveOutBottom = function (target, done, options) { 46 | return animate('out', target, done, options, bottomOptions); 47 | }; 48 | export { perspectiveInRight, perspectiveInLeft, perspectiveInTop, perspectiveInBottom, perspectiveOutRight, perspectiveOutLeft, perspectiveOutTop, perspectiveOutBottom }; 49 | -------------------------------------------------------------------------------- /dist/animations/puff.d.ts: -------------------------------------------------------------------------------- 1 | import { Options } from '../utils/types'; 2 | declare const puffIn: (target: HTMLElement | any, done: (() => void), options: Options) => Promise; 3 | declare const puffOut: (target: HTMLElement | any, done: (() => void), options: Options) => Promise; 4 | export { puffIn, puffOut }; 5 | -------------------------------------------------------------------------------- /dist/animations/puff.js: -------------------------------------------------------------------------------- 1 | import animate from '../utils/animate'; 2 | var puffOptions = { 3 | scale: 2, 4 | filter: "blur(2px)", 5 | transformOrigin: "50% 50%" 6 | }; 7 | var puffIn = function (target, done, options) { 8 | return animate('in', target, done, options, puffOptions); 9 | }; 10 | var puffOut = function (target, done, options) { 11 | return animate('out', target, done, options, puffOptions); 12 | }; 13 | export { puffIn, puffOut }; 14 | -------------------------------------------------------------------------------- /dist/animations/roll.d.ts: -------------------------------------------------------------------------------- 1 | import { Options } from '../utils/types'; 2 | declare const rollIn: (target: HTMLElement | any, done: (() => void), options: Options) => Promise; 3 | declare const rollOut: (target: HTMLElement | any, done: (() => void), options: Options) => Promise; 4 | export { rollIn, rollOut }; 5 | -------------------------------------------------------------------------------- /dist/animations/roll.js: -------------------------------------------------------------------------------- 1 | import animate from '../utils/animate'; 2 | var rollIn = function (target, done, options) { 3 | return animate('in', target, done, options, { 4 | rotationZ: -120, 5 | transformOrigin: "0% 50%" 6 | }); 7 | }; 8 | var rollOut = function (target, done, options) { 9 | return animate('out', target, done, options, { 10 | rotationZ: 120, 11 | transformOrigin: "0% 50%" 12 | }); 13 | }; 14 | export { rollIn, rollOut }; 15 | -------------------------------------------------------------------------------- /dist/animations/rotate.d.ts: -------------------------------------------------------------------------------- 1 | import { Options } from '../utils/types'; 2 | declare const rotateIn: (target: HTMLElement | any, done: (() => void), options: Options) => Promise; 3 | declare const rotateInBottomLeft: (target: HTMLElement | any, done: (() => void), options: Options) => Promise; 4 | declare const rotateInBottomRight: (target: HTMLElement | any, done: (() => void), options: Options) => Promise; 5 | declare const rotateInTopLeft: (target: HTMLElement | any, done: (() => void), options: Options) => Promise; 6 | declare const rotateInTopRight: (target: HTMLElement | any, done: (() => void), options: Options) => Promise; 7 | declare const rotateOut: (target: HTMLElement | any, done: (() => void), options: Options) => Promise; 8 | declare const rotateOutBottomLeft: (target: HTMLElement | any, done: (() => void), options: Options) => Promise; 9 | declare const rotateOutBottomRight: (target: HTMLElement | any, done: (() => void), options: Options) => Promise; 10 | declare const rotateOutTopLeft: (target: HTMLElement | any, done: (() => void), options: Options) => Promise; 11 | declare const rotateOutTopRight: (target: HTMLElement | any, done: (() => void), options: Options) => Promise; 12 | export { rotateIn, rotateInBottomLeft, rotateInBottomRight, rotateInTopLeft, rotateInTopRight, rotateOut, rotateOutBottomLeft, rotateOutBottomRight, rotateOutTopLeft, rotateOutTopRight }; 13 | -------------------------------------------------------------------------------- /dist/animations/rotate.js: -------------------------------------------------------------------------------- 1 | import animate from '../utils/animate'; 2 | // entrance animations 3 | var rotateIn = function (target, done, options) { 4 | return animate('in', target, done, options, { scale: 0, rotationZ: -200 }); 5 | }; 6 | var rotateInBottomLeft = function (target, done, options) { 7 | return animate('in', target, done, options, { 8 | rotationZ: -45 9 | }); 10 | }; 11 | var rotateInBottomRight = function (target, done, options) { 12 | return animate('in', target, done, options, { 13 | rotationZ: 45, 14 | }); 15 | }; 16 | var rotateInTopLeft = function (target, done, options) { 17 | return animate('in', target, done, options, { 18 | rotationZ: 45, 19 | }); 20 | }; 21 | var rotateInTopRight = function (target, done, options) { 22 | return animate('in', target, done, options, { 23 | rotationZ: -90, 24 | }); 25 | }; 26 | // leaving animations 27 | var rotateOut = function (target, done, options) { 28 | return animate('out', target, done, options, { scale: 0, rotationZ: -200 }); 29 | }; 30 | var rotateOutBottomLeft = function (target, done, options) { 31 | return animate('out', target, done, options, { 32 | rotationZ: -45 33 | }); 34 | }; 35 | var rotateOutBottomRight = function (target, done, options) { 36 | return animate('out', target, done, options, { 37 | rotationZ: 45 38 | }); 39 | }; 40 | var rotateOutTopLeft = function (target, done, options) { 41 | return animate('out', target, done, options, { 42 | rotationZ: 45 43 | }); 44 | }; 45 | var rotateOutTopRight = function (target, done, options) { 46 | return animate('out', target, done, options, { 47 | rotationZ: -90 48 | }); 49 | }; 50 | export { rotateIn, rotateInBottomLeft, rotateInBottomRight, rotateInTopLeft, rotateInTopRight, rotateOut, rotateOutBottomLeft, rotateOutBottomRight, rotateOutTopLeft, rotateOutTopRight }; 51 | -------------------------------------------------------------------------------- /dist/animations/skew.d.ts: -------------------------------------------------------------------------------- 1 | import { Options } from '../utils/types'; 2 | declare const skewInRight: (target: HTMLElement | any, done: (() => void), options: Options) => Promise; 3 | declare const skewInLeft: (target: HTMLElement | any, done: (() => void), options: Options) => Promise; 4 | declare const skewOutRight: (target: HTMLElement | any, done: (() => void), options: Options) => Promise; 5 | declare const skewOutLeft: (target: HTMLElement | any, done: (() => void), options: Options) => Promise; 6 | export { skewInRight, skewInLeft, skewOutRight, skewOutLeft }; 7 | -------------------------------------------------------------------------------- /dist/animations/skew.js: -------------------------------------------------------------------------------- 1 | import animate from '../utils/animate'; 2 | import setOffset from '../utils/setOffset'; 3 | // entrance animations 4 | var skewInRight = function (target, done, options) { 5 | var offset = setOffset(target, options); 6 | return animate('in', target, done, options, { 7 | skewX: 30, 8 | ease: 'back.out', 9 | x: offset ? "".concat(offset) : '100%' 10 | }); 11 | }; 12 | var skewInLeft = function (target, done, options) { 13 | var offset = setOffset(target, options); 14 | return animate('in', target, done, options, { 15 | skewX: -30, 16 | ease: 'back.out', 17 | x: offset ? "-".concat(offset) : '-100%' 18 | }); 19 | }; 20 | // leaving animations 21 | var skewOutRight = function (target, done, options) { 22 | var offset = setOffset(target, options); 23 | return animate('out', target, done, options, { 24 | skewX: 30, 25 | ease: 'back.out', 26 | x: offset ? "".concat(offset) : '100%' 27 | }); 28 | }; 29 | var skewOutLeft = function (target, done, options) { 30 | var offset = setOffset(target, options); 31 | return animate('out', target, done, options, { 32 | skewX: -30, 33 | ease: 'back.out', 34 | x: offset ? "-".concat(offset) : '-100%' 35 | }); 36 | }; 37 | export { skewInRight, skewInLeft, skewOutRight, skewOutLeft }; 38 | -------------------------------------------------------------------------------- /dist/animations/slide.d.ts: -------------------------------------------------------------------------------- 1 | import { Options } from '../utils/types'; 2 | declare const slideInRight: (target: HTMLElement | any, done: (() => void), options: Options) => Promise; 3 | declare const slideInLeft: (target: HTMLElement | any, done: (() => void), options: Options) => Promise; 4 | declare const slideInTop: (target: HTMLElement | any, done: (() => void), options: Options) => Promise; 5 | declare const slideInBottom: (target: HTMLElement | any, done: (() => void), options: Options) => Promise; 6 | declare const slideInTopRight: (target: HTMLElement | any, done: (() => void), options: Options) => Promise; 7 | declare const slideInTopLeft: (target: HTMLElement | any, done: (() => void), options: Options) => Promise; 8 | declare const slideInBottomRight: (target: HTMLElement | any, done: (() => void), options: Options) => Promise; 9 | declare const slideInBottomLeft: (target: HTMLElement | any, done: (() => void), options: Options) => Promise; 10 | declare const slideOutRight: (target: HTMLElement | any, done: (() => void), options: Options) => Promise; 11 | declare const slideOutLeft: (target: HTMLElement | any, done: (() => void), options: Options) => Promise; 12 | declare const slideOutTop: (target: HTMLElement | any, done: (() => void), options: Options) => Promise; 13 | declare const slideOutBottom: (target: HTMLElement | any, done: (() => void), options: Options) => Promise; 14 | declare const slideOutTopRight: (target: HTMLElement | any, done: (() => void), options: Options) => Promise; 15 | declare const slideOutTopLeft: (target: HTMLElement | any, done: (() => void), options: Options) => Promise; 16 | declare const slideOutBottomRight: (target: HTMLElement | any, done: (() => void), options: Options) => Promise; 17 | declare const slideOutBottomLeft: (target: HTMLElement | any, done: (() => void), options: Options) => Promise; 18 | export { slideInRight, slideInLeft, slideInTop, slideInBottom, slideInTopRight, slideInTopLeft, slideInBottomRight, slideInBottomLeft, slideOutRight, slideOutLeft, slideOutTop, slideOutBottom, slideOutTopRight, slideOutTopLeft, slideOutBottomRight, slideOutBottomLeft }; 19 | -------------------------------------------------------------------------------- /dist/animations/slide.js: -------------------------------------------------------------------------------- 1 | import animate from '../utils/animate'; 2 | import setOffset from '../utils/setOffset'; 3 | // entrance animations 4 | var slideInRight = function (target, done, options) { 5 | var offset = setOffset(target, options); 6 | return animate('in', target, done, options, { 7 | x: offset ? "".concat(offset) : '100%' 8 | }); 9 | }; 10 | var slideInLeft = function (target, done, options) { 11 | var offset = setOffset(target, options); 12 | return animate('in', target, done, options, { 13 | x: offset ? "-".concat(offset) : '-100%' 14 | }); 15 | }; 16 | var slideInTop = function (target, done, options) { 17 | var offset = setOffset(target, options); 18 | return animate('in', target, done, options, { 19 | y: offset ? "-".concat(offset) : '-100%' 20 | }); 21 | }; 22 | var slideInBottom = function (target, done, options) { 23 | var offset = setOffset(target, options); 24 | return animate('in', target, done, options, { 25 | y: offset ? "".concat(offset) : '100%' 26 | }); 27 | }; 28 | var slideInTopRight = function (target, done, options) { 29 | var offset = setOffset(target, options); 30 | return animate('in', target, done, options, { 31 | y: offset ? "-".concat(offset) : '-100%', 32 | x: offset ? "".concat(offset) : '100%' 33 | }); 34 | }; 35 | var slideInTopLeft = function (target, done, options) { 36 | var offset = setOffset(target, options); 37 | return animate('in', target, done, options, { 38 | y: offset ? "-".concat(offset) : '-100%', 39 | x: offset ? "-".concat(offset) : '-100%' 40 | }); 41 | }; 42 | var slideInBottomRight = function (target, done, options) { 43 | var offset = setOffset(target, options); 44 | return animate('in', target, done, options, { 45 | y: offset ? "".concat(offset) : '100%', 46 | x: offset ? "".concat(offset) : '100%' 47 | }); 48 | }; 49 | var slideInBottomLeft = function (target, done, options) { 50 | var offset = setOffset(target, options); 51 | return animate('in', target, done, options, { 52 | y: offset ? "".concat(offset) : '100%', 53 | x: offset ? "-".concat(offset) : '-100%' 54 | }); 55 | }; 56 | // leaving animations 57 | var slideOutRight = function (target, done, options) { 58 | var offset = setOffset(target, options); 59 | return animate('out', target, done, options, { 60 | x: offset ? "".concat(offset) : '100%' 61 | }); 62 | }; 63 | var slideOutLeft = function (target, done, options) { 64 | var offset = setOffset(target, options); 65 | return animate('out', target, done, options, { 66 | x: offset ? "-".concat(offset) : '-100%' 67 | }); 68 | }; 69 | var slideOutTop = function (target, done, options) { 70 | var offset = setOffset(target, options); 71 | return animate('out', target, done, options, { 72 | y: offset ? "-".concat(offset) : '-100%' 73 | }); 74 | }; 75 | var slideOutBottom = function (target, done, options) { 76 | var offset = setOffset(target, options); 77 | return animate('out', target, done, options, { 78 | y: offset ? "".concat(offset) : '100%' 79 | }); 80 | }; 81 | var slideOutTopRight = function (target, done, options) { 82 | var offset = setOffset(target, options); 83 | return animate('out', target, done, options, { 84 | y: offset ? "-".concat(offset) : '-100%', 85 | x: offset ? "".concat(offset) : '100%' 86 | }); 87 | }; 88 | var slideOutTopLeft = function (target, done, options) { 89 | var offset = setOffset(target, options); 90 | return animate('out', target, done, options, { 91 | y: offset ? "-".concat(offset) : '-100%', 92 | x: offset ? "-".concat(offset) : '-100%' 93 | }); 94 | }; 95 | var slideOutBottomRight = function (target, done, options) { 96 | var offset = setOffset(target, options); 97 | return animate('out', target, done, options, { 98 | y: offset ? "".concat(offset) : '100%', 99 | x: offset ? "".concat(offset) : '100%' 100 | }); 101 | }; 102 | var slideOutBottomLeft = function (target, done, options) { 103 | var offset = setOffset(target, options); 104 | return animate('out', target, done, options, { 105 | y: offset ? "".concat(offset) : '100%', 106 | x: offset ? "-".concat(offset) : '-100%' 107 | }); 108 | }; 109 | export { slideInRight, slideInLeft, slideInTop, slideInBottom, slideInTopRight, slideInTopLeft, slideInBottomRight, slideInBottomLeft, slideOutRight, slideOutLeft, slideOutTop, slideOutBottom, slideOutTopRight, slideOutTopLeft, slideOutBottomRight, slideOutBottomLeft }; 110 | -------------------------------------------------------------------------------- /dist/animations/text.d.ts: -------------------------------------------------------------------------------- 1 | import { Options } from '../utils/types'; 2 | declare const textIn: (target: HTMLElement | any, done: (() => void), options: Options) => Promise; 3 | declare const textOut: (target: HTMLElement | any, done: (() => void), options: Options) => Promise; 4 | export { textIn, textOut }; 5 | -------------------------------------------------------------------------------- /dist/animations/text.js: -------------------------------------------------------------------------------- 1 | import { __assign } from "tslib"; 2 | import animate from '../utils/animate'; 3 | import { gsap } from 'gsap'; 4 | import TextPlugin from 'gsap/TextPlugin'; 5 | gsap.registerPlugin(TextPlugin); 6 | var textOptions = { 7 | opacity: 1, 8 | text: '', 9 | }; 10 | // entrance animations 11 | var textIn = function (target, done, options) { 12 | return animate('in', target, done, options, __assign(__assign({}, textOptions), { duration: (options === null || options === void 0 ? void 0 : options.duration) || parseFloat(target.dataset.avDuration) || 1 })); 13 | }; 14 | // leaving animations 15 | var textOut = function (target, done, options) { 16 | return animate('out', target, done, options, __assign(__assign({}, textOptions), { duration: (options === null || options === void 0 ? void 0 : options.duration) || parseFloat(target.dataset.avDuration) || 1 })); 17 | }; 18 | export { textIn, textOut }; 19 | -------------------------------------------------------------------------------- /dist/animations/vanish.d.ts: -------------------------------------------------------------------------------- 1 | import { Options } from '../utils/types'; 2 | declare const vanishIn: (target: HTMLElement | any, done: (() => void), options: Options) => Promise; 3 | declare const vanishOut: (target: HTMLElement | any, done: (() => void), options: Options) => Promise; 4 | export { vanishIn, vanishOut }; 5 | -------------------------------------------------------------------------------- /dist/animations/vanish.js: -------------------------------------------------------------------------------- 1 | import { __assign } from "tslib"; 2 | import animate from '../utils/animate'; 3 | var vanishOptions = { 4 | scale: 2, 5 | filter: "blur(90px)", 6 | transformOrigin: "50% 50%", 7 | }; 8 | var vanishIn = function (target, done, options) { 9 | return animate('in', target, done, options, __assign(__assign({}, vanishOptions), { duration: (options === null || options === void 0 ? void 0 : options.duration) || parseFloat(target.dataset.avDuration) || 0.65 })); 10 | }; 11 | var vanishOut = function (target, done, options) { 12 | return animate('out', target, done, options, __assign(__assign({}, vanishOptions), { duration: (options === null || options === void 0 ? void 0 : options.duration) || parseFloat(target.dataset.avDuration) || 0.65 })); 13 | }; 14 | export { vanishIn, vanishOut }; 15 | -------------------------------------------------------------------------------- /dist/animations/wrap.d.ts: -------------------------------------------------------------------------------- 1 | import { Options } from '../utils/types'; 2 | declare const wrapInVertical: (target: HTMLElement | any, done: (() => void), options: Options) => Promise; 3 | declare const wrapOutVertical: (target: HTMLElement | any, done: (() => void), options: Options) => Promise; 4 | declare const wrapInHorizontal: (target: HTMLElement | any, done: (() => void), options: Options) => Promise; 5 | declare const wrapOutHorizontal: (target: HTMLElement | any, done: (() => void), options: Options) => Promise; 6 | export { wrapInVertical, wrapOutVertical, wrapInHorizontal, wrapOutHorizontal }; 7 | -------------------------------------------------------------------------------- /dist/animations/wrap.js: -------------------------------------------------------------------------------- 1 | import animate from '../utils/animate'; 2 | // List animations 3 | var verticalOptions = { height: 0, opacity: 1, overflowY: 'hidden' }; 4 | var horizontalOptions = { width: 0, opacity: 1, overflowX: 'hidden' }; 5 | var wrapInVertical = function (target, done, options) { 6 | return animate('in', target, done, options, verticalOptions); 7 | }; 8 | var wrapOutVertical = function (target, done, options) { 9 | return animate('out', target, done, options, verticalOptions); 10 | }; 11 | var wrapInHorizontal = function (target, done, options) { 12 | return animate('in', target, done, options, horizontalOptions); 13 | }; 14 | var wrapOutHorizontal = function (target, done, options) { 15 | return animate('out', target, done, options, horizontalOptions); 16 | }; 17 | export { wrapInVertical, wrapOutVertical, wrapInHorizontal, wrapOutHorizontal }; 18 | -------------------------------------------------------------------------------- /dist/animations/zoom.d.ts: -------------------------------------------------------------------------------- 1 | import { Options } from '../utils/types'; 2 | declare const zoomIn: (target: HTMLElement | any, done: (() => void), options: Options) => Promise; 3 | declare const zoomInRight: (target: HTMLElement | any, done: (() => void), options: Options) => Promise; 4 | declare const zoomInLeft: (target: HTMLElement | any, done: (() => void), options: Options) => Promise; 5 | declare const zoomInTop: (target: HTMLElement | any, done: (() => void), options: Options) => Promise; 6 | declare const zoomInBottom: (target: HTMLElement | any, done: (() => void), options: Options) => Promise; 7 | declare const zoomInTopRight: (target: HTMLElement | any, done: (() => void), options: Options) => Promise; 8 | declare const zoomInTopLeft: (target: HTMLElement | any, done: (() => void), options: Options) => Promise; 9 | declare const zoomInBottomRight: (target: HTMLElement | any, done: (() => void), options: Options) => Promise; 10 | declare const zoomInBottomLeft: (target: HTMLElement | any, done: (() => void), options: Options) => Promise; 11 | declare const zoomOut: (target: HTMLElement | any, done: (() => void), options: Options) => Promise; 12 | declare const zoomOutRight: (target: HTMLElement | any, done: (() => void), options: Options) => Promise; 13 | declare const zoomOutLeft: (target: HTMLElement | any, done: (() => void), options: Options) => Promise; 14 | declare const zoomOutTop: (target: HTMLElement | any, done: (() => void), options: Options) => Promise; 15 | declare const zoomOutBottom: (target: HTMLElement | any, done: (() => void), options: Options) => Promise; 16 | declare const zoomOutTopRight: (target: HTMLElement | any, done: (() => void), options: Options) => Promise; 17 | declare const zoomOutTopLeft: (target: HTMLElement | any, done: (() => void), options: Options) => Promise; 18 | declare const zoomOutBottomRight: (target: HTMLElement | any, done: (() => void), options: Options) => Promise; 19 | declare const zoomOutBottomLeft: (target: HTMLElement | any, done: (() => void), options: Options) => Promise; 20 | export { zoomIn, zoomInRight, zoomInLeft, zoomInTop, zoomInBottom, zoomInTopRight, zoomInTopLeft, zoomInBottomRight, zoomInBottomLeft, zoomOut, zoomOutRight, zoomOutLeft, zoomOutTop, zoomOutBottom, zoomOutTopRight, zoomOutTopLeft, zoomOutBottomRight, zoomOutBottomLeft }; 21 | -------------------------------------------------------------------------------- /dist/animations/zoom.js: -------------------------------------------------------------------------------- 1 | import animate from '../utils/animate'; 2 | import setOffset from '../utils/setOffset'; 3 | // entrance animations 4 | var zoomIn = function (target, done, options) { 5 | return animate('in', target, done, options, { scale: 0 }); 6 | }; 7 | var zoomInRight = function (target, done, options) { 8 | var offset = setOffset(target, options); 9 | return animate('in', target, done, options, { 10 | scale: 0, 11 | x: offset ? "".concat(offset) : '100%' 12 | }); 13 | }; 14 | var zoomInLeft = function (target, done, options) { 15 | var offset = setOffset(target, options); 16 | return animate('in', target, done, options, { 17 | scale: 0, 18 | x: offset ? "-".concat(offset) : '-100%' 19 | }); 20 | }; 21 | var zoomInTop = function (target, done, options) { 22 | var offset = setOffset(target, options); 23 | return animate('in', target, done, options, { 24 | scale: 0, 25 | y: offset ? "-".concat(offset) : '-100%' 26 | }); 27 | }; 28 | var zoomInBottom = function (target, done, options) { 29 | var offset = setOffset(target, options); 30 | return animate('in', target, done, options, { 31 | scale: 0, 32 | y: offset ? "".concat(offset) : '100%' 33 | }); 34 | }; 35 | var zoomInTopRight = function (target, done, options) { 36 | var offset = setOffset(target, options); 37 | return animate('in', target, done, options, { 38 | scale: 0, 39 | y: offset ? "-".concat(offset) : '-100%', 40 | x: offset ? "".concat(offset) : '100%' 41 | }); 42 | }; 43 | var zoomInTopLeft = function (target, done, options) { 44 | var offset = setOffset(target, options); 45 | return animate('in', target, done, options, { 46 | scale: 0, 47 | y: offset ? "-".concat(offset) : '-100%', 48 | x: offset ? "-".concat(offset) : '-100%' 49 | }); 50 | }; 51 | var zoomInBottomRight = function (target, done, options) { 52 | var offset = setOffset(target, options); 53 | return animate('in', target, done, options, { 54 | scale: 0, 55 | y: offset ? "".concat(offset) : '100%', 56 | x: offset ? "".concat(offset) : '100%' 57 | }); 58 | }; 59 | var zoomInBottomLeft = function (target, done, options) { 60 | var offset = setOffset(target, options); 61 | return animate('in', target, done, options, { 62 | scale: 0, 63 | y: offset ? "".concat(offset) : '100%', 64 | x: offset ? "-".concat(offset) : '-100%' 65 | }); 66 | }; 67 | // leaving animations 68 | var zoomOut = function (target, done, options) { 69 | return animate('out', target, done, options, { scale: 0 }); 70 | }; 71 | var zoomOutRight = function (target, done, options) { 72 | var offset = setOffset(target, options); 73 | return animate('out', target, done, options, { 74 | scale: 0, 75 | x: offset ? "".concat(offset) : '100%' 76 | }); 77 | }; 78 | var zoomOutLeft = function (target, done, options) { 79 | var offset = setOffset(target, options); 80 | return animate('out', target, done, options, { 81 | scale: 0, 82 | x: offset ? "-".concat(offset) : '-100%' 83 | }); 84 | }; 85 | var zoomOutTop = function (target, done, options) { 86 | var offset = setOffset(target, options); 87 | return animate('out', target, done, options, { 88 | scale: 0, 89 | y: offset ? "-".concat(offset) : '-100%' 90 | }); 91 | }; 92 | var zoomOutBottom = function (target, done, options) { 93 | var offset = setOffset(target, options); 94 | return animate('out', target, done, options, { 95 | scale: 0, 96 | y: offset ? "".concat(offset) : '100%' 97 | }); 98 | }; 99 | var zoomOutTopRight = function (target, done, options) { 100 | var offset = setOffset(target, options); 101 | return animate('out', target, done, options, { 102 | scale: 0, 103 | y: offset ? "-".concat(offset) : '-100%', 104 | x: offset ? "".concat(offset) : '100%' 105 | }); 106 | }; 107 | var zoomOutTopLeft = function (target, done, options) { 108 | var offset = setOffset(target, options); 109 | return animate('out', target, done, options, { 110 | scale: 0, 111 | y: offset ? "-".concat(offset) : '-100%', 112 | x: offset ? "-".concat(offset) : '-100%' 113 | }); 114 | }; 115 | var zoomOutBottomRight = function (target, done, options) { 116 | var offset = setOffset(target, options); 117 | return animate('out', target, done, options, { 118 | scale: 0, 119 | y: offset ? "".concat(offset) : '100%', 120 | x: offset ? "".concat(offset) : '100%' 121 | }); 122 | }; 123 | var zoomOutBottomLeft = function (target, done, options) { 124 | var offset = setOffset(target, options); 125 | return animate('out', target, done, options, { 126 | scale: 0, 127 | y: offset ? "".concat(offset) : '100%', 128 | x: offset ? "-".concat(offset) : '-100%' 129 | }); 130 | }; 131 | export { zoomIn, zoomInRight, zoomInLeft, zoomInTop, zoomInBottom, zoomInTopRight, zoomInTopLeft, zoomInBottomRight, zoomInBottomLeft, zoomOut, zoomOutRight, zoomOutLeft, zoomOutTop, zoomOutBottom, zoomOutTopRight, zoomOutTopLeft, zoomOutBottomRight, zoomOutBottomLeft }; 132 | -------------------------------------------------------------------------------- /dist/index.d.ts: -------------------------------------------------------------------------------- 1 | import { fadeIn, fadeOut } from './animations/fade'; 2 | import { slideInRight, slideInLeft, slideInTop, slideInBottom, slideInTopRight, slideInTopLeft, slideInBottomRight, slideInBottomLeft, slideOutRight, slideOutLeft, slideOutTop, slideOutBottom, slideOutTopRight, slideOutTopLeft, slideOutBottomRight, slideOutBottomLeft } from './animations/slide'; 3 | import { wrapInVertical, wrapOutVertical, wrapInHorizontal, wrapOutHorizontal } from './animations/wrap'; 4 | import { flipInHorizontal, flipOutHorizontal, flipInVertical, flipOutVertical, flipInHorizontalRight, flipInHorizontalLeft, flipInHorizontalTop, flipInHorizontalBottom, flipOutHorizontalRight, flipOutHorizontalLeft, flipOutHorizontalTop, flipOutHorizontalBottom, flipInVerticalRight, flipInVerticalLeft, flipInVerticalTop, flipInVerticalBottom, flipOutVerticalRight, flipOutVerticalLeft, flipOutVerticalTop, flipOutVerticalBottom } from './animations/flip'; 5 | import { zoomIn, zoomInRight, zoomInLeft, zoomInTop, zoomInBottom, zoomInTopRight, zoomInTopLeft, zoomInBottomRight, zoomInBottomLeft, zoomOut, zoomOutRight, zoomOutLeft, zoomOutTop, zoomOutBottom, zoomOutTopRight, zoomOutTopLeft, zoomOutBottomRight, zoomOutBottomLeft } from './animations/zoom'; 6 | import { rotateIn, rotateInBottomLeft, rotateInBottomRight, rotateInTopLeft, rotateInTopRight, rotateOut, rotateOutBottomLeft, rotateOutBottomRight, rotateOutTopLeft, rotateOutTopRight } from './animations/rotate'; 7 | import { skewInRight, skewInLeft, skewOutRight, skewOutLeft } from './animations/skew'; 8 | import { rollIn, rollOut } from './animations/roll'; 9 | import { puffIn, puffOut } from './animations/puff'; 10 | import { blurIn, blurOut } from './animations/blur'; 11 | import { vanishIn, vanishOut } from './animations/vanish'; 12 | import { perspectiveInRight, perspectiveInLeft, perspectiveInTop, perspectiveInBottom, perspectiveOutRight, perspectiveOutLeft, perspectiveOutTop, perspectiveOutBottom } from './animations/perspective'; 13 | import { openTopLeft, openTopRight, openBottomLeft, openBottomRight, closeTopLeft, closeTopRight, closeBottomLeft, closeBottomRight } from './animations/openClose'; 14 | import { textIn, textOut } from './animations/text'; 15 | import customAnimation from './animations/customAnimation'; 16 | import { jello } from './animations/attentionSeekers/jello'; 17 | import { bounce } from './animations/attentionSeekers/bounce'; 18 | import { pulse } from './animations/attentionSeekers/pulse'; 19 | import { flash } from './animations/attentionSeekers/flash'; 20 | import { headShake } from './animations/attentionSeekers/headShake'; 21 | import { rubberBand } from './animations/attentionSeekers/rubberBand'; 22 | import { shakeHorizontal } from './animations/attentionSeekers/shakeHorizontal'; 23 | import { shakeVertical } from './animations/attentionSeekers/shakeVertical'; 24 | import { swing } from './animations/attentionSeekers/swing'; 25 | import { tada } from './animations/attentionSeekers/tada'; 26 | import { wobble } from './animations/attentionSeekers/wobble'; 27 | import { heartBeat } from './animations/attentionSeekers/heartBeat'; 28 | import { puff } from './animations/attentionSeekers/puff'; 29 | import { spin } from './animations/attentionSeekers/spin'; 30 | export { customAnimation, fadeIn, fadeOut, slideInRight, slideInLeft, slideInTop, slideInBottom, slideInTopRight, slideInTopLeft, slideInBottomRight, slideInBottomLeft, slideOutRight, slideOutLeft, slideOutTop, slideOutBottom, slideOutTopRight, slideOutTopLeft, slideOutBottomRight, slideOutBottomLeft, wrapInVertical, wrapOutVertical, wrapInHorizontal, wrapOutHorizontal, flipInHorizontal, flipOutHorizontal, flipInVertical, flipOutVertical, flipInHorizontalRight, flipInHorizontalLeft, flipInHorizontalTop, flipInHorizontalBottom, flipOutHorizontalRight, flipOutHorizontalLeft, flipOutHorizontalTop, flipOutHorizontalBottom, flipInVerticalRight, flipInVerticalLeft, flipInVerticalTop, flipInVerticalBottom, flipOutVerticalRight, flipOutVerticalLeft, flipOutVerticalTop, flipOutVerticalBottom, zoomIn, zoomInRight, zoomInLeft, zoomInTop, zoomInBottom, zoomInTopRight, zoomInTopLeft, zoomInBottomRight, zoomInBottomLeft, zoomOut, zoomOutRight, zoomOutLeft, zoomOutTop, zoomOutBottom, zoomOutTopRight, zoomOutTopLeft, zoomOutBottomRight, zoomOutBottomLeft, rotateIn, rotateInBottomLeft, rotateInBottomRight, rotateInTopLeft, rotateInTopRight, rotateOut, rotateOutBottomLeft, rotateOutBottomRight, rotateOutTopLeft, rotateOutTopRight, skewInRight, skewInLeft, skewOutRight, skewOutLeft, rollIn, rollOut, puffIn, puffOut, blurIn, blurOut, vanishIn, vanishOut, perspectiveInRight, perspectiveInLeft, perspectiveInTop, perspectiveInBottom, perspectiveOutRight, perspectiveOutLeft, perspectiveOutTop, perspectiveOutBottom, openTopLeft, openTopRight, openBottomLeft, openBottomRight, closeTopLeft, closeTopRight, closeBottomLeft, closeBottomRight, textIn, textOut, puff, jello, bounce, spin, pulse, flash, rubberBand, headShake, shakeHorizontal, shakeVertical, swing, tada, wobble, heartBeat }; 31 | -------------------------------------------------------------------------------- /dist/index.js: -------------------------------------------------------------------------------- 1 | import { fadeIn, fadeOut } from './animations/fade'; 2 | import { slideInRight, slideInLeft, slideInTop, slideInBottom, slideInTopRight, slideInTopLeft, slideInBottomRight, slideInBottomLeft, slideOutRight, slideOutLeft, slideOutTop, slideOutBottom, slideOutTopRight, slideOutTopLeft, slideOutBottomRight, slideOutBottomLeft } from './animations/slide'; 3 | import { wrapInVertical, wrapOutVertical, wrapInHorizontal, wrapOutHorizontal } from './animations/wrap'; 4 | import { flipInHorizontal, flipOutHorizontal, flipInVertical, flipOutVertical, flipInHorizontalRight, flipInHorizontalLeft, flipInHorizontalTop, flipInHorizontalBottom, flipOutHorizontalRight, flipOutHorizontalLeft, flipOutHorizontalTop, flipOutHorizontalBottom, flipInVerticalRight, flipInVerticalLeft, flipInVerticalTop, flipInVerticalBottom, flipOutVerticalRight, flipOutVerticalLeft, flipOutVerticalTop, flipOutVerticalBottom } from './animations/flip'; 5 | import { zoomIn, zoomInRight, zoomInLeft, zoomInTop, zoomInBottom, zoomInTopRight, zoomInTopLeft, zoomInBottomRight, zoomInBottomLeft, zoomOut, zoomOutRight, zoomOutLeft, zoomOutTop, zoomOutBottom, zoomOutTopRight, zoomOutTopLeft, zoomOutBottomRight, zoomOutBottomLeft } from './animations/zoom'; 6 | import { rotateIn, rotateInBottomLeft, rotateInBottomRight, rotateInTopLeft, rotateInTopRight, rotateOut, rotateOutBottomLeft, rotateOutBottomRight, rotateOutTopLeft, rotateOutTopRight } from './animations/rotate'; 7 | import { skewInRight, skewInLeft, skewOutRight, skewOutLeft } from './animations/skew'; 8 | import { rollIn, rollOut } from './animations/roll'; 9 | import { puffIn, puffOut } from './animations/puff'; 10 | import { blurIn, blurOut } from './animations/blur'; 11 | import { vanishIn, vanishOut } from './animations/vanish'; 12 | import { perspectiveInRight, perspectiveInLeft, perspectiveInTop, perspectiveInBottom, perspectiveOutRight, perspectiveOutLeft, perspectiveOutTop, perspectiveOutBottom } from './animations/perspective'; 13 | import { openTopLeft, openTopRight, openBottomLeft, openBottomRight, closeTopLeft, closeTopRight, closeBottomLeft, closeBottomRight } from './animations/openClose'; 14 | import { textIn, textOut } from './animations/text'; 15 | import customAnimation from './animations/customAnimation'; 16 | // Attention seekers 17 | import { jello } from './animations/attentionSeekers/jello'; 18 | import { bounce } from './animations/attentionSeekers/bounce'; 19 | import { pulse } from './animations/attentionSeekers/pulse'; 20 | import { flash } from './animations/attentionSeekers/flash'; 21 | import { headShake } from './animations/attentionSeekers/headShake'; 22 | import { rubberBand } from './animations/attentionSeekers/rubberBand'; 23 | import { shakeHorizontal } from './animations/attentionSeekers/shakeHorizontal'; 24 | import { shakeVertical } from './animations/attentionSeekers/shakeVertical'; 25 | import { swing } from './animations/attentionSeekers/swing'; 26 | import { tada } from './animations/attentionSeekers/tada'; 27 | import { wobble } from './animations/attentionSeekers/wobble'; 28 | import { heartBeat } from './animations/attentionSeekers/heartBeat'; 29 | import { puff } from './animations/attentionSeekers/puff'; 30 | import { spin } from './animations/attentionSeekers/spin'; 31 | export { 32 | // Customize 33 | customAnimation, 34 | // Fade animations 35 | fadeIn, fadeOut, 36 | // Slide animations 37 | slideInRight, slideInLeft, slideInTop, slideInBottom, slideInTopRight, slideInTopLeft, slideInBottomRight, slideInBottomLeft, slideOutRight, slideOutLeft, slideOutTop, slideOutBottom, slideOutTopRight, slideOutTopLeft, slideOutBottomRight, slideOutBottomLeft, 38 | // Wrap animations 39 | wrapInVertical, wrapOutVertical, wrapInHorizontal, wrapOutHorizontal, 40 | // flip 41 | flipInHorizontal, flipOutHorizontal, flipInVertical, flipOutVertical, flipInHorizontalRight, flipInHorizontalLeft, flipInHorizontalTop, flipInHorizontalBottom, flipOutHorizontalRight, flipOutHorizontalLeft, flipOutHorizontalTop, flipOutHorizontalBottom, flipInVerticalRight, flipInVerticalLeft, flipInVerticalTop, flipInVerticalBottom, flipOutVerticalRight, flipOutVerticalLeft, flipOutVerticalTop, flipOutVerticalBottom, 42 | // zoom 43 | zoomIn, zoomInRight, zoomInLeft, zoomInTop, zoomInBottom, zoomInTopRight, zoomInTopLeft, zoomInBottomRight, zoomInBottomLeft, zoomOut, zoomOutRight, zoomOutLeft, zoomOutTop, zoomOutBottom, zoomOutTopRight, zoomOutTopLeft, zoomOutBottomRight, zoomOutBottomLeft, 44 | // Rotations 45 | rotateIn, rotateInBottomLeft, rotateInBottomRight, rotateInTopLeft, rotateInTopRight, rotateOut, rotateOutBottomLeft, rotateOutBottomRight, rotateOutTopLeft, rotateOutTopRight, 46 | // Skew 47 | skewInRight, skewInLeft, skewOutRight, skewOutLeft, 48 | // Roll 49 | rollIn, rollOut, 50 | // Puff 51 | puffIn, puffOut, 52 | // Blur 53 | blurIn, blurOut, 54 | // Vanish 55 | vanishIn, vanishOut, 56 | // Perspective 57 | perspectiveInRight, perspectiveInLeft, perspectiveInTop, perspectiveInBottom, perspectiveOutRight, perspectiveOutLeft, perspectiveOutTop, perspectiveOutBottom, 58 | // open and close 59 | openTopLeft, openTopRight, openBottomLeft, openBottomRight, closeTopLeft, closeTopRight, closeBottomLeft, closeBottomRight, 60 | // Texts 61 | textIn, textOut, 62 | // Attention seekers 63 | puff, jello, bounce, spin, pulse, flash, rubberBand, headShake, shakeHorizontal, shakeVertical, swing, tada, wobble, heartBeat }; 64 | -------------------------------------------------------------------------------- /dist/utils/animate.d.ts: -------------------------------------------------------------------------------- 1 | import { Options, ExcludedOptionsKeys } from './types'; 2 | declare const animate: (direction: string, target: HTMLElement | any, done: (() => void), options?: Options, properties?: Record) => Promise; 3 | export default animate; 4 | -------------------------------------------------------------------------------- /dist/utils/animate.js: -------------------------------------------------------------------------------- 1 | import { __assign } from "tslib"; 2 | import { gsap } from 'gsap'; 3 | import { isValidOptions } from './runtimeChecks'; 4 | // Function to perform animations with GSAP 5 | var animate = function (direction, target, done, options, properties) { 6 | if (options === void 0) { options = {}; } 7 | return new Promise(function (resolve, reject) { 8 | try { 9 | // Default animation settings 10 | var defOptions = { 11 | duration: 0.5, // Duration of the animation in seconds 12 | opacity: 0.1, // Initial opacity value 13 | delay: 0, // Start the animation immediatey by default 14 | ease: "power1.inOut", // Easing Function 15 | filter: "blur(0px)" // blur effect 16 | }; 17 | // Assign element dataset here 18 | var data = target.dataset; 19 | // Check if there are any dataset attributes present on the target element 20 | if (Object.keys(data).length > 0) { 21 | // Create an options object with values from the dataset or fallback to default values if not present 22 | // These are properties that must be passed as numbers to gsap 23 | var optionsData = { 24 | duration: parseFloat(data.avDuration) || defOptions.duration, 25 | delay: parseFloat(data.avDelay) || defOptions.delay 26 | }; 27 | // Update the 'options' variable with the newly created options object 28 | options = __assign(__assign({}, optionsData), options); 29 | } 30 | // Validate the options object to ensure it contains only allowed properties, if not stop 31 | if (!isValidOptions(options)) { 32 | console.error('Options object should only include: duration(number), fade(number), delay(number), ease(string), offset(string), onStart(func), and onComplete(func)'); 33 | return; 34 | } 35 | // Define value for fade effect 36 | var fadeOption = options.fade || data.avFade; 37 | // Define value for blur effect 38 | var blurOption = "blur(".concat(options.blur || data.avBlur, "px)"); 39 | // This func maps a custom easing name to a GSAP easing value. 40 | var setEase = function (selectedEase) { 41 | // Define a mapping from custom easing names to GSAP easing values 42 | var easings = { 43 | linear: "none", 44 | ease: "power1.inOut", 45 | easeIn: "power1.in", 46 | easeOut: "power1.out", 47 | bounce: "bounce.inOut", 48 | bounceIn: "bounce.in", 49 | bounceOut: "bounce.out", 50 | back: "back.inOut", 51 | backIn: "back.in", 52 | backOut: "back.out", 53 | elastic: "elastic.inOut", 54 | elasticIn: "elastic.in", 55 | elasticOut: "elastic.out" 56 | }; 57 | // If no easing option is specified, default to 'ease' 58 | if (selectedEase === undefined) { 59 | return easings.ease; 60 | } 61 | // If specifid easing exists represent with actual gsap value then return 62 | if (selectedEase in easings) { 63 | return easings[selectedEase]; 64 | } 65 | else { 66 | // Log an error if the easing option is invalid and return the default 'ease' value 67 | console.error("Animate4vue: Invalid ease:".concat(selectedEase, ". Accepts: ").concat(Object.keys(easings).join(', '))); 68 | return easings.ease; 69 | } 70 | }; 71 | // Merge default options with provided options and additional properties 72 | var allProperties = __assign(__assign(__assign(__assign({}, defOptions), options), { opacity: parseFloat(fadeOption) || defOptions.opacity, filter: blurOption }), properties); 73 | // Remove properties not needed 74 | delete allProperties.fade; 75 | delete allProperties.blur; 76 | // Initialize timeline animation of element 77 | var timeline = gsap.timeline(); 78 | // Perform the animation based on the direction ('in(enter)' or 'out(leave') 79 | if (direction === 'in') { // Animation to enter 80 | // Animate from the target state to the default state (e.g. fade in) 81 | timeline.from(target, __assign(__assign({}, allProperties), { ease: (options.ease && setEase(options.ease)) || setEase(data.avEnterEase) || setEase(data.avEase) || (properties === null || properties === void 0 ? void 0 : properties.ease) })) 82 | .to(target, { onComplete: function () { 83 | done(); // Let vue know animation is complete 84 | resolve(); // Resolve promise 85 | } 86 | }); 87 | } 88 | else { // animation to leave 89 | // Animate to the end state (e.g., fade out) 90 | timeline.to(target, __assign(__assign({}, allProperties), { ease: (options.ease && setEase(options.ease)) || setEase(data.avLeaveEase) || setEase(data.avEase) || (properties === null || properties === void 0 ? void 0 : properties.ease) })) 91 | .to(target, { 92 | onStart: function () { return done(); }, // Let vue know animation is complete 93 | onComplete: function () { return resolve(); } // Resolve promise 94 | }); 95 | } 96 | } 97 | catch (err) { 98 | reject('Animate4vue: ' + err); 99 | } 100 | }); 101 | }; 102 | export default animate; 103 | -------------------------------------------------------------------------------- /dist/utils/animationIsRunning.d.ts: -------------------------------------------------------------------------------- 1 | import './globalTypes'; 2 | declare const animationIsRunning: (element: HTMLElement | any) => boolean; 3 | export default animationIsRunning; 4 | -------------------------------------------------------------------------------- /dist/utils/animationIsRunning.js: -------------------------------------------------------------------------------- 1 | import './globalTypes'; 2 | var animationIsRunning = function (element) { 3 | if (window.attAnimation && window.attAnimation === element) { 4 | // If the current element is already animating 5 | return true; 6 | } 7 | else { 8 | // Mark the element as currently animating by storing it in a global variable 9 | window.attAnimation = element; 10 | return false; 11 | } 12 | }; 13 | export default animationIsRunning; 14 | -------------------------------------------------------------------------------- /dist/utils/globalTypes.d.ts: -------------------------------------------------------------------------------- 1 | export {}; 2 | declare global { 3 | interface Window { 4 | attAnimation: HTMLElement | any | undefined; 5 | } 6 | } 7 | -------------------------------------------------------------------------------- /dist/utils/globalTypes.js: -------------------------------------------------------------------------------- 1 | export {}; 2 | -------------------------------------------------------------------------------- /dist/utils/runtimeChecks.d.ts: -------------------------------------------------------------------------------- 1 | import { Options, AttentionOptions } from './types'; 2 | export declare const isValidOptions: (options: Options) => boolean; 3 | export declare const isValidAttOptions: (options: AttentionOptions) => boolean; 4 | -------------------------------------------------------------------------------- /dist/utils/runtimeChecks.js: -------------------------------------------------------------------------------- 1 | // This function checks if the properties specified in Options type are included 2 | export var isValidOptions = function (options) { 3 | return (options.onStart === undefined || typeof options.onStart === 'function') && 4 | (options.onComplete === undefined || typeof options.onComplete === 'function') && 5 | (options.duration === undefined || typeof options.duration === 'number') && 6 | (options.delay === undefined || typeof options.delay === 'number') && 7 | (options.fade === undefined || typeof options.fade === 'string' || typeof options.fade === 'number') && 8 | (options.blur === undefined || typeof options.blur === 'string' || typeof options.blur === 'number') && 9 | (options.ease === undefined || typeof options.ease === 'string') && 10 | (options.offset === undefined || typeof options.offset === 'string'); 11 | }; 12 | // This function checks if the properties specified in AttentionOptions type are included 13 | export var isValidAttOptions = function (options) { 14 | return (options.duration === undefined || typeof options.duration === 'number') && 15 | (options.delay === undefined || typeof options.delay === 'number') && (options.loop === undefined || typeof options.loop === 'boolean'); 16 | }; 17 | -------------------------------------------------------------------------------- /dist/utils/setOffset.d.ts: -------------------------------------------------------------------------------- 1 | import { Options } from './types'; 2 | declare const setOffset: (target: any, options: Options) => string | boolean; 3 | export default setOffset; 4 | -------------------------------------------------------------------------------- /dist/utils/setOffset.js: -------------------------------------------------------------------------------- 1 | var setOffset = function (target, options) { 2 | var offsetValue = options && options.offset || target.dataset.avOffset; 3 | if (offsetValue && offsetValue.includes('-')) { 4 | return false; 5 | } 6 | else { 7 | return offsetValue || false; 8 | } 9 | }; 10 | export default setOffset; 11 | -------------------------------------------------------------------------------- /dist/utils/types.d.ts: -------------------------------------------------------------------------------- 1 | /** 2 | * Defines configuration options for animations. 3 | * 4 | * @interface Options 5 | */ 6 | export interface Options { 7 | /** Duration of the animation in seconds. */ 8 | duration?: number; 9 | /** Delay before the animation starts, in seconds. */ 10 | delay?: number; 11 | /** Indicates the enter and leave opacity of the animation. 0 to 1. */ 12 | fade?: number; 13 | /** Easing of the animation. Accepts: linear, easeIn, easeOut, ease, bounceIn, bounceOut, bounce, backIn, backOut, back, elasticIn, elasticOut, elastic */ 14 | ease?: string; 15 | /** 16 | * Defines the initial distance from which the animation should begin/end. 17 | * Only applicable to animations involving movement in right, left, up & down. 18 | */ 19 | offset?: string; 20 | /** 21 | * Defines the intensity of the blur effect applied to the animation. 22 | * A higher number results in a stronger blur. 23 | */ 24 | blur?: number; 25 | /** Callback function executed when the animation starts. */ 26 | onStart?: () => void; 27 | /** Callback function executed when the animation completes. */ 28 | onComplete?: () => void; 29 | } 30 | /** 31 | * Type representing keys that are not part of the `Options` interface. 32 | * Useful for creating types that exclude properties defined in `Options`. 33 | * 34 | * @type ExcludedOptionsKeys 35 | */ 36 | export type ExcludedOptionsKeys = Exclude; 37 | /** 38 | * Defines configuration options for attention seekers. 39 | * 40 | * @interface AttentionOptions 41 | */ 42 | export interface AttentionOptions { 43 | /** Duration of the animation in seconds. */ 44 | duration?: number; 45 | /** Delay before the animation starts, in seconds. Also denotes repeat delay if thits on loop. */ 46 | delay?: number; 47 | /** Indicator wether the animation should repeat or not. */ 48 | loop?: boolean; 49 | } 50 | -------------------------------------------------------------------------------- /dist/utils/types.js: -------------------------------------------------------------------------------- 1 | export {}; 2 | -------------------------------------------------------------------------------- /md_assets/animate4vue.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | 19 | 20 | 21 | 22 | 23 | 24 | -------------------------------------------------------------------------------- /md_assets/demo1.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/artisticLogicMK/animate4vue/a54fa85160e663bf0f5e9be7812b09888bd4d41c/md_assets/demo1.gif -------------------------------------------------------------------------------- /md_assets/demo2.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/artisticLogicMK/animate4vue/a54fa85160e663bf0f5e9be7812b09888bd4d41c/md_assets/demo2.gif -------------------------------------------------------------------------------- /md_assets/demo3.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/artisticLogicMK/animate4vue/a54fa85160e663bf0f5e9be7812b09888bd4d41c/md_assets/demo3.gif -------------------------------------------------------------------------------- /md_assets/demo4.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/artisticLogicMK/animate4vue/a54fa85160e663bf0f5e9be7812b09888bd4d41c/md_assets/demo4.gif -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "animate4vue", 3 | "version": "1.3.6", 4 | "description": "A library for ready-to-use animations designed for Vue.js applications, featuring over 100 high-performance UI animations crafted with GSAP, offering GPU-accelerated rendering with better performance and efficiency across all devices.", 5 | "main": "dist/index.esm.js", 6 | "types": "dist/index.d.ts", 7 | "scripts": { 8 | "build": "tsc && rollup -c", 9 | "build-only": "rollup -c" 10 | }, 11 | "type": "module", 12 | "repository": { 13 | "type": "git", 14 | "url": "git+https://github.com/artisticLogicMK/animate4vue.git" 15 | }, 16 | "keywords": [ 17 | "animation", 18 | "animate", 19 | "vue", 20 | "gsap", 21 | "animation-library", 22 | "ui", 23 | "frontend", 24 | "vue-animation", 25 | "web-animation", 26 | "animate-website", 27 | "transition" 28 | ], 29 | "author": "MK", 30 | "license": "MIT", 31 | "homepage": "https://github.com/artisticLogicMK/animate4vue#readme", 32 | "devDependencies": { 33 | "@rollup/plugin-node-resolve": "^15.2.3", 34 | "@rollup/plugin-typescript": "^11.1.6", 35 | "@types/node": "^20.14.12", 36 | "esbuild": "^0.23.0", 37 | "rollup": "^4.19.0", 38 | "rollup-plugin-esbuild": "^6.1.1", 39 | "terser": "^5.31.3", 40 | "typescript": "^5.5.4" 41 | }, 42 | "dependencies": { 43 | "gsap": "^3.12.5", 44 | "tslib": "^2.6.3" 45 | } 46 | } 47 | -------------------------------------------------------------------------------- /rollup.config.js: -------------------------------------------------------------------------------- 1 | import resolve from '@rollup/plugin-node-resolve' 2 | import typescript from '@rollup/plugin-typescript' 3 | import esbuild from 'rollup-plugin-esbuild' 4 | 5 | export default { 6 | input: 'src/index.ts', // Your entry file 7 | output: 8 | { 9 | file: 'dist/index.esm.js', 10 | format: 'esm', // ES Module format 11 | sourcemap: true, 12 | }, 13 | plugins: [ 14 | resolve(), 15 | typescript(), 16 | esbuild({ 17 | minify: true, // Enable minification with esbuild 18 | target: 'es5' 19 | }) 20 | ] 21 | } -------------------------------------------------------------------------------- /src/animations/attentionSeekers/bounce.ts: -------------------------------------------------------------------------------- 1 | import ConstructAnimation from './constructAnimation' 2 | import { AttentionOptions } from '../../utils/types' 3 | import { isValidAttOptions } from '../../utils/runtimeChecks' 4 | import animationIsRunning from '../../utils/animationIsRunning' 5 | 6 | export function bounce(element: HTMLElement | any, options: AttentionOptions) { 7 | 8 | options = {...options} 9 | 10 | // Validate options object to ensure it contains only allowed properties 11 | if (!isValidAttOptions(options)) { 12 | console.error('Options object should only include: duration(number), delay(number), loop(boolean)') 13 | return 14 | } 15 | 16 | // Prevent starting a new animation if the current element is already animating 17 | if (animationIsRunning(element)) return // exit 18 | 19 | return new ConstructAnimation(element, { 20 | keyframes: [ 21 | { y: 0, scaleY: 1, duration: 0.1, ease: "cubic-bezier(0.215, 0.61, 0.355, 1)" }, 22 | { y: -30, scaleY: 1.1, duration: 0.2, ease: "cubic-bezier(0.755, 0.05, 0.855, 0.06)" }, 23 | { y: -15, scaleY: 1.05, duration: 0.2, ease: "cubic-bezier(0.755, 0.05, 0.855, 0.06)" }, 24 | { y: 0, scaleY: 0.95, duration: 0.1, ease: "cubic-bezier(0.215, 0.61, 0.355, 1)" }, 25 | { y: -4, scaleY: 1.02, duration: 0.1 } 26 | ], 27 | repeat: options.loop ? -1 : 0, 28 | repeatDelay: options.delay ? options.delay : 0.111, 29 | duration: options.duration ? options.duration : 2, 30 | yolo: true 31 | }) 32 | } -------------------------------------------------------------------------------- /src/animations/attentionSeekers/constructAnimation.ts: -------------------------------------------------------------------------------- 1 | import gsap from 'gsap' 2 | import '../../utils/globalTypes' 3 | 4 | class ConstructAnimation { 5 | private animation: any 6 | private element: HTMLElement | any 7 | private options: Record 8 | 9 | constructor(element: HTMLElement | any, options: Record) { 10 | this.element = element 11 | this.options = options 12 | this.animation = gsap.to(element, { 13 | ...options, 14 | onComplete: () => { 15 | // If animation is set to perform once, 16 | // Run kill method to clear animation 17 | if (options.repeat === 0) this.kill() 18 | } 19 | }) 20 | } 21 | 22 | kill() { 23 | // Ensure the animation exists before calling kill 24 | if (this.animation) { 25 | this.animation.kill() 26 | 27 | // Clear properties set by GSAP to revert element to its initial state 28 | gsap.set(this.element, { clearProps: "all" }) 29 | 30 | // Clear the global animation state when the animation is finished 31 | window.attAnimation = undefined 32 | } 33 | 34 | return this // Return `this` for chaining 35 | } 36 | } 37 | 38 | export default ConstructAnimation -------------------------------------------------------------------------------- /src/animations/attentionSeekers/flash.ts: -------------------------------------------------------------------------------- 1 | import ConstructAnimation from './constructAnimation' 2 | import { AttentionOptions } from '../../utils/types' 3 | import { isValidAttOptions } from '../../utils/runtimeChecks' 4 | import animationIsRunning from '../../utils/animationIsRunning' 5 | 6 | export function flash(element: HTMLElement | any, options: AttentionOptions) { 7 | 8 | options = {...options} 9 | 10 | // Validate options object to ensure it contains only allowed properties 11 | if (!isValidAttOptions(options)) { 12 | console.error('Options object should only include: duration(number), delay(number), loop(boolean)') 13 | return 14 | } 15 | 16 | // Prevent starting a new animation if the current element is already animating 17 | if (animationIsRunning(element)) return // exit 18 | 19 | return new ConstructAnimation(element, { 20 | keyframes: [ 21 | { opacity: 1, duration: 0.25 }, 22 | { opacity: 0, duration: 0.25 }, 23 | { opacity: 1, duration: 0.25 } 24 | ], 25 | repeat: options.loop ? -1 : 0, 26 | repeatDelay: options.delay ? options.delay : 0.111, 27 | duration: options.duration ? options.duration : 1.2, 28 | yolo: true 29 | }) 30 | } -------------------------------------------------------------------------------- /src/animations/attentionSeekers/headShake.ts: -------------------------------------------------------------------------------- 1 | import ConstructAnimation from './constructAnimation' 2 | import { AttentionOptions } from '../../utils/types' 3 | import { isValidAttOptions } from '../../utils/runtimeChecks' 4 | import animationIsRunning from '../../utils/animationIsRunning' 5 | 6 | export function headShake(element: HTMLElement | any, options: AttentionOptions) { 7 | 8 | options = {...options} 9 | 10 | // Validate options object to ensure it contains only allowed properties 11 | if (!isValidAttOptions(options)) { 12 | console.error('Options object should only include: duration(number), delay(number), loop(boolean)') 13 | return 14 | } 15 | 16 | // Prevent starting a new animation if the current element is already animating 17 | if (animationIsRunning(element)) return // exit 18 | 19 | return new ConstructAnimation(element, { 20 | keyframes: [ 21 | { transform: "translateX(0) rotateY(0deg)", duration: 0.065 }, 22 | { transform: "translateX(-6px) rotateY(-9deg)", duration: 0.065 }, 23 | { transform: "translateX(5px) rotateY(7deg)", duration: 0.12 }, 24 | { transform: "translateX(-3px) rotateY(-5deg)", duration: 0.12 }, 25 | { transform: "translateX(2px) rotateY(3deg)", duration: 0.12 }, 26 | { transform: "translateX(0) rotateY(0deg)", duration: 0.18 } 27 | ], 28 | ease: "power1.inOut", 29 | repeat: options.loop ? -1 : 0, 30 | repeatDelay: options.delay ? options.delay : 0.111, 31 | duration: options.duration ? options.duration : 1.5, 32 | yolo: true 33 | }) 34 | } -------------------------------------------------------------------------------- /src/animations/attentionSeekers/heartBeat.ts: -------------------------------------------------------------------------------- 1 | import ConstructAnimation from './constructAnimation' 2 | import { AttentionOptions } from '../../utils/types' 3 | import { isValidAttOptions } from '../../utils/runtimeChecks' 4 | import animationIsRunning from '../../utils/animationIsRunning' 5 | 6 | export function heartBeat(element: HTMLElement | any, options: AttentionOptions) { 7 | 8 | options = {...options} 9 | 10 | // Validate options object to ensure it contains only allowed properties 11 | if (!isValidAttOptions(options)) { 12 | console.error('Options object should only include: duration(number), delay(number), loop(boolean)') 13 | return 14 | } 15 | 16 | // Prevent starting a new animation if the current element is already animating 17 | if (animationIsRunning(element)) return // exit 18 | 19 | return new ConstructAnimation(element, { 20 | keyframes: [ 21 | { scale: 1, duration: 0.14 }, 22 | { scale: 1.3, duration: 0.14 }, 23 | { scale: 1, duration: 0.14 }, 24 | { scale: 1.3, duration: 0.28 }, 25 | { scale: 1, duration: 0.3 } 26 | ], 27 | ease: "power1.inOut", 28 | repeat: options.loop ? -1 : 0, 29 | repeatDelay: options.delay ? options.delay : 0.111, 30 | duration: options.duration ? options.duration : 1.5, 31 | yolo: true 32 | }) 33 | } -------------------------------------------------------------------------------- /src/animations/attentionSeekers/jello.ts: -------------------------------------------------------------------------------- 1 | import ConstructAnimation from './constructAnimation' 2 | import { AttentionOptions } from '../../utils/types' 3 | import { isValidAttOptions } from '../../utils/runtimeChecks' 4 | import animationIsRunning from '../../utils/animationIsRunning' 5 | 6 | export function jello(element: HTMLElement | any, options: AttentionOptions) { 7 | 8 | options = {...options} 9 | 10 | // Validate options object to ensure it contains only allowed properties 11 | if (!isValidAttOptions(options)) { 12 | console.error('Options object should only include: duration(number), delay(number), loop(boolean)') 13 | return 14 | } 15 | 16 | // Prevent starting a new animation if the current element is already animating 17 | if (animationIsRunning(element)) return // exit 18 | 19 | return new ConstructAnimation(element, { 20 | 21 | keyframes: [ 22 | { skewX: "-12.5deg", skewY: "-12.5deg", ease: "none", duration: 0.222 }, 23 | { skewX: "6.25deg", skewY: "6.25deg", ease: "none", duration: 0.111 }, 24 | { skewX: "-3.125deg", skewY: "-3.125deg", ease: "none", duration: 0.111 }, 25 | { skewX: "1.5625deg", skewY: "1.5625deg", ease: "none", duration: 0.111 }, 26 | { skewX: "-0.78125deg", skewY: "-0.78125deg", ease: "none", duration: 0.111 }, 27 | { skewX: "0.390625deg", skewY: "0.390625deg", ease: "none", duration: 0.111 }, 28 | { skewX: "-0.1953125deg", skewY: "-0.1953125deg", ease: "none", duration: 0.111 } 29 | ], 30 | repeat: options.loop ? -1 : 0, 31 | repeatDelay: options.delay ? options.delay : 0.111, 32 | duration: options.duration ? options.duration : 1, 33 | yolo: true 34 | }) 35 | } -------------------------------------------------------------------------------- /src/animations/attentionSeekers/puff.ts: -------------------------------------------------------------------------------- 1 | import ConstructAnimation from './constructAnimation' 2 | import { AttentionOptions } from '../../utils/types' 3 | import { isValidAttOptions } from '../../utils/runtimeChecks' 4 | import animationIsRunning from '../../utils/animationIsRunning' 5 | 6 | export function puff(element: HTMLElement | any, options: AttentionOptions) { 7 | 8 | options = {...options} 9 | 10 | // Validate options object to ensure it contains only allowed properties 11 | if (!isValidAttOptions(options)) { 12 | console.error('Options object should only include: duration(number), delay(number), loop(boolean)') 13 | return 14 | } 15 | 16 | // Prevent starting a new animation if the current element is already animating 17 | if (animationIsRunning(element)) return // exit 18 | 19 | return new ConstructAnimation(element, { 20 | keyframes: [ 21 | { 22 | scale: 1.5, 23 | filter: "blur(2px)", 24 | transformOrigin: "50% 50%", 25 | opacity: 0, 26 | }, 27 | { 28 | scale: 1, 29 | filter: "blur(0px)", 30 | transformOrigin: "none", 31 | opacity: 1, 32 | }, 33 | ], 34 | ease: "power1.inOut", 35 | repeat: options.loop ? -1 : 0, 36 | repeatDelay: options.delay ? options.delay : 0.111, 37 | duration: options.duration ? options.duration : 1.5, 38 | yolo: true 39 | }) 40 | } -------------------------------------------------------------------------------- /src/animations/attentionSeekers/pulse.ts: -------------------------------------------------------------------------------- 1 | import ConstructAnimation from './constructAnimation' 2 | import { AttentionOptions } from '../../utils/types' 3 | import { isValidAttOptions } from '../../utils/runtimeChecks' 4 | import animationIsRunning from '../../utils/animationIsRunning' 5 | 6 | export function pulse(element: HTMLElement | any, options: AttentionOptions) { 7 | 8 | options = {...options} 9 | 10 | // Validate options object to ensure it contains only allowed properties 11 | if (!isValidAttOptions(options)) { 12 | console.error('Options object should only include: duration(number), delay(number), loop(boolean)') 13 | return 14 | } 15 | 16 | // Prevent starting a new animation if the current element is already animating 17 | if (animationIsRunning(element)) return // exit 18 | 19 | return new ConstructAnimation(element, { 20 | scale: 1.05, 21 | ease: "power1.inOut", 22 | repeat: options.loop ? -1 : 0, 23 | repeatDelay: options.delay ? options.delay : 0.111, 24 | duration: options.duration ? options.duration : 1.5, 25 | yolo: true 26 | }) 27 | } -------------------------------------------------------------------------------- /src/animations/attentionSeekers/rubberBand.ts: -------------------------------------------------------------------------------- 1 | import ConstructAnimation from './constructAnimation' 2 | import { AttentionOptions } from '../../utils/types' 3 | import { isValidAttOptions } from '../../utils/runtimeChecks' 4 | import animationIsRunning from '../../utils/animationIsRunning' 5 | 6 | export function rubberBand(element: HTMLElement | any, options: AttentionOptions) { 7 | 8 | options = {...options} 9 | 10 | // Validate options object to ensure it contains only allowed properties 11 | if (!isValidAttOptions(options)) { 12 | console.error('Options object should only include: duration(number), delay(number), loop(boolean)') 13 | return 14 | } 15 | 16 | // Prevent starting a new animation if the current element is already animating 17 | if (animationIsRunning(element)) return // exit 18 | 19 | return new ConstructAnimation(element, { 20 | keyframes: [ 21 | { scaleX: 1, scaleY: 1, duration: 0.1 }, 22 | { scaleX: 1.25, scaleY: 0.75, duration: 0.1 }, 23 | { scaleX: 0.75, scaleY: 1.25, duration: 0.1 }, 24 | { scaleX: 1.15, scaleY: 0.85, duration: 0.1 }, 25 | { scaleX: 0.95, scaleY: 1.05, duration: 0.1 }, 26 | { scaleX: 1.05, scaleY: 0.95, duration: 0.1 }, 27 | { scaleX: 1, scaleY: 1, duration: 0.1 } 28 | ], 29 | ease: "power1.inOut", 30 | repeat: options.loop ? -1 : 0, 31 | repeatDelay: options.delay ? options.delay : 0.111, 32 | duration: options.duration ? options.duration : 2, 33 | yolo: true 34 | }) 35 | } -------------------------------------------------------------------------------- /src/animations/attentionSeekers/shakeHorizontal.ts: -------------------------------------------------------------------------------- 1 | import ConstructAnimation from './constructAnimation' 2 | import { AttentionOptions } from '../../utils/types' 3 | import { isValidAttOptions } from '../../utils/runtimeChecks' 4 | import animationIsRunning from '../../utils/animationIsRunning' 5 | 6 | export function shakeHorizontal(element: HTMLElement | any, options: AttentionOptions) { 7 | 8 | options = {...options} 9 | 10 | // Validate options object to ensure it contains only allowed properties 11 | if (!isValidAttOptions(options)) { 12 | console.error('Options object should only include: duration(number), delay(number), loop(boolean)') 13 | return 14 | } 15 | 16 | // Prevent starting a new animation if the current element is already animating 17 | if (animationIsRunning(element)) return // exit 18 | 19 | return new ConstructAnimation(element, { 20 | keyframes: [ 21 | { x: 0, duration: 0.1 }, // 0% 22 | { x: -10, duration: 0.1 }, // 10% 23 | { x: 10, duration: 0.1 }, // 20% 24 | { x: -10, duration: 0.1 }, // 30% 25 | { x: 10, duration: 0.1 }, // 40% 26 | { x: -10, duration: 0.1 }, // 50% 27 | { x: 10, duration: 0.1 }, // 60% 28 | { x: -10, duration: 0.1 }, // 70% 29 | { x: 10, duration: 0.1 }, // 80% 30 | { x: -10, duration: 0.1 }, // 90% 31 | { x: 0, duration: 0.1 } // 100% 32 | ], 33 | ease: "power1.inOut", 34 | repeat: options.loop ? -1 : 0, 35 | repeatDelay: options.delay ? options.delay : 0.111, 36 | duration: options.duration ? options.duration : 2, 37 | yolo: true 38 | }) 39 | } -------------------------------------------------------------------------------- /src/animations/attentionSeekers/shakeVertical.ts: -------------------------------------------------------------------------------- 1 | import ConstructAnimation from './constructAnimation' 2 | import { AttentionOptions } from '../../utils/types' 3 | import { isValidAttOptions } from '../../utils/runtimeChecks' 4 | import animationIsRunning from '../../utils/animationIsRunning' 5 | 6 | export function shakeVertical(element: HTMLElement | any, options: AttentionOptions) { 7 | 8 | options = {...options} 9 | 10 | // Validate options object to ensure it contains only allowed properties 11 | if (!isValidAttOptions(options)) { 12 | console.error('Options object should only include: duration(number), delay(number), loop(boolean)') 13 | return 14 | } 15 | 16 | // Prevent starting a new animation if the current element is already animating 17 | if (animationIsRunning(element)) return // exit 18 | 19 | return new ConstructAnimation(element, { 20 | keyframes: [ 21 | { y: 0, duration: 0.1 }, // 0% 22 | { y: -10, duration: 0.1 }, // 10% 23 | { y: 10, duration: 0.1 }, // 20% 24 | { y: -10, duration: 0.1 }, // 30% 25 | { y: 10, duration: 0.1 }, // 40% 26 | { y: -10, duration: 0.1 }, // 50% 27 | { y: 10, duration: 0.1 }, // 60% 28 | { y: -10, duration: 0.1 }, // 70% 29 | { y: 10, duration: 0.1 }, // 80% 30 | { y: -10, duration: 0.1 }, // 90% 31 | { y: 0, duration: 0.1 } // 100% 32 | ], 33 | ease: "power1.inOut", 34 | repeat: options.loop ? -1 : 0, 35 | repeatDelay: options.delay ? options.delay : 0.111, 36 | duration: options.duration ? options.duration : 2, 37 | yolo: true 38 | }) 39 | } -------------------------------------------------------------------------------- /src/animations/attentionSeekers/spin.ts: -------------------------------------------------------------------------------- 1 | import ConstructAnimation from './constructAnimation' 2 | import { AttentionOptions } from '../../utils/types' 3 | import { isValidAttOptions } from '../../utils/runtimeChecks' 4 | import animationIsRunning from '../../utils/animationIsRunning' 5 | 6 | export function spin(element: HTMLElement | any, options: AttentionOptions) { 7 | 8 | options = {...options} 9 | 10 | // Validate options object to ensure it contains only allowed properties 11 | if (!isValidAttOptions(options)) { 12 | console.error('Options object should only include: duration(number), delay(number), loop(boolean)') 13 | return 14 | } 15 | 16 | // Prevent starting a new animation if the current element is already animating 17 | if (animationIsRunning(element)) return // exit 18 | 19 | return new ConstructAnimation(element, { 20 | rotate: 360, 21 | ease: "power1.inOut", 22 | repeat: options.loop ? -1 : 0, 23 | repeatDelay: options.delay ? options.delay : 0.111, 24 | duration: options.duration ? options.duration : 1.6, 25 | yolo: true 26 | }) 27 | } -------------------------------------------------------------------------------- /src/animations/attentionSeekers/swing.ts: -------------------------------------------------------------------------------- 1 | import ConstructAnimation from './constructAnimation' 2 | import { AttentionOptions } from '../../utils/types' 3 | import { isValidAttOptions } from '../../utils/runtimeChecks' 4 | import animationIsRunning from '../../utils/animationIsRunning' 5 | 6 | export function swing(element: HTMLElement | any, options: AttentionOptions) { 7 | 8 | options = {...options} 9 | 10 | // Validate options object to ensure it contains only allowed properties 11 | if (!isValidAttOptions(options)) { 12 | console.error('Options object should only include: duration(number), delay(number), loop(boolean)') 13 | return 14 | } 15 | 16 | // Prevent starting a new animation if the current element is already animating 17 | if (animationIsRunning(element)) return // exit 18 | 19 | return new ConstructAnimation(element, { 20 | rotation: 15, 21 | transformOrigin: 'top center', 22 | keyframes: [ 23 | { rotation: 15, duration: 0.2 }, 24 | { rotation: -10, duration: 0.2 }, 25 | { rotation: 5, duration: 0.2 }, 26 | { rotation: -5, duration: 0.2 }, 27 | { rotation: 0, duration: 0.2 } 28 | ], 29 | ease: "power1.inOut", 30 | repeat: options.loop ? -1 : 0, 31 | repeatDelay: options.delay ? options.delay : 0.111, 32 | duration: options.duration ? options.duration : 1.2, 33 | yolo: true 34 | }) 35 | } -------------------------------------------------------------------------------- /src/animations/attentionSeekers/tada.ts: -------------------------------------------------------------------------------- 1 | import ConstructAnimation from './constructAnimation' 2 | import { AttentionOptions } from '../../utils/types' 3 | import { isValidAttOptions } from '../../utils/runtimeChecks' 4 | import animationIsRunning from '../../utils/animationIsRunning' 5 | 6 | export function tada(element: HTMLElement | any, options: AttentionOptions) { 7 | 8 | options = {...options} 9 | 10 | // Validate options object to ensure it contains only allowed properties 11 | if (!isValidAttOptions(options)) { 12 | console.error('Options object should only include: duration(number), delay(number), loop(boolean)') 13 | return 14 | } 15 | 16 | // Prevent starting a new animation if the current element is already animating 17 | if (animationIsRunning(element)) return // exit 18 | 19 | return new ConstructAnimation(element, { 20 | keyframes: [ 21 | { scaleX: 1, scaleY: 1, rotationZ: 0, duration: 0.2 }, 22 | { scaleX: 0.9, scaleY: 0.9, rotationZ: -3, duration: 0.2 }, 23 | { scaleX: 1.1, scaleY: 1.1, rotationZ: 3, duration: 0.2 }, 24 | { scaleX: 1.1, scaleY: 1.1, rotationZ: -3, duration: 0.2 }, 25 | { scaleX: 1.1, scaleY: 1.1, rotationZ: 3, duration: 0.2 }, 26 | { scaleX: 1.1, scaleY: 1.1, rotationZ: -3, duration: 0.2 }, 27 | { scaleX: 1, scaleY: 1, rotationZ: 0, duration: 0.2 } 28 | ], 29 | transformOrigin: 'center center', 30 | ease: "power1.inOut", 31 | repeat: options.loop ? -1 : 0, 32 | repeatDelay: options.delay ? options.delay : 0.111, 33 | duration: options.duration ? options.duration : 1.4, 34 | yolo: true 35 | }) 36 | } -------------------------------------------------------------------------------- /src/animations/attentionSeekers/wobble.ts: -------------------------------------------------------------------------------- 1 | import ConstructAnimation from './constructAnimation' 2 | import { AttentionOptions } from '../../utils/types' 3 | import { isValidAttOptions } from '../../utils/runtimeChecks' 4 | import animationIsRunning from '../../utils/animationIsRunning' 5 | 6 | export function wobble(element: HTMLElement | any, options: AttentionOptions) { 7 | 8 | options = {...options} 9 | 10 | // Validate options object to ensure it contains only allowed properties 11 | if (!isValidAttOptions(options)) { 12 | console.error('Options object should only include: duration(number), delay(number), loop(boolean)') 13 | return 14 | } 15 | 16 | // Prevent starting a new animation if the current element is already animating 17 | if (animationIsRunning(element)) return // exit 18 | 19 | return new ConstructAnimation(element, { 20 | keyframes: [ 21 | { xPercent: 0, rotation: 0, duration: 0.2 }, 22 | { xPercent: -25, rotation: -5, duration: 0.15 }, 23 | { xPercent: 20, rotation: 3, duration: 0.15 }, 24 | { xPercent: -15, rotation: -3, duration: 0.15 }, 25 | { xPercent: 10, rotation: 2, duration: 0.15 }, 26 | { xPercent: -5, rotation: -1, duration: 0.15 }, 27 | { xPercent: 0, rotation: 0, duration: 0.2 } 28 | ], 29 | transformOrigin: 'center center', 30 | ease: "power1.inOut", 31 | repeat: options.loop ? -1 : 0, 32 | repeatDelay: options.delay ? options.delay : 0.111, 33 | duration: options.duration ? options.duration : 2, 34 | yolo: true 35 | }) 36 | } -------------------------------------------------------------------------------- /src/animations/blur.ts: -------------------------------------------------------------------------------- 1 | import animate from '../utils/animate' 2 | import { Options } from '../utils/types' 3 | 4 | const blurOptions = { 5 | opacity: 0.5, 6 | filter: "blur(6px)" 7 | } 8 | 9 | const blurIn = (target: HTMLElement | any, done: (() => void), options: Options): Promise => { 10 | return animate('in', target, done, options, blurOptions ) 11 | } 12 | 13 | const blurOut = (target: HTMLElement | any, done: (() => void), options: Options): Promise => { 14 | return animate('out', target, done, options, blurOptions) 15 | } 16 | 17 | export { blurIn, blurOut } -------------------------------------------------------------------------------- /src/animations/customAnimation.ts: -------------------------------------------------------------------------------- 1 | /** 2 | * Handles custom animations for entering and leaving a target element. 3 | * 4 | * @param {HTMLElement | any} target - The element or target to apply the animation to. 5 | * @param {() => void} done - A callback function to be called when the animation is complete. 6 | * @param {"enter" | "leave"} direction - Specifies whether the animation is for entering or leaving. 7 | * @param {object} config - Configuration object containing animation properties. 8 | * @returns {Promise} - A promise that resolves when the animation is complete. 9 | */ 10 | 11 | import { gsap } from 'gsap' 12 | 13 | const customAnimation = ( 14 | target: HTMLElement | any, 15 | done: (() => void), 16 | direction: "enter" | "leave", 17 | config: object 18 | ): Promise => { 19 | return new Promise((resolve, reject) => { 20 | 21 | try { 22 | // Initialize timeline animation of element 23 | const timeline = gsap.timeline() 24 | 25 | // Perform the animation based on the direction 'enter' or 'leave' 26 | if (direction === 'enter') { // Animation to enter 27 | // Animate from the target state to the default state (e.g. fade in) 28 | timeline.from(target, config) 29 | timeline.to(target, { onComplete: () => { 30 | done() // Let vue know animation is complete 31 | resolve() // Resolve promise 32 | } 33 | }) 34 | } 35 | 36 | else { 37 | // Animate from the default state to the target state (e.g. fade in) 38 | timeline.to(target, config) 39 | timeline.to(target, { 40 | onStart: () => done(), // Let vue know animation is complete 41 | onComplete: () => resolve() // Resolve promise 42 | }) 43 | } 44 | 45 | } catch (error) { 46 | reject('Animate.vue: ' + error) 47 | } 48 | 49 | }) 50 | } 51 | 52 | export default customAnimation -------------------------------------------------------------------------------- /src/animations/fade.ts: -------------------------------------------------------------------------------- 1 | import animate from '../utils/animate' 2 | import { Options } from '../utils/types' 3 | 4 | // entrance animations 5 | const fadeIn = (target: HTMLElement | any, done: (() => void), options: Options): Promise => { 6 | return animate('in', target, done, options) 7 | } 8 | 9 | // leaving animations 10 | const fadeOut = (target: HTMLElement | any, done: (() => void), options: Options): Promise => { 11 | return animate('out', target, done, options) 12 | } 13 | 14 | export { fadeIn, fadeOut } -------------------------------------------------------------------------------- /src/animations/flip.ts: -------------------------------------------------------------------------------- 1 | import animate from '../utils/animate' 2 | import { Options } from '../utils/types' 3 | import setOffset from '../utils/setOffset' 4 | 5 | const flip = (direction: string): object => { 6 | direction = direction === "horizontal" ? "rotationY" : "rotationX" 7 | return { 8 | perspective: 400, 9 | [direction]: 180, 10 | } 11 | } 12 | 13 | const flipInHorizontal = (target: HTMLElement | any, done: (() => void), options: Options): Promise => { 14 | return animate('in', target, done, options, flip('horizontal')) 15 | } 16 | 17 | const flipOutHorizontal = (target: HTMLElement | any, done: (() => void), options: Options): Promise => { 18 | return animate('out', target, done, options, flip('horizontal')) 19 | } 20 | 21 | const flipInVertical = (target: HTMLElement | any, done: (() => void), options: Options): Promise => { 22 | return animate('in', target, done, options, flip('vertical')) 23 | } 24 | 25 | const flipOutVertical = (target: HTMLElement | any, done: (() => void), options: Options): Promise => { 26 | return animate('out', target, done, options, flip('vertical')) 27 | } 28 | 29 | const flipInHorizontalRight = (target: HTMLElement | any, done: (() => void), options: Options): Promise => { 30 | const offset = setOffset(target, options) 31 | return animate('in', target, done, options, Object.assign(flip('horizontal'), { x: offset ? `${offset}` : '100%' })) 32 | } 33 | 34 | const flipInHorizontalLeft = (target: HTMLElement | any, done: (() => void), options: Options): Promise => { 35 | const offset = setOffset(target, options) 36 | return animate('in', target, done, options, Object.assign(flip('horizontal'), { x: offset ? `-${offset}` : '-100%' })) 37 | } 38 | 39 | const flipInHorizontalTop = (target: HTMLElement | any, done: (() => void), options: Options): Promise => { 40 | const offset = setOffset(target, options) 41 | return animate('in', target, done, options, Object.assign(flip('horizontal'), { y: offset ? `-${offset}` : '-100%' })) 42 | } 43 | 44 | const flipInHorizontalBottom = (target: HTMLElement | any, done: (() => void), options: Options): Promise => { 45 | const offset = setOffset(target, options) 46 | return animate('in', target, done, options, Object.assign(flip('horizontal'), { y: offset ? `${offset}` : '100%' })) 47 | } 48 | 49 | const flipOutHorizontalRight = (target: HTMLElement | any, done: (() => void), options: Options): Promise => { 50 | const offset = setOffset(target, options) 51 | return animate('out', target, done, options, Object.assign(flip('horizontal'), { x: offset ? `${offset}` : '100%' })) 52 | } 53 | 54 | const flipOutHorizontalLeft = (target: HTMLElement | any, done: (() => void), options: Options): Promise => { 55 | const offset = setOffset(target, options) 56 | return animate('out', target, done, options, Object.assign(flip('horizontal'), { x: offset ? `-${offset}` : '-100%' })) 57 | } 58 | 59 | const flipOutHorizontalTop = (target: HTMLElement | any, done: (() => void), options: Options): Promise => { 60 | const offset = setOffset(target, options) 61 | return animate('out', target, done, options, Object.assign(flip('horizontal'), { y: offset ? `-${offset}` : '-100%' })) 62 | } 63 | 64 | const flipOutHorizontalBottom = (target: HTMLElement | any, done: (() => void), options: Options): Promise => { 65 | const offset = setOffset(target, options) 66 | return animate('out', target, done, options, Object.assign(flip('horizontal'), { y: offset ? `${offset}` : '100%' })) 67 | } 68 | 69 | // flip verticals 70 | const flipInVerticalRight = (target: HTMLElement | any, done: (() => void), options: Options): Promise => { 71 | const offset = setOffset(target, options) 72 | return animate('in', target, done, options, Object.assign(flip('vertical'), { x: offset ? `-${offset}` : '100%' })) 73 | } 74 | 75 | const flipInVerticalLeft = (target: HTMLElement | any, done: (() => void), options: Options): Promise => { 76 | const offset = setOffset(target, options) 77 | return animate('in', target, done, options, Object.assign(flip('vertical'), { x: offset ? `-${offset}` : '-100%' })) 78 | } 79 | 80 | const flipInVerticalTop = (target: HTMLElement | any, done: (() => void), options: Options): Promise => { 81 | const offset = setOffset(target, options) 82 | return animate('in', target, done, options, Object.assign(flip('vertical'), { y: offset ? `-${offset}` : '-100%' })) 83 | } 84 | 85 | const flipInVerticalBottom = (target: HTMLElement | any, done: (() => void), options: Options): Promise => { 86 | const offset = setOffset(target, options) 87 | return animate('in', target, done, options, Object.assign(flip('vertical'), { y: offset ? `${offset}` : '100%' })) 88 | } 89 | 90 | const flipOutVerticalRight = (target: HTMLElement | any, done: (() => void), options: Options): Promise => { 91 | const offset = setOffset(target, options) 92 | return animate('out', target, done, options, Object.assign(flip('vertical'), { x: offset ? `${offset}` : '100%' })) 93 | } 94 | 95 | const flipOutVerticalLeft = (target: HTMLElement | any, done: (() => void), options: Options): Promise => { 96 | const offset = setOffset(target, options) 97 | return animate('out', target, done, options, Object.assign(flip('vertical'), { x: offset ? `-${offset}` : '-100%' })) 98 | } 99 | 100 | const flipOutVerticalTop = (target: HTMLElement | any, done: (() => void), options: Options): Promise => { 101 | const offset = setOffset(target, options) 102 | return animate('out', target, done, options, Object.assign(flip('vertical'), { y: offset ? `-${offset}` : '-100%' })) 103 | } 104 | 105 | const flipOutVerticalBottom = (target: HTMLElement | any, done: (() => void), options: Options): Promise => { 106 | const offset = setOffset(target, options) 107 | return animate('out', target, done, options, Object.assign(flip('vertical'), { y: offset ? `${offset}` : '100%' })) 108 | } 109 | 110 | export { flipInHorizontal, flipOutHorizontal, flipInVertical, flipOutVertical, flipInHorizontalRight, flipInHorizontalLeft, flipInHorizontalTop, flipInHorizontalBottom, flipOutHorizontalRight, flipOutHorizontalLeft, flipOutHorizontalTop, flipOutHorizontalBottom, flipInVerticalRight, flipInVerticalLeft, flipInVerticalTop, flipInVerticalBottom, flipOutVerticalRight, flipOutVerticalLeft, flipOutVerticalTop, flipOutVerticalBottom } -------------------------------------------------------------------------------- /src/animations/openClose.ts: -------------------------------------------------------------------------------- 1 | import animate from '../utils/animate' 2 | import { Options } from '../utils/types' 3 | 4 | const openOptions = { 5 | ease: "power.inOut" 6 | } 7 | 8 | // entrance animations 9 | const openTopRight = (target: HTMLElement | any, done: (() => void), options: Options): Promise => { 10 | return animate('in', target, done, options, { 11 | ...openOptions, 12 | transformOrigin: "top right", 13 | rotation: -110, 14 | }) 15 | } 16 | 17 | const openTopLeft = (target: HTMLElement | any, done: (() => void), options: Options): Promise => { 18 | return animate('in', target, done, options, { 19 | ...openOptions, 20 | transformOrigin: "top left", 21 | rotation: 110, 22 | }) 23 | } 24 | 25 | const openBottomRight = (target: HTMLElement | any, done: (() => void), options: Options): Promise => { 26 | return animate('in', target, done, options, { 27 | ...openOptions, 28 | transformOrigin: "bottom right", 29 | rotation: 110, 30 | }) 31 | } 32 | 33 | const openBottomLeft = (target: HTMLElement | any, done: (() => void), options: Options): Promise => { 34 | return animate('in', target, done, options, { 35 | ...openOptions, 36 | transformOrigin: "bottom left", 37 | rotation: -110, 38 | }) 39 | } 40 | 41 | 42 | // Leaving animations 43 | const closeTopRight = (target: HTMLElement | any, done: (() => void), options: Options): Promise => { 44 | return animate('out', target, done, options, { 45 | ...openOptions, 46 | transformOrigin: "top right", 47 | rotation: -110, 48 | }) 49 | } 50 | 51 | const closeTopLeft = (target: HTMLElement | any, done: (() => void), options: Options): Promise => { 52 | return animate('out', target, done, options, { 53 | ...openOptions, 54 | transformOrigin: "top left", 55 | rotation: 110, 56 | }) 57 | } 58 | 59 | const closeBottomRight = (target: HTMLElement | any, done: (() => void), options: Options): Promise => { 60 | return animate('out', target, done, options, { 61 | ...openOptions, 62 | transformOrigin: "bottom right", 63 | rotation: -110, 64 | }) 65 | } 66 | 67 | const closeBottomLeft = (target: HTMLElement | any, done: (() => void), options: Options): Promise => { 68 | return animate('out', target, done, options, { 69 | ...openOptions, 70 | transformOrigin: "bottom left", 71 | rotation: 110, 72 | }) 73 | } 74 | 75 | export { openTopLeft, openTopRight, openBottomLeft, openBottomRight, closeTopLeft, closeTopRight, closeBottomLeft, closeBottomRight } -------------------------------------------------------------------------------- /src/animations/perspective.ts: -------------------------------------------------------------------------------- 1 | import animate from '../utils/animate' 2 | import { Options } from '../utils/types' 3 | 4 | const rightOptions = { 5 | transformOrigin: "100% 0", 6 | perspective: "800px", 7 | rotationY: 180 8 | } 9 | const leftOptions = { 10 | transformOrigin: "0 0", 11 | perspective: "800px", 12 | rotationY: -180 13 | } 14 | const topOptions = { 15 | transformOrigin: "0 100%", 16 | perspective: "800px", 17 | rotationX: 180 18 | } 19 | const bottomOptions = { 20 | transformOrigin: "0 0", 21 | perspective: "800px", 22 | rotationX: -180 23 | } 24 | 25 | // entrance animations 26 | const perspectiveInRight = (target: HTMLElement | any, done: (() => void), options: Options): Promise => { 27 | return animate('in', target, done, options, rightOptions) 28 | } 29 | 30 | const perspectiveInLeft = (target: HTMLElement | any, done: (() => void), options: Options): Promise => { 31 | return animate('in', target, done, options, leftOptions) 32 | } 33 | 34 | const perspectiveInTop = (target: HTMLElement | any, done: (() => void), options: Options): Promise => { 35 | return animate('in', target, done, options, topOptions) 36 | } 37 | 38 | const perspectiveInBottom = (target: HTMLElement | any, done: (() => void), options: Options): Promise => { 39 | return animate('in', target, done, options, bottomOptions) 40 | } 41 | 42 | 43 | // leaving animations 44 | const perspectiveOutRight = (target: HTMLElement | any, done: (() => void), options: Options): Promise => { 45 | return animate('out', target, done, options, rightOptions) 46 | } 47 | 48 | const perspectiveOutLeft = (target: HTMLElement | any, done: (() => void), options: Options): Promise => { 49 | return animate('out', target, done, options, leftOptions) 50 | } 51 | 52 | const perspectiveOutTop = (target: HTMLElement | any, done: (() => void), options: Options): Promise => { 53 | return animate('out', target, done, options, topOptions) 54 | } 55 | 56 | const perspectiveOutBottom = (target: HTMLElement | any, done: (() => void), options: Options): Promise => { 57 | return animate('out', target, done, options, bottomOptions) 58 | } 59 | 60 | export { perspectiveInRight, perspectiveInLeft, perspectiveInTop, perspectiveInBottom, perspectiveOutRight, perspectiveOutLeft, perspectiveOutTop, perspectiveOutBottom } -------------------------------------------------------------------------------- /src/animations/puff.ts: -------------------------------------------------------------------------------- 1 | import animate from '../utils/animate' 2 | import { Options } from '../utils/types' 3 | 4 | const puffOptions = { 5 | scale: 2, 6 | filter: "blur(2px)", 7 | transformOrigin: "50% 50%" 8 | } 9 | 10 | const puffIn = (target: HTMLElement | any, done: (() => void), options: Options): Promise => { 11 | return animate('in', target, done, options, puffOptions ) 12 | } 13 | 14 | const puffOut = (target: HTMLElement | any, done: (() => void), options: Options): Promise => { 15 | return animate('out', target, done, options, puffOptions) 16 | } 17 | 18 | export { puffIn, puffOut } -------------------------------------------------------------------------------- /src/animations/roll.ts: -------------------------------------------------------------------------------- 1 | import animate from '../utils/animate' 2 | import { Options } from '../utils/types' 3 | 4 | const rollIn = (target: HTMLElement | any, done: (() => void), options: Options): Promise => { 5 | return animate('in', target, done, options, { 6 | rotationZ: -120, 7 | transformOrigin: "0% 50%" 8 | }) 9 | } 10 | 11 | const rollOut = (target: HTMLElement | any, done: (() => void), options: Options): Promise => { 12 | return animate('out', target, done, options, { 13 | rotationZ: 120, 14 | transformOrigin: "0% 50%" 15 | }) 16 | } 17 | 18 | export { rollIn, rollOut } -------------------------------------------------------------------------------- /src/animations/rotate.ts: -------------------------------------------------------------------------------- 1 | import animate from '../utils/animate' 2 | import { Options } from '../utils/types' 3 | 4 | // entrance animations 5 | const rotateIn = (target: HTMLElement | any, done: (() => void), options: Options): Promise => { 6 | return animate('in', target, done, options, { scale: 0, rotationZ: -200 }) 7 | } 8 | 9 | const rotateInBottomLeft = (target: HTMLElement | any, done: (() => void), options: Options): Promise => { 10 | return animate('in', target, done, options, { 11 | rotationZ: -45 12 | }) 13 | } 14 | 15 | const rotateInBottomRight = (target: HTMLElement | any, done: (() => void), options: Options): Promise => { 16 | return animate('in', target, done, options, { 17 | rotationZ: 45, 18 | }) 19 | } 20 | 21 | const rotateInTopLeft = (target: HTMLElement | any, done: (() => void), options: Options): Promise => { 22 | return animate('in', target, done, options, { 23 | rotationZ: 45, 24 | }) 25 | } 26 | 27 | const rotateInTopRight = (target: HTMLElement | any, done: (() => void), options: Options): Promise => { 28 | return animate('in', target, done, options, { 29 | rotationZ: -90, 30 | }) 31 | } 32 | 33 | 34 | // leaving animations 35 | const rotateOut = (target: HTMLElement | any, done: (() => void), options: Options): Promise => { 36 | return animate('out', target, done, options, { scale: 0, rotationZ: -200 }) 37 | } 38 | 39 | const rotateOutBottomLeft = (target: HTMLElement | any, done: (() => void), options: Options): Promise => { 40 | return animate('out', target, done, options, { 41 | rotationZ: -45 42 | }) 43 | } 44 | 45 | const rotateOutBottomRight = (target: HTMLElement | any, done: (() => void), options: Options): Promise => { 46 | return animate('out', target, done, options, { 47 | rotationZ: 45 48 | }) 49 | } 50 | 51 | const rotateOutTopLeft = (target: HTMLElement | any, done: (() => void), options: Options): Promise => { 52 | return animate('out', target, done, options, { 53 | rotationZ: 45 54 | }) 55 | } 56 | 57 | const rotateOutTopRight = (target: HTMLElement | any, done: (() => void), options: Options): Promise => { 58 | return animate('out', target, done, options, { 59 | rotationZ: -90 60 | }) 61 | } 62 | 63 | 64 | export { rotateIn, rotateInBottomLeft, rotateInBottomRight, rotateInTopLeft, rotateInTopRight, rotateOut, rotateOutBottomLeft, rotateOutBottomRight, rotateOutTopLeft, rotateOutTopRight } -------------------------------------------------------------------------------- /src/animations/skew.ts: -------------------------------------------------------------------------------- 1 | import animate from '../utils/animate' 2 | import { Options } from '../utils/types' 3 | import setOffset from '../utils/setOffset' 4 | 5 | // entrance animations 6 | const skewInRight = (target: HTMLElement | any, done: (() => void), options: Options): Promise => { 7 | const offset = setOffset(target, options) 8 | return animate('in', target, done, options, { 9 | skewX: 30, 10 | ease: 'back.out', 11 | x: offset ? `${offset}` : '100%' 12 | }) 13 | } 14 | 15 | const skewInLeft = (target: HTMLElement | any, done: (() => void), options: Options): Promise => { 16 | const offset = setOffset(target, options) 17 | return animate('in', target, done, options, { 18 | skewX: -30, 19 | ease: 'back.out', 20 | x: offset ? `-${offset}` : '-100%' 21 | }) 22 | } 23 | 24 | 25 | // leaving animations 26 | const skewOutRight = (target: HTMLElement | any, done: (() => void), options: Options): Promise => { 27 | const offset = setOffset(target, options) 28 | return animate('out', target, done, options, { 29 | skewX: 30, 30 | ease: 'back.out', 31 | x: offset ? `${offset}` : '100%' 32 | }) 33 | } 34 | 35 | const skewOutLeft = (target: HTMLElement | any, done: (() => void), options: Options): Promise => { 36 | const offset = setOffset(target, options) 37 | return animate('out', target, done, options, { 38 | skewX: -30, 39 | ease: 'back.out', 40 | x: offset ? `-${offset}` : '-100%' 41 | }) 42 | } 43 | 44 | 45 | export { skewInRight, skewInLeft, skewOutRight, skewOutLeft } -------------------------------------------------------------------------------- /src/animations/slide.ts: -------------------------------------------------------------------------------- 1 | import animate from '../utils/animate' 2 | import { Options } from '../utils/types' 3 | import setOffset from '../utils/setOffset' 4 | 5 | // entrance animations 6 | const slideInRight = (target: HTMLElement | any, done: (() => void), options: Options): Promise => { 7 | const offset = setOffset(target, options) 8 | return animate('in', target, done, options, { 9 | x: offset ? `${offset}` : '100%' 10 | }) 11 | } 12 | 13 | const slideInLeft = (target: HTMLElement | any, done: (() => void), options: Options): Promise => { 14 | const offset = setOffset(target, options) 15 | return animate('in', target, done, options, { 16 | x: offset ? `-${offset}` : '-100%' 17 | }) 18 | } 19 | 20 | const slideInTop = (target: HTMLElement | any, done: (() => void), options: Options): Promise => { 21 | const offset = setOffset(target, options) 22 | return animate('in', target, done, options, { 23 | y: offset ? `-${offset}` : '-100%' 24 | }) 25 | } 26 | 27 | const slideInBottom = (target: HTMLElement | any, done: (() => void), options: Options): Promise => { 28 | const offset = setOffset(target, options) 29 | return animate('in', target, done, options, { 30 | y: offset ? `${offset}` : '100%' 31 | }) 32 | } 33 | 34 | const slideInTopRight = (target: HTMLElement | any, done: (() => void), options: Options): Promise => { 35 | const offset = setOffset(target, options) 36 | return animate('in', target, done, options, { 37 | y: offset ? `-${offset}` : '-100%', 38 | x: offset ? `${offset}` : '100%' 39 | }) 40 | } 41 | 42 | const slideInTopLeft = (target: HTMLElement | any, done: (() => void), options: Options): Promise => { 43 | const offset = setOffset(target, options) 44 | return animate('in', target, done, options, { 45 | y: offset ? `-${offset}` : '-100%', 46 | x: offset ? `-${offset}` : '-100%' 47 | }) 48 | } 49 | 50 | const slideInBottomRight = (target: HTMLElement | any, done: (() => void), options: Options): Promise => { 51 | const offset = setOffset(target, options) 52 | return animate('in', target, done, options, { 53 | y: offset ? `${offset}` : '100%', 54 | x: offset ? `${offset}` : '100%' 55 | }) 56 | } 57 | 58 | const slideInBottomLeft = (target: HTMLElement | any, done: (() => void), options: Options): Promise => { 59 | const offset = setOffset(target, options) 60 | return animate('in', target, done, options, { 61 | y: offset ? `${offset}` : '100%', 62 | x: offset ? `-${offset}` : '-100%' 63 | }) 64 | } 65 | 66 | 67 | 68 | // leaving animations 69 | const slideOutRight = (target: HTMLElement | any, done: (() => void), options: Options): Promise => { 70 | const offset = setOffset(target, options) 71 | return animate('out', target, done, options, { 72 | x: offset ? `${offset}` : '100%' 73 | }) 74 | } 75 | 76 | const slideOutLeft = (target: HTMLElement | any, done: (() => void), options: Options): Promise => { 77 | const offset = setOffset(target, options) 78 | return animate('out', target, done, options, { 79 | x: offset ? `-${offset}` : '-100%' 80 | }) 81 | } 82 | 83 | const slideOutTop = (target: HTMLElement | any, done: (() => void), options: Options): Promise => { 84 | const offset = setOffset(target, options) 85 | return animate('out', target, done, options, { 86 | y: offset ? `-${offset}` : '-100%' 87 | }) 88 | } 89 | 90 | const slideOutBottom = (target: HTMLElement | any, done: (() => void), options: Options): Promise => { 91 | const offset = setOffset(target, options) 92 | return animate('out', target, done, options, { 93 | y: offset ? `${offset}` : '100%' 94 | }) 95 | } 96 | 97 | const slideOutTopRight = (target: HTMLElement | any, done: (() => void), options: Options): Promise => { 98 | const offset = setOffset(target, options) 99 | return animate('out', target, done, options, { 100 | y: offset ? `-${offset}` : '-100%', 101 | x: offset ? `${offset}` : '100%' 102 | }) 103 | } 104 | 105 | const slideOutTopLeft = (target: HTMLElement | any, done: (() => void), options: Options): Promise => { 106 | const offset = setOffset(target, options) 107 | return animate('out', target, done, options, { 108 | y: offset ? `-${offset}` : '-100%', 109 | x: offset ? `-${offset}` : '-100%' 110 | }) 111 | } 112 | 113 | const slideOutBottomRight = (target: HTMLElement | any, done: (() => void), options: Options): Promise => { 114 | const offset = setOffset(target, options) 115 | return animate('out', target, done, options, { 116 | y: offset ? `${offset}` : '100%', 117 | x: offset ? `${offset}` : '100%' 118 | }) 119 | } 120 | 121 | const slideOutBottomLeft = (target: HTMLElement | any, done: (() => void), options: Options): Promise => { 122 | const offset = setOffset(target, options) 123 | return animate('out', target, done, options, { 124 | y: offset ? `${offset}` : '100%', 125 | x: offset ? `-${offset}` : '-100%' 126 | }) 127 | } 128 | 129 | export { slideInRight, slideInLeft, slideInTop, slideInBottom, slideInTopRight, slideInTopLeft, slideInBottomRight, slideInBottomLeft, slideOutRight, slideOutLeft, slideOutTop, slideOutBottom, slideOutTopRight, slideOutTopLeft, slideOutBottomRight, slideOutBottomLeft } -------------------------------------------------------------------------------- /src/animations/text.ts: -------------------------------------------------------------------------------- 1 | import animate from '../utils/animate' 2 | import { Options } from '../utils/types' 3 | import { gsap } from 'gsap' 4 | import TextPlugin from 'gsap/TextPlugin' 5 | 6 | gsap.registerPlugin(TextPlugin) 7 | 8 | const textOptions = { 9 | opacity: 1, 10 | text: '', 11 | } 12 | 13 | // entrance animations 14 | const textIn = (target: HTMLElement | any, done: (() => void), options: Options): Promise => { 15 | return animate('in', target, done, options, { 16 | ...textOptions, 17 | duration: options?.duration || parseFloat(target.dataset.avDuration) || 1 18 | }) 19 | } 20 | 21 | // leaving animations 22 | const textOut = (target: HTMLElement | any, done: (() => void), options: Options): Promise => { 23 | return animate('out', target, done, options, { 24 | ...textOptions, 25 | duration: options?.duration || parseFloat(target.dataset.avDuration) || 1 26 | }) 27 | } 28 | 29 | export { textIn, textOut } -------------------------------------------------------------------------------- /src/animations/vanish.ts: -------------------------------------------------------------------------------- 1 | import animate from '../utils/animate' 2 | import { Options } from '../utils/types' 3 | 4 | const vanishOptions = { 5 | scale: 2, 6 | filter: "blur(90px)", 7 | transformOrigin: "50% 50%", 8 | } 9 | 10 | const vanishIn = (target: HTMLElement | any, done: (() => void), options: Options): Promise => { 11 | return animate('in', target, done, options, { 12 | ...vanishOptions, 13 | duration: options?.duration || parseFloat(target.dataset.avDuration) || 0.65 14 | }) 15 | } 16 | 17 | const vanishOut = (target: HTMLElement | any, done: (() => void), options: Options): Promise => { 18 | return animate('out', target, done, options, { 19 | ...vanishOptions, 20 | duration: options?.duration || parseFloat(target.dataset.avDuration) || 0.65 21 | }) 22 | } 23 | 24 | export { vanishIn, vanishOut } -------------------------------------------------------------------------------- /src/animations/wrap.ts: -------------------------------------------------------------------------------- 1 | import animate from '../utils/animate' 2 | import { Options } from '../utils/types' 3 | 4 | // List animations 5 | const verticalOptions = { height: 0, opacity: 1, overflowY: 'hidden' } 6 | const horizontalOptions = { width: 0, opacity: 1, overflowX: 'hidden' } 7 | 8 | const wrapInVertical = (target: HTMLElement | any, done: (() => void), options: Options): Promise => { 9 | return animate('in', target, done, options, verticalOptions) 10 | } 11 | 12 | const wrapOutVertical = (target: HTMLElement | any, done: (() => void), options: Options): Promise => { 13 | return animate('out', target, done, options, verticalOptions) 14 | } 15 | 16 | const wrapInHorizontal = (target: HTMLElement | any, done: (() => void), options: Options): Promise => { 17 | return animate('in', target, done, options, horizontalOptions) 18 | } 19 | 20 | const wrapOutHorizontal = (target: HTMLElement | any, done: (() => void), options: Options): Promise => { 21 | return animate('out', target, done, options, horizontalOptions) 22 | } 23 | 24 | export { wrapInVertical, wrapOutVertical, wrapInHorizontal, wrapOutHorizontal } -------------------------------------------------------------------------------- /src/animations/zoom.ts: -------------------------------------------------------------------------------- 1 | import animate from '../utils/animate' 2 | import { Options } from '../utils/types' 3 | import setOffset from '../utils/setOffset' 4 | 5 | // entrance animations 6 | const zoomIn = (target: HTMLElement | any, done: (() => void), options: Options): Promise => { 7 | return animate('in', target, done, options, { scale: 0 }) 8 | } 9 | 10 | const zoomInRight = (target: HTMLElement | any, done: (() => void), options: Options): Promise => { 11 | const offset = setOffset(target, options) 12 | return animate('in', target, done, options, { 13 | scale: 0, 14 | x: offset ? `${offset}` : '100%' 15 | }) 16 | } 17 | 18 | const zoomInLeft = (target: HTMLElement | any, done: (() => void), options: Options): Promise => { 19 | const offset = setOffset(target, options) 20 | return animate('in', target, done, options, { 21 | scale: 0, 22 | x: offset ? `-${offset}` : '-100%' 23 | }) 24 | } 25 | 26 | const zoomInTop = (target: HTMLElement | any, done: (() => void), options: Options): Promise => { 27 | const offset = setOffset(target, options) 28 | return animate('in', target, done, options, { 29 | scale: 0, 30 | y: offset ? `-${offset}` : '-100%' 31 | }) 32 | } 33 | 34 | const zoomInBottom = (target: HTMLElement | any, done: (() => void), options: Options): Promise => { 35 | const offset = setOffset(target, options) 36 | return animate('in', target, done, options, { 37 | scale: 0, 38 | y: offset ? `${offset}` : '100%' 39 | }) 40 | } 41 | 42 | const zoomInTopRight = (target: HTMLElement | any, done: (() => void), options: Options): Promise => { 43 | const offset = setOffset(target, options) 44 | return animate('in', target, done, options, { 45 | scale: 0, 46 | y: offset ? `-${offset}` : '-100%', 47 | x: offset ? `${offset}` : '100%' 48 | }) 49 | } 50 | 51 | const zoomInTopLeft = (target: HTMLElement | any, done: (() => void), options: Options): Promise => { 52 | const offset = setOffset(target, options) 53 | return animate('in', target, done, options, { 54 | scale: 0, 55 | y: offset ? `-${offset}` : '-100%', 56 | x: offset ? `-${offset}` : '-100%' 57 | }) 58 | } 59 | 60 | const zoomInBottomRight = (target: HTMLElement | any, done: (() => void), options: Options): Promise => { 61 | const offset = setOffset(target, options) 62 | return animate('in', target, done, options, { 63 | scale: 0, 64 | y: offset ? `${offset}` : '100%', 65 | x: offset ? `${offset}` : '100%' 66 | }) 67 | } 68 | 69 | const zoomInBottomLeft = (target: HTMLElement | any, done: (() => void), options: Options): Promise => { 70 | const offset = setOffset(target, options) 71 | return animate('in', target, done, options, { 72 | scale: 0, 73 | y: offset ? `${offset}` : '100%', 74 | x: offset ? `-${offset}` : '-100%' 75 | }) 76 | } 77 | 78 | 79 | 80 | // leaving animations 81 | const zoomOut = (target: HTMLElement | any, done: (() => void), options: Options): Promise => { 82 | return animate('out', target, done, options, { scale: 0 }) 83 | } 84 | 85 | const zoomOutRight = (target: HTMLElement | any, done: (() => void), options: Options): Promise => { 86 | const offset = setOffset(target, options) 87 | return animate('out', target, done, options, { 88 | scale: 0, 89 | x: offset ? `${offset}` : '100%' 90 | }) 91 | } 92 | 93 | const zoomOutLeft = (target: HTMLElement | any, done: (() => void), options: Options): Promise => { 94 | const offset = setOffset(target, options) 95 | return animate('out', target, done, options, { 96 | scale: 0, 97 | x: offset ? `-${offset}` : '-100%' 98 | }) 99 | } 100 | 101 | const zoomOutTop = (target: HTMLElement | any, done: (() => void), options: Options): Promise => { 102 | const offset = setOffset(target, options) 103 | return animate('out', target, done, options, { 104 | scale: 0, 105 | y: offset ? `-${offset}` : '-100%' 106 | }) 107 | } 108 | 109 | const zoomOutBottom = (target: HTMLElement | any, done: (() => void), options: Options): Promise => { 110 | const offset = setOffset(target, options) 111 | return animate('out', target, done, options, { 112 | scale: 0, 113 | y: offset ? `${offset}` : '100%' 114 | }) 115 | } 116 | 117 | const zoomOutTopRight = (target: HTMLElement | any, done: (() => void), options: Options): Promise => { 118 | const offset = setOffset(target, options) 119 | return animate('out', target, done, options, { 120 | scale: 0, 121 | y: offset ? `-${offset}` : '-100%', 122 | x: offset ? `${offset}` : '100%' 123 | }) 124 | } 125 | 126 | const zoomOutTopLeft = (target: HTMLElement | any, done: (() => void), options: Options): Promise => { 127 | const offset = setOffset(target, options) 128 | return animate('out', target, done, options, { 129 | scale: 0, 130 | y: offset ? `-${offset}` : '-100%', 131 | x: offset ? `-${offset}` : '-100%' 132 | }) 133 | } 134 | 135 | const zoomOutBottomRight = (target: HTMLElement | any, done: (() => void), options: Options): Promise => { 136 | const offset = setOffset(target, options) 137 | return animate('out', target, done, options, { 138 | scale: 0, 139 | y: offset ? `${offset}` : '100%', 140 | x: offset ? `${offset}` : '100%' 141 | }) 142 | } 143 | 144 | const zoomOutBottomLeft = (target: HTMLElement | any, done: (() => void), options: Options): Promise => { 145 | const offset = setOffset(target, options) 146 | return animate('out', target, done, options, { 147 | scale: 0, 148 | y: offset ? `${offset}` : '100%', 149 | x: offset ? `-${offset}` : '-100%' 150 | }) 151 | } 152 | 153 | export { zoomIn, zoomInRight, zoomInLeft, zoomInTop, zoomInBottom, zoomInTopRight, zoomInTopLeft, zoomInBottomRight, zoomInBottomLeft, zoomOut, zoomOutRight, zoomOutLeft, zoomOutTop, zoomOutBottom, zoomOutTopRight, zoomOutTopLeft, zoomOutBottomRight, zoomOutBottomLeft } -------------------------------------------------------------------------------- /src/index.ts: -------------------------------------------------------------------------------- 1 | import { fadeIn, fadeOut } from './animations/fade' 2 | import { slideInRight, slideInLeft, slideInTop, slideInBottom, slideInTopRight, slideInTopLeft, slideInBottomRight, slideInBottomLeft, slideOutRight, slideOutLeft, slideOutTop, slideOutBottom, slideOutTopRight, slideOutTopLeft, slideOutBottomRight, slideOutBottomLeft } from './animations/slide' 3 | import { wrapInVertical, wrapOutVertical, wrapInHorizontal, wrapOutHorizontal } from './animations/wrap' 4 | import { flipInHorizontal, flipOutHorizontal, flipInVertical, flipOutVertical, flipInHorizontalRight, flipInHorizontalLeft, flipInHorizontalTop, flipInHorizontalBottom, flipOutHorizontalRight, flipOutHorizontalLeft, flipOutHorizontalTop, flipOutHorizontalBottom, flipInVerticalRight, flipInVerticalLeft, flipInVerticalTop, flipInVerticalBottom, flipOutVerticalRight, flipOutVerticalLeft, flipOutVerticalTop, flipOutVerticalBottom } from './animations/flip' 5 | import { zoomIn, zoomInRight, zoomInLeft, zoomInTop, zoomInBottom, zoomInTopRight, zoomInTopLeft, zoomInBottomRight, zoomInBottomLeft, zoomOut, zoomOutRight, zoomOutLeft, zoomOutTop, zoomOutBottom, zoomOutTopRight, zoomOutTopLeft, zoomOutBottomRight, zoomOutBottomLeft } from './animations/zoom' 6 | import { rotateIn, rotateInBottomLeft, rotateInBottomRight, rotateInTopLeft, rotateInTopRight, rotateOut, rotateOutBottomLeft, rotateOutBottomRight, rotateOutTopLeft, rotateOutTopRight } from './animations/rotate' 7 | import { skewInRight, skewInLeft, skewOutRight, skewOutLeft } from './animations/skew' 8 | import { rollIn, rollOut } from './animations/roll' 9 | import { puffIn, puffOut } from './animations/puff' 10 | import { blurIn, blurOut } from './animations/blur' 11 | import { vanishIn, vanishOut } from './animations/vanish' 12 | import { perspectiveInRight, perspectiveInLeft, perspectiveInTop, perspectiveInBottom, perspectiveOutRight, perspectiveOutLeft, perspectiveOutTop, perspectiveOutBottom } from './animations/perspective' 13 | import { openTopLeft, openTopRight, openBottomLeft, openBottomRight, closeTopLeft, closeTopRight, closeBottomLeft, closeBottomRight } from './animations/openClose' 14 | import { textIn, textOut } from './animations/text' 15 | import customAnimation from './animations/customAnimation' 16 | 17 | // Attention seekers 18 | import { jello } from './animations/attentionSeekers/jello' 19 | import { bounce } from './animations/attentionSeekers/bounce' 20 | import { pulse } from './animations/attentionSeekers/pulse' 21 | import { flash } from './animations/attentionSeekers/flash' 22 | import { headShake } from './animations/attentionSeekers/headShake' 23 | import { rubberBand } from './animations/attentionSeekers/rubberBand' 24 | import { shakeHorizontal } from './animations/attentionSeekers/shakeHorizontal' 25 | import { shakeVertical } from './animations/attentionSeekers/shakeVertical' 26 | import { swing } from './animations/attentionSeekers/swing' 27 | import { tada } from './animations/attentionSeekers/tada' 28 | import { wobble } from './animations/attentionSeekers/wobble' 29 | import { heartBeat } from './animations/attentionSeekers/heartBeat' 30 | import { puff } from './animations/attentionSeekers/puff' 31 | import { spin } from './animations/attentionSeekers/spin' 32 | 33 | export { 34 | // Customize 35 | customAnimation, 36 | 37 | // Fade animations 38 | fadeIn, fadeOut, 39 | 40 | // Slide animations 41 | slideInRight, slideInLeft, slideInTop, slideInBottom, slideInTopRight, slideInTopLeft, slideInBottomRight, slideInBottomLeft, slideOutRight, slideOutLeft, slideOutTop, slideOutBottom, slideOutTopRight, slideOutTopLeft, slideOutBottomRight, slideOutBottomLeft, 42 | 43 | // Wrap animations 44 | wrapInVertical, wrapOutVertical, wrapInHorizontal, wrapOutHorizontal, 45 | 46 | // flip 47 | flipInHorizontal, flipOutHorizontal, flipInVertical, flipOutVertical, flipInHorizontalRight, flipInHorizontalLeft, flipInHorizontalTop, flipInHorizontalBottom, flipOutHorizontalRight, flipOutHorizontalLeft, flipOutHorizontalTop, flipOutHorizontalBottom, flipInVerticalRight, flipInVerticalLeft, flipInVerticalTop, flipInVerticalBottom, flipOutVerticalRight, flipOutVerticalLeft, flipOutVerticalTop, flipOutVerticalBottom, 48 | 49 | // zoom 50 | zoomIn, zoomInRight, zoomInLeft, zoomInTop, zoomInBottom, zoomInTopRight, zoomInTopLeft, zoomInBottomRight, zoomInBottomLeft, zoomOut, zoomOutRight, zoomOutLeft, zoomOutTop, zoomOutBottom, zoomOutTopRight, zoomOutTopLeft, zoomOutBottomRight, zoomOutBottomLeft, 51 | 52 | // Rotations 53 | rotateIn, rotateInBottomLeft, rotateInBottomRight, rotateInTopLeft, rotateInTopRight, rotateOut, rotateOutBottomLeft, rotateOutBottomRight, rotateOutTopLeft, rotateOutTopRight, 54 | 55 | // Skew 56 | skewInRight, skewInLeft, skewOutRight, skewOutLeft, 57 | 58 | // Roll 59 | rollIn, rollOut, 60 | 61 | // Puff 62 | puffIn, puffOut, 63 | 64 | // Blur 65 | blurIn, blurOut, 66 | 67 | // Vanish 68 | vanishIn, vanishOut, 69 | 70 | // Perspective 71 | perspectiveInRight, perspectiveInLeft, perspectiveInTop, perspectiveInBottom, perspectiveOutRight, perspectiveOutLeft, perspectiveOutTop, perspectiveOutBottom, 72 | 73 | // open and close 74 | openTopLeft, openTopRight, openBottomLeft, openBottomRight, closeTopLeft, closeTopRight, closeBottomLeft, closeBottomRight, 75 | 76 | // Texts 77 | textIn, textOut, 78 | 79 | // Attention seekers 80 | puff, jello, bounce, spin, pulse, flash, rubberBand, headShake, shakeHorizontal, shakeVertical, swing, tada, wobble, heartBeat 81 | } -------------------------------------------------------------------------------- /src/utils/animate.ts: -------------------------------------------------------------------------------- 1 | import { gsap } from 'gsap' 2 | import { Options, ExcludedOptionsKeys } from './types' 3 | import { isValidOptions } from './runtimeChecks' 4 | 5 | // Function to perform animations with GSAP 6 | const animate = ( 7 | direction: string, 8 | target: HTMLElement | any, 9 | done: (() => void), 10 | options: Options = {}, 11 | properties?: Record 12 | ): Promise => { 13 | return new Promise((resolve, reject) => { 14 | 15 | try { 16 | 17 | // Default animation settings 18 | const defOptions = { 19 | duration: 0.5, // Duration of the animation in seconds 20 | opacity: 0.1, // Initial opacity value 21 | delay: 0, // Start the animation immediatey by default 22 | ease: "power1.inOut", // Easing Function 23 | filter: "blur(0px)" // blur effect 24 | } 25 | 26 | // Assign element dataset here 27 | const data = target.dataset 28 | 29 | // Check if there are any dataset attributes present on the target element 30 | if (Object.keys(data).length > 0) { 31 | // Create an options object with values from the dataset or fallback to default values if not present 32 | // These are properties that must be passed as numbers to gsap 33 | const optionsData: Options = { 34 | duration: parseFloat(data.avDuration) || defOptions.duration, 35 | delay: parseFloat(data.avDelay) || defOptions.delay 36 | } 37 | 38 | // Update the 'options' variable with the newly created options object 39 | options = { ...optionsData, ...options } 40 | } 41 | 42 | // Validate the options object to ensure it contains only allowed properties, if not stop 43 | if (!isValidOptions(options)) { 44 | console.error('Options object should only include: duration(number), fade(number), delay(number), ease(string), offset(string), onStart(func), and onComplete(func)') 45 | return 46 | } 47 | 48 | // Define value for fade effect 49 | const fadeOption = options.fade || data.avFade 50 | 51 | // Define value for blur effect 52 | const blurOption = `blur(${options.blur || data.avBlur}px)` 53 | 54 | // This func maps a custom easing name to a GSAP easing value. 55 | const setEase = (selectedEase: string): string => { 56 | // Define a mapping from custom easing names to GSAP easing values 57 | const easings = { 58 | linear: "none", 59 | ease: "power1.inOut", 60 | easeIn: "power1.in", 61 | easeOut: "power1.out", 62 | bounce: "bounce.inOut", 63 | bounceIn: "bounce.in", 64 | bounceOut: "bounce.out", 65 | back: "back.inOut", 66 | backIn: "back.in", 67 | backOut: "back.out", 68 | elastic: "elastic.inOut", 69 | elasticIn: "elastic.in", 70 | elasticOut: "elastic.out" 71 | } 72 | 73 | // If no easing option is specified, default to 'ease' 74 | if (selectedEase === undefined) { 75 | return easings.ease 76 | } 77 | 78 | // If specifid easing exists represent with actual gsap value then return 79 | if (selectedEase in easings) { 80 | return easings[selectedEase as keyof typeof easings] 81 | } else { 82 | // Log an error if the easing option is invalid and return the default 'ease' value 83 | console.error(`Animate4vue: Invalid ease:${selectedEase}. Accepts: ${Object.keys(easings).join(', ')}`) 84 | return easings.ease 85 | } 86 | } 87 | 88 | // Merge default options with provided options and additional properties 89 | const allProperties = { 90 | ...defOptions, 91 | ...options, 92 | opacity: parseFloat(fadeOption) || defOptions.opacity, 93 | filter: blurOption, 94 | ...properties 95 | } 96 | 97 | // Remove properties not needed 98 | delete allProperties.fade 99 | delete allProperties.blur 100 | 101 | // Initialize timeline animation of element 102 | const timeline = gsap.timeline() 103 | 104 | // Perform the animation based on the direction ('in(enter)' or 'out(leave') 105 | if (direction === 'in') { // Animation to enter 106 | // Animate from the target state to the default state (e.g. fade in) 107 | timeline.from(target, { 108 | ...allProperties, 109 | ease: (options.ease && setEase(options.ease)) || setEase(data.avEnterEase) || setEase(data.avEase) || properties?.ease 110 | }) 111 | .to(target, { onComplete: ()=> { 112 | done() // Let vue know animation is complete 113 | resolve() // Resolve promise 114 | } 115 | }) 116 | } else { // animation to leave 117 | // Animate to the end state (e.g., fade out) 118 | timeline.to(target, { 119 | ...allProperties, 120 | ease: (options.ease && setEase(options.ease)) || setEase(data.avLeaveEase) || setEase(data.avEase) || properties?.ease 121 | }) 122 | .to(target, { 123 | onStart: ()=> done(), // Let vue know animation is complete 124 | onComplete: ()=> resolve() // Resolve promise 125 | }) 126 | } 127 | 128 | } catch (err) { 129 | reject('Animate4vue: ' + err) 130 | } 131 | 132 | }) 133 | } 134 | 135 | export default animate -------------------------------------------------------------------------------- /src/utils/animationIsRunning.ts: -------------------------------------------------------------------------------- 1 | import './globalTypes' 2 | 3 | const animationIsRunning = (element: HTMLElement | any): boolean => { 4 | if (window.attAnimation && window.attAnimation === element) { 5 | // If the current element is already animating 6 | return true 7 | } else { 8 | // Mark the element as currently animating by storing it in a global variable 9 | window.attAnimation = element 10 | return false 11 | } 12 | } 13 | 14 | export default animationIsRunning -------------------------------------------------------------------------------- /src/utils/globalTypes.ts: -------------------------------------------------------------------------------- 1 | export {} 2 | 3 | // Extend the Window interface to include your custom property 4 | declare global { 5 | interface Window { 6 | attAnimation: HTMLElement | any | undefined; // The element being animated 7 | } 8 | } -------------------------------------------------------------------------------- /src/utils/runtimeChecks.ts: -------------------------------------------------------------------------------- 1 | import { Options, AttentionOptions } from './types' 2 | 3 | // This function checks if the properties specified in Options type are included 4 | export const isValidOptions = (options: Options): boolean => { 5 | return (options.onStart === undefined || typeof options.onStart === 'function') && 6 | (options.onComplete === undefined || typeof options.onComplete === 'function') && 7 | (options.duration === undefined || typeof options.duration === 'number') && 8 | (options.delay === undefined || typeof options.delay === 'number') && 9 | (options.fade === undefined || typeof options.fade === 'string' || typeof options.fade === 'number') && 10 | (options.blur === undefined || typeof options.blur === 'string' || typeof options.blur === 'number') && 11 | (options.ease === undefined || typeof options.ease === 'string') && 12 | (options.offset === undefined || typeof options.offset === 'string') 13 | } 14 | 15 | 16 | // This function checks if the properties specified in AttentionOptions type are included 17 | export const isValidAttOptions = (options: AttentionOptions): boolean => { 18 | return (options.duration === undefined || typeof options.duration === 'number') && 19 | (options.delay === undefined || typeof options.delay === 'number') && (options.loop === undefined || typeof options.loop === 'boolean') 20 | } -------------------------------------------------------------------------------- /src/utils/setOffset.ts: -------------------------------------------------------------------------------- 1 | import { Options } from './types' 2 | 3 | const setOffset = (target: any, options: Options): string | boolean => { 4 | const offsetValue = options && options.offset || target.dataset.avOffset 5 | if (offsetValue && offsetValue.includes('-')) { 6 | return false 7 | } else { 8 | return offsetValue || false 9 | } 10 | } 11 | 12 | export default setOffset -------------------------------------------------------------------------------- /src/utils/types.ts: -------------------------------------------------------------------------------- 1 | /** 2 | * Defines configuration options for animations. 3 | * 4 | * @interface Options 5 | */ 6 | export interface Options { 7 | /** Duration of the animation in seconds. */ 8 | duration?: number; 9 | /** Delay before the animation starts, in seconds. */ 10 | delay?: number; 11 | /** Indicates the enter and leave opacity of the animation. 0 to 1. */ 12 | fade?: number; 13 | /** Easing of the animation. Accepts: linear, easeIn, easeOut, ease, bounceIn, bounceOut, bounce, backIn, backOut, back, elasticIn, elasticOut, elastic */ 14 | ease?: string; 15 | 16 | /** 17 | * Defines the initial distance from which the animation should begin/end. 18 | * Only applicable to animations involving movement in right, left, up & down. 19 | */ 20 | offset?: string; 21 | 22 | /** 23 | * Defines the intensity of the blur effect applied to the animation. 24 | * A higher number results in a stronger blur. 25 | */ 26 | blur?: number; 27 | 28 | /** Callback function executed when the animation starts. */ 29 | onStart?: () => void; 30 | /** Callback function executed when the animation completes. */ 31 | onComplete?: () => void; 32 | } 33 | 34 | 35 | /** 36 | * Type representing keys that are not part of the `Options` interface. 37 | * Useful for creating types that exclude properties defined in `Options`. 38 | * 39 | * @type ExcludedOptionsKeys 40 | */ 41 | export type ExcludedOptionsKeys = Exclude 42 | 43 | 44 | /** 45 | * Defines configuration options for attention seekers. 46 | * 47 | * @interface AttentionOptions 48 | */ 49 | export interface AttentionOptions { 50 | /** Duration of the animation in seconds. */ 51 | duration?: number; 52 | /** Delay before the animation starts, in seconds. Also denotes repeat delay if thits on loop. */ 53 | delay?: number; 54 | /** Indicator wether the animation should repeat or not. */ 55 | loop?: boolean; 56 | } -------------------------------------------------------------------------------- /tsconfig.json: -------------------------------------------------------------------------------- 1 | { 2 | "compilerOptions": { 3 | "outDir": "./dist", 4 | "rootDir": "./src", 5 | "target": "ES5", 6 | "module": "ES6", 7 | "moduleResolution": "node", 8 | "declaration": true, 9 | "strict": true, 10 | "esModuleInterop": true, 11 | "skipLibCheck": true, 12 | "forceConsistentCasingInFileNames": true, 13 | "importHelpers": true 14 | }, 15 | "include": ["src"] 16 | } --------------------------------------------------------------------------------