mirror of
https://github.com/DavidHDev/vue-bits.git
synced 2026-03-07 06:29:30 -07:00
33 lines
914 B
TypeScript
33 lines
914 B
TypeScript
// Fun fact: this is the first component ever made for Vue Bits!
|
|
import code from '@content/TextAnimations/SplitText/SplitText.vue?raw'
|
|
import type { CodeObject } from '../../../types/code'
|
|
|
|
export const splitText: CodeObject = {
|
|
cli: `npx jsrepo add https://vuebits.dev/TextAnimations/SplitText`,
|
|
installation: `npm install gsap`,
|
|
usage: `<template>
|
|
<SplitText
|
|
text="Hello, GSAP!"
|
|
class-name="text-2xl font-semibold text-center"
|
|
:delay="100"
|
|
:duration="0.6"
|
|
ease="power3.out"
|
|
split-type="chars"
|
|
:from="{ opacity: 0, y: 40 }"
|
|
:to="{ opacity: 1, y: 0 }"
|
|
:threshold="0.1"
|
|
root-margin="-100px"
|
|
text-align="center"
|
|
@animation-complete="handleAnimationComplete"
|
|
/>
|
|
</template>
|
|
|
|
<script setup lang="ts">
|
|
import SplitText from "./SplitText.vue";
|
|
|
|
const handleAnimationComplete = () => {
|
|
console.log('All letters have animated!');
|
|
};
|
|
</script>`,
|
|
code
|
|
} |