atridad/vue-bits
1
0
Fork 0
mirror of https://github.com/DavidHDev/vue-bits.git synced 2026-04-22 01:54:38 -06:00
Code Issues Packages Projects Releases Wiki Activity

[ REFACT ] : SplitText Text Animation

Browse Source
This commit is contained in:
Utkarsh-Singhal-26
2026-01-31 16:35:17 +05:30
parent 54c1941143
commit d312302823
2 changed files with 196 additions and 166 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/demo/TextAnimations/SplitTextDemo.vue
+77 -32
View File
@@ -1,7 +1,7 @@
<template>
<TabbedLayout>
<template #preview>
<div class="demo-container h-[400px]">
<div class="h-[400px] demo-container">
<RefreshButton @refresh="forceRerender" />
<SplitText
@@ -11,8 +11,7 @@
:duration="duration"
:ease="ease"
:split-type="splitType"
:threshold="threshold"
class="split-text-demo"
class-name="split-text-demo"
@animation-complete="
() => {
showCallback && showToast();
@@ -22,13 +21,27 @@
</div>
<Customize>
<PreviewSwitch title="Show Completion Toast" v-model="showCallback" />
<div class="flex flex-wrap gap-4">
<button
class="bg-[#0b0b0b] hover:bg-[#222] px-3 border border-[#333] rounded-[10px] h-8 text-white text-xs transition-colors cursor-pointer"
@click="toggleSplitType"
>
Split Type:
<span class="text-[#a1a1aa]">&nbsp;{{ splitType }}</span>
</button>
<button
class="bg-[#0b0b0b] hover:bg-[#222] px-3 border border-[#333] rounded-[10px] h-8 text-white text-xs transition-colors cursor-pointer"
@click="toggleEase"
>
Ease:
<span class="text-[#a1a1aa]">&nbsp;{{ ease }}</span>
</button>
</div>
<PreviewSlider title="Stagger Delay (ms)" v-model="delay" :min="10" :max="500" :step="10" />
<PreviewSlider title="Duration (s)" v-model="duration" :min="0.1" :max="3" :step="0.1" />
<PreviewSlider title="Threshold" v-model="threshold" :min="0.1" :max="1" :step="0.1" />
<PreviewSlider title="Duration (s)" v-model="duration" :min="0.1" :max="2" :step="0.1" />
<PreviewSwitch title="Show Completion Toast" v-model="showCallback" />
</Customize>
<PropTable :data="propData" />
@@ -47,29 +60,40 @@
</template>
<script setup lang="ts">
import { ref, watch } from 'vue';
import TabbedLayout from '../../components/common/TabbedLayout.vue';
import RefreshButton from '../../components/common/RefreshButton.vue';
import PropTable from '../../components/common/PropTable.vue';
import Dependencies from '../../components/code/Dependencies.vue';
import CliInstallation from '../../components/code/CliInstallation.vue';
import CodeExample from '../../components/code/CodeExample.vue';
import Customize from '../../components/common/Customize.vue';
import PreviewSwitch from '../../components/common/PreviewSwitch.vue';
import PreviewSlider from '../../components/common/PreviewSlider.vue';
import SplitText from '../../content/TextAnimations/SplitText/SplitText.vue';
import { splitText } from '@/constants/code/TextAnimations/splitTextCode';
import { useToast } from 'primevue/usetoast';
import CliInstallation from '@/components/code/CliInstallation.vue';
import CodeExample from '@/components/code/CodeExample.vue';
import Dependencies from '@/components/code/Dependencies.vue';
import Customize from '@/components/common/Customize.vue';
import PreviewSlider from '@/components/common/PreviewSlider.vue';
import PreviewSwitch from '@/components/common/PreviewSwitch.vue';
import PropTable from '@/components/common/PropTable.vue';
import RefreshButton from '@/components/common/RefreshButton.vue';
import TabbedLayout from '@/components/common/TabbedLayout.vue';
import { useForceRerender } from '@/composables/useForceRerender';
import { splitText } from '@/constants/code/TextAnimations/splitTextCode';
import SplitText from '@/content/TextAnimations/SplitText/SplitText.vue';
import { useToast } from 'primevue/usetoast';
import { ref, watch } from 'vue';
const delay = ref(10);
const duration = ref(3);
const ease = ref('elastic.out(1, 0.3)');
const splitType = ref<'chars' | 'words' | 'lines' | 'words, chars'>('chars');
const threshold = ref(0.1);
const showCallback = ref(true);
const toast = useToast();
const { rerenderKey, forceRerender } = useForceRerender();
const toast = useToast();
const delay = ref(50);
const duration = ref(1.25);
const ease = ref<'power3.out' | 'bounce.out' | 'elastic.out(1, 0.3)'>('power3.out');
const splitType = ref<'chars' | 'words' | 'lines'>('chars');
const showCallback = ref(true);
const toggleSplitType = () => {
splitType.value = splitType.value === 'chars' ? 'words' : splitType.value === 'words' ? 'lines' : 'chars';
forceRerender();
};
const toggleEase = () => {
ease.value =
ease.value === 'power3.out' ? 'bounce.out' : ease.value === 'bounce.out' ? 'elastic.out(1, 0.3)' : 'power3.out';
forceRerender();
};
const showToast = () => {
toast.add({
@@ -80,10 +104,31 @@ const showToast = () => {
};
const propData = [
{
name: 'tag',
type: 'string',
default: '"p"',
description: 'HTML tag to render: "h1", "h2", "h3", "h4", "h5", "h6", "p",'
},
{ name: 'text', type: 'string', default: '""', description: 'The text content to animate.' },
{ name: 'className', type: 'string', default: '""', description: 'Additional class names to style the component.' },
{ name: 'delay', type: 'number', default: '100', description: 'Delay between animations for each letter (in ms).' },
{ name: 'duration', type: 'number', default: '0.6', description: 'Duration of each letter animation (in seconds).' },
{
name: 'className',
type: 'string',
default: '""',
description: 'Additional class names to style the component.'
},
{
name: 'delay',
type: 'number',
default: '50',
description: 'Delay between animations for each letter (in ms).'
},
{
name: 'duration',
type: 'number',
default: '1.25',
description: 'Duration of each letter animation (in seconds).'
},
{ name: 'ease', type: 'string', default: '"power3.out"', description: 'GSAP easing function for the animation.' },
{
name: 'splitType',
@@ -114,7 +159,7 @@ const propData = [
name: 'textAlign',
type: 'string',
default: '"center"',
description: 'Text alignment: "left", "center", "right", etc.'
description: "Text alignment: 'left', 'center', 'right', etc."
},
{
name: 'onLetterAnimationComplete',