Merge pull request #125 from Gazoon007/feat/shuffle

Create <Shuffle /> text animation

src/constants/Categories.ts

@@ -26,6 +26,7 @@ export const CATEGORIES = [
       'Scroll Velocity',
       'Scramble Text',
       'Shiny Text',
+      'Shuffle',
       'Split Text',
       'Text Cursor',
       'Text Pressure',

src/constants/Components.ts

@@ -51,6 +51,7 @@ const textAnimations = {
   'scroll-velocity': () => import("../demo/TextAnimations/ScrollVelocityDemo.vue"),
   'text-type': () => import("../demo/TextAnimations/TextTypeDemo.vue"),
   'variable-proximity': () => import("../demo/TextAnimations/VariableProximityDemo.vue"),
+  'shuffle': () => import("../demo/TextAnimations/ShuffleDemo.vue"),
 };
 
 const components = {

src/constants/Information.ts

@@ -401,6 +401,14 @@ export const componentMetadata: ComponentMetadata = {
     docsUrl: 'https://vue-bits.dev/text-animations/variable-proximity',
     tags: []
   },
+  'TextAnimations/Shuffle': {
+    videoUrl: '/assets/videos/shuffle.webm',
+    description: 'GSAP-powered slot machine style text shuffle animation with scroll trigger.',
+    category: 'TextAnimations',
+    name: 'Shuffle',
+    docsUrl: 'https://vue-bits.dev/text-animations/shuffle',
+    tags: []
+  },
 
   //! Components -------------------------------------------------------------------------------------------------------------------------------
   'Components/AnimatedList': {

src/constants/code/TextAnimations/shuffleCode.ts

@@ -0,0 +1,25 @@
+import code from '@/content/TextAnimations/Shuffle/Shuffle.vue?raw';
+import { createCodeObject } from '@/types/code';
+
+export const shuffle = createCodeObject(code, 'TextAnimations/Shuffle', {
+  installation: 'npm install gsap',
+  usage: `<template>
+  <Shuffle
+    text="Hello World"
+    shuffle-direction="right"
+    :duration="0.35"
+    animation-mode="evenodd"
+    :shuffle-times="1"
+    ease="power3.out"
+    :stagger="0.03"
+    :threshold="0.1"
+    :trigger-once="true"
+    :trigger-on-hover="true"
+    :respect-reduced-motion="true"
+  />
+</template>
+
+<script setup lang="ts">
+import Shuffle from "./Shuffle.vue";
+</script>`
+});