Added <ImageTrail /> animation

src/constants/Categories.ts

@@ -45,6 +45,7 @@ export const CATEGORIES = [
       'Magnet',
       'Cubes',
       'Blob Cursor',
+      'Image Trail',
     ]
   },
   {

src/constants/Components.ts

@@ -13,6 +13,7 @@ const animations = {
   'splash-cursor': () => import('../demo/Animations/SplashCursorDemo.vue'),
   'noise': () => import('../demo/Animations/NoiseDemo.vue'),
   'blob-cursor': () => import('../demo/Animations/BlobCursorDemo.vue'),
+  'image-trail': () => import('../demo/Animations/ImageTrailDemo.vue'),
 };
 
 const textAnimations = {

src/constants/code/Animations/imageTrailCode.ts

@@ -0,0 +1,30 @@
+import code from '@/content/Animations/ImageTrail/ImageTrail.vue?raw';
+import type { CodeObject } from '../../../types/code';
+
+export const imageTrail: CodeObject = {
+  cli: `npx jsrepo add https://vue-bits.dev/ui/Animations/ImageTrail`,
+  installation: `npm i gsap`,
+  usage: `<template>
+  <div :style="{ height: '500px', position: 'relative', overflow: 'hidden'}">
+    <ImageTrail
+        :key="key"
+        :items="[
+            'https://picsum.photos/id/287/300/300',
+            'https://picsum.photos/id/1001/300/300',
+            'https://picsum.photos/id/1025/300/300',
+            'https://picsum.photos/id/1026/300/300',
+            'https://picsum.photos/id/1027/300/300',
+            'https://picsum.photos/id/1028/300/300',
+            'https://picsum.photos/id/1029/300/300',
+            'https://picsum.photos/id/1030/300/300',
+        ]"
+        :variant="1"
+    />
+    </div>
+</template>
+
+<script setup lang="ts">
+  import ImageTrail from "./ImageTrail.vue";
+</script>`,
+  code
+};