Pixelstrap - Admin Document

Animations

Animate Offical link Preview link

Inside Your template tags add

<div id="animation-box">
  <transition appear :enter-active-class="enterClass">
      <div class="box" :key="show">
      <div class="card">
        <div class="animate-widget">
          <div><img class="img-fluid" :src="getImages('banner/3.jpg')" alt=""></div>
          <div class="text-center p-25">
            <p class="text-muted mb-0">Denouncing pleasure and praising pain was born and I will give you a complete account of the system, and expound the actual teachings</p>
          </div>
        </div>
      </div>
    </div>
     </transition>
  </div>
   <form class="theme-form text-center">
      <div class="mb-3">
           <select v-model="animation" @change="selectAnimate" class="form-select input input--dropdown js-animations text-center text-md-start">
          <option v-for="(anim, index) in animationList" :value="anim" :key="index">{{ anim }}</option>
          </select>
      </div>
       <button class="js-triggeraNimation btn btn-primary" @click.prevent="selectAnimated(animation)">Animate it</button>
    </form>

Inside Your script tags add

import { computed } from "vue";
import { getImgUrl } from "@/composables/commen/getImages"
import { animationList, animation, show } from "@/composables/commen/animationView"
function selectAnimate() {
    show.value = !show.value;
}
function selectAnimated(animation: boolean) {
    show.value = animation;
}
const enterClass = computed(() => {
    return `animated ${animation.value}`;
})

In your composables animationView.ts file all the following code:

import { ref } from "vue"

export const enterAnimation = ref<string>('bounceIn')
export const exitAnimation = ref<string>('flipOutX')
export const animation = ref<string>('bounce')
export const show = ref<boolean>(true)
export const animate = ref<boolean>(false)
export const active = ref<boolean>(false)
export const animationList = [
    "bounce",
    "flash",
    "flip",
    "headShake",
    "hinge",
    "jello",
    "pulse",
    "rubberBand",
    "shake",
    "swing",
    "tada",
    "wobble",
    "bounceIn",
    "bounceInDown",
    "bounceInLeft",
    "bounceInRight",
    "bounceInUp",
    "fadeIn",
    "fadeInDown",
    "fadeInDownBig",
    "fadeInLeft",
    "fadeInLeftBig",
    "fadeInRight",
    "fadeInRightBig",
    "fadeInUp",
    "fadeInUpBig",
    "flipInX",
    "flipInY",
    "lightSpeedIn",
    "rollIn",
    "rotateIn",
    "rotateInDownLeft",
    "rotateInDownRight",
    "rotateInUpLeft",
    "rotateInUpRight",
    "slideInDown",
    "slideInLeft",
    "slideInRight",
    "slideInUp",
    "zoomIn",
    "zoomInDown",
    "zoomInLeft",
    "zoomInRight",
    "zoomInUp",
    "bounceOut",
    "bounceOutDown",
    "bounceOutLeft",
    "bounceOutRight",
    "bounceOutUp",
    "fadeOut",
    "fadeOutDown",
    "fadeOutDownBig",
    "fadeOutLeft",
    "fadeOutLeftBig",
    "fadeOutRight",
    "fadeOutRightBig",
    "fadeOutUp",
    "fadeOutUpBig",
    "flipOutX",
    "flipOutY",
    "lightSpeedOut",
    "rollOut",
    "rotateOut",
    "rotateOutDownLeft",
    "rotateOutDownRight",
    "rotateOutUpLeft",
    "rotateOutUpRight",
    "slideOutDown",
    "slideOutLeft",
    "slideOutRight",
    "slideOutUp",
    "slideOutRight",
    "zoomOut",
    "zoomOutDown",
    "zoomOutLeft",
    "zoomOutRight",
    "zoomOutUp"
]

In your composables getImages.ts file all the following code:

export function getImgUrl(path: string) {
 return require('@/assets/images/' + path);
}

AOS Offical link Preview link

npm i vue-aos

In your main.ts file all the following code:

import AosVue from "aos-vue";
.use(AosVue)

Inside Your template tags add

 <div class="row gallery grid my-gallery" id="aniimated-thumbnials" v-masonry>
<figure class="grid-item col-sm-4 col-md-3" data-aos="fade-down" v-masonry-tile v-for="(src, index) in masonryItems" :key="index" @click="() => showImg(index)">
   <aos-vue :animation="src.animation">
  <a>
  <img :src="getImgUrl(src.image)" alt="Image description" class="img-thumbnail" />
  </a>
</aos-vue>
</figure>
</div>
<vue-easy-lightbox :index="indexRef" :visible="visible" :imgs="lightBoxImages" @hide="handleHide">
</vue-easy-lightbox>

Inside Your script tags add

import { useMasonryStore } from "@/store/masonry"
 import { getImages } from "@/composables/commen/getImages"
 import { ref, onMounted } from "vue"
 
 const store = useMasonryStore()
 const masonryItems = store.aos
 const lightBoxImages = ref([])
 const indexRef = ref<number>(0)
 const visible = ref<boolean>(false)
 
 function showImg(index: number) {
     indexRef.value = index
     visible.value = true
 }
 function handleHide() {
     visible.value = false
 }
 onMounted(() => {
     masonryItems.forEach(item => {
         lightBoxImages.value.push({ src: require('@/assets/images/' + item.image) })
     })
 })

In your composables getImages.ts file all the following code:

export function getImages(path: string) {
 return require('@/assets/images/' + path);
}

Inside Your json tags add

{
"aos":[
        { "image":"masonry/1.jpg", "animation":"fade-down"},
        {"image":"masonry/2.jpg", "animation":"zoom-out-down"},
        { "image":"masonry/3.jpg", "animation":"flip-down"},
        {"image":"masonry/4.jpg","animation":"fade-up" },
        {"image":"masonry/5.jpg","animation":"flip-down" },
        { "image":"masonry/6.jpg", "animation":"fade-up" },
        { "image":"masonry/7.jpg", "animation":"flip-down" },
        { "image":"masonry/8.jpg", "animation":"fade-up"},
        { "image":"masonry/9.jpg", "animation":"flip-down" },
        { "image":"masonry/10.jpg", "animation":"fade-up" },
        { "image":"masonry/11.jpg", "animation":"flip-down" },
        { "image":"masonry/12.jpg", "animation":"fade-up" },
        { "image":"masonry/14.jpg", "animation":"flip-down" },
        { "image":"masonry/15.jpg", "animation":"flip-left" },
        { "image":"masonry/13.jpg", "animation":"flip-down" },
         { "image":"masonry/4.jpg", "animation":"zoom-out" },
         { "image":"masonry/5.jpg", "animation":"flip-right" },
         { "image":"masonry/6.jpg", "animation":"zoom-out" },
         { "image":"masonry/7.jpg", "animation":"zoom-out-up" },
         { "image":"masonry/8.jpg", "animation":"zoom-out-down" },
         { "image":"masonry/9.jpg", "animation":"flip-down" },
         { "image":"masonry/10.jpg", "animation":"slide-up" },
         { "image":"masonry/9.jpg", "animation":"flip-down" },
         { "image":"masonry/10.jpg", "animation":"fade-up" },
         { "image":"masonry/11.jpg", "animation":"flip-down" },
         { "image":"masonry/12.jpg", "animation":"fade-up" },
         { "image":"masonry/14.jpg", "animation":"flip-down" },
         { "image":"masonry/15.jpg", "animation":"flip-left" },
         { "image":"masonry/13.jpg", "animation":"flip-down" },
         { "image":"masonry/4.jpg", "animation":"zoom-out" },
         { "image":"masonry/5.jpg", "animation":"flip-right" },
         { "image":"masonry/6.jpg", "animation":"zoom-out" },
         { "image":"masonry/7.jpg", "animation":"zoom-out-up" }
    ]
}

Inside Your pinia store ts tags add

import { defineStore } from 'pinia'                                                                 
interface aos {
    image: string,
    animation: string
}
import masonry from "@/data/masonry.json"

export const useMasonryStore = defineStore('masonry', () => {

    const aos: aos[] = (JSON.parse(JSON.stringify(masonry.aos)))  
    return {
        aos,
    }
})