Feat : Attention Animations V1.3.0

README.md

@@ -74,12 +74,13 @@ const show = ref(true)
 
 -Library is fully prop based so you can customize the animations based on your need
 
-| Prop         | Type      | Default   | Description                                                                           |
-| ------------ | --------- | --------- | ------------------------------------------------------------------------------------- |
-| **appear**   | `boolean` | `'false'` | If true animation will run on load                                                    |
-| **duration** | `number`  | `500`     | Duration of the animation in milliseconds.                                            |
-| **delay**    | `number`  | `0`       | Delay before the animation starts in milliseconds.                                    |
-| **easing**   | `string`  | `'ease'`  | CSS easing function to control the transition curve(CSS acceptable timing functions). |
+| Prop          | Type              | Default   | Description                                                                                    |
+| ------------- | ----------------- | --------- | ---------------------------------------------------------------------------------------------- |
+| **appear**    | `boolean`         | `'false'` | If true animation will run on load                                                             |
+| **duration**  | `number`          | `500`     | Duration of the animation in milliseconds.                                                     |
+| **delay**     | `number`          | `0`       | Delay before the animation starts in milliseconds.                                             |
+| **easing**    | `string`          | `'ease'`  | CSS easing function to control the transition curve(CSS acceptable timing functions).          |
+| **iteration** | `string , number` | `5`       | Number of time an animation would run based on CSS iteration-count(Only Attention Animations). |
 
 ---
 

package.json

@@ -1,6 +1,6 @@
 {
   "name": "vue-transify",
-  "version": "1.2.0",
+  "version": "1.3.0",
   "private": false,
   "type": "module",
   "main": "dist/vue-transify.umd.js",

playground/App.vue

@@ -10,6 +10,7 @@
           See Motions
         </button>
       </div>
+
       <small class="main-container--version"
         >V-1.2.0 | Developed by
         <a href="https://github.com/Redskullvue">RedskullVue </a>
@@ -53,6 +54,12 @@ import ZoomDown from '@/components/ZoomDown.vue'
 import FlipX from '@/components/FlipX.vue'
 import FlipY from '@/components/FlipY.vue'
 import PageTransitionHelper from '@/components/PageTransitionHelper.vue'
+import Pulse from '@/components/Pulse.vue'
+import Flash from '@/components/Flash.vue'
+import ShakeX from '@/components/ShakeX.vue'
+import ShakeY from '@/components/ShakeY.vue'
+import Swing from '@/components/Swing.vue'
+import Tada from '@/components/Tada.vue'
 
 const showSideBar = ref(true)
 const currentAnimation = shallowRef(Fade)
@@ -75,6 +82,12 @@ const animationMap = {
   ZoomDown,
   FlipX,
   FlipY,
+  Pulse,
+  Flash,
+  ShakeX,
+  ShakeY,
+  Swing,
+  Tada,
 }
 
 const setAnimation = (name) => {

playground/components/sideBar.vue

@@ -29,6 +29,10 @@ import { ref } from 'vue'
 const emits = defineEmits(['closeSideBar', 'selectAnimation'])
 
 const animations = ref([
+  {
+    title: 'Attention Animations',
+    children: ['Pulse', 'Flash', 'ShakeX', 'ShakeY', 'Swing', 'Tada'],
+  },
   {
     title: 'Slides',
     children: ['SlideInUp', 'SlideInDown', 'SlideInLeft', 'SlideInRight'],

src/components/Flash.vue

@@ -0,0 +1,19 @@
+<template>
+  <div
+    class="vt-attention-flash"
+    :style="{
+      '--animation-duration': duration + 'ms',
+      '--animation-delay': delay + 'ms',
+      '--animation-easing': easing,
+      '--animation-iteration-count': iteration,
+    }"
+    v-bind="$attrs"
+  >
+    <slot></slot>
+  </div>
+</template>
+<script setup>
+import { commonProps } from './commonProps'
+
+const props = defineProps({ ...commonProps })
+</script>

src/components/Pulse.vue

@@ -0,0 +1,19 @@
+<template>
+  <div
+    class="vt-attention-pulse"
+    :style="{
+      '--animation-duration': duration + 'ms',
+      '--animation-delay': delay + 'ms',
+      '--animation-easing': easing,
+      '--animation-iteration-count': iteration,
+    }"
+    v-bind="$attrs"
+  >
+    <slot></slot>
+  </div>
+</template>
+<script setup>
+import { commonProps } from './commonProps'
+
+const props = defineProps({ ...commonProps })
+</script>

src/components/ShakeX.vue

@@ -0,0 +1,19 @@
+<template>
+  <div
+    class="vt-attention-shakex"
+    :style="{
+      '--animation-duration': duration + 'ms',
+      '--animation-delay': delay + 'ms',
+      '--animation-easing': easing,
+      '--animation-iteration-count': iteration,
+    }"
+    v-bind="$attrs"
+  >
+    <slot></slot>
+  </div>
+</template>
+<script setup>
+import { commonProps } from './commonProps'
+
+const props = defineProps({ ...commonProps })
+</script>

src/components/ShakeY.vue

@@ -0,0 +1,19 @@
+<template>
+  <div
+    class="vt-attention-shakey"
+    :style="{
+      '--animation-duration': duration + 'ms',
+      '--animation-delay': delay + 'ms',
+      '--animation-easing': easing,
+      '--animation-iteration-count': iteration,
+    }"
+    v-bind="$attrs"
+  >
+    <slot></slot>
+  </div>
+</template>
+<script setup>
+import { commonProps } from './commonProps'
+
+const props = defineProps({ ...commonProps })
+</script>

src/components/Swing.vue

@@ -0,0 +1,19 @@
+<template>
+  <div
+    class="vt-attention-swing"
+    :style="{
+      '--animation-duration': duration + 'ms',
+      '--animation-delay': delay + 'ms',
+      '--animation-easing': easing,
+      '--animation-iteration-count': iteration,
+    }"
+    v-bind="$attrs"
+  >
+    <slot></slot>
+  </div>
+</template>
+<script setup>
+import { commonProps } from './commonProps'
+
+const props = defineProps({ ...commonProps })
+</script>

src/components/Tada.vue

@@ -0,0 +1,19 @@
+<template>
+  <div
+    class="vt-attention-tada"
+    :style="{
+      '--animation-duration': duration + 'ms',
+      '--animation-delay': delay + 'ms',
+      '--animation-easing': easing,
+      '--animation-iteration-count': iteration,
+    }"
+    v-bind="$attrs"
+  >
+    <slot></slot>
+  </div>
+</template>
+<script setup>
+import { commonProps } from './commonProps'
+
+const props = defineProps({ ...commonProps })
+</script>

src/components/commonProps.js

@@ -3,4 +3,5 @@ export const commonProps = {
   duration: { type: Number, default: 500 },
   easing: { type: String, default: 'ease' },
   delay: { type: Number, default: 0 },
+  iteration: { type: [Number, String], default: 5 },
 }

src/index.js

@@ -1,9 +1,9 @@
 // This file is only used for exports to the built version
 import './styles/animations.css'
-import Fade from '@/components/Fade.vue'
-import SlideInLeft from '@/components/SlideInLeft.vue'
-import SlideInRight from '@/components/SlideInRight.vue'
-import SlideInUp from '@/components/SlideInUp.vue'
+import Fade from './components/Fade.vue'
+import SlideInLeft from './components/SlideInLeft.vue'
+import SlideInRight from './components/SlideInRight.vue'
+import SlideInUp from './components/SlideInUp.vue'
 import SlideInDown from './components/SlideInDown.vue'
 import BounceDown from './components/BounceDown.vue'
 import BounceIn from './components/BounceIn.vue'
@@ -16,6 +16,12 @@ import ZoomUp from './components/ZoomUp.vue'
 import ZoomIn from './components/ZoomIn.vue'
 import FlipX from './components/FlipX.vue'
 import FlipY from './components/FlipY.vue'
+import Pulse from './components/Pulse.vue'
+import Flash from './components/Flash.vue'
+import ShakeX from './components/ShakeX.vue'
+import ShakeY from './components/ShakeY.vue'
+import Swing from './components/Swing.vue'
+import Tada from './components/Tada.vue'
 import PageTransitionHelper from './components/PageTransitionHelper.vue'
 
 export {
@@ -35,5 +41,11 @@ export {
   ZoomIn,
   FlipX,
   FlipY,
+  Pulse,
+  Flash,
+  ShakeX,
+  ShakeY,
+  Swing,
+  Tada,
   PageTransitionHelper,
 }