Skip to content

Commit

Permalink
Merge pull request #90 from LittleFoxCompany/feature/remove-tailwind-…
Browse files Browse the repository at this point in the history
…dependancy

Remove Tailwind Utility classes from functions
  • Loading branch information
jrmymbtlr authored May 27, 2024
2 parents 53fe619 + 365178c commit a06bc9e
Show file tree
Hide file tree
Showing 2 changed files with 25 additions and 25 deletions.
45 changes: 23 additions & 22 deletions nuxt-web/components/content/animators/animateText.vue
Original file line number Diff line number Diff line change
@@ -1,43 +1,44 @@
<template>
<Example class="flex">
<ExampleInputs class="flex flex-col">
<div class="flex gap-4">
<FormInput v-model="value" label="Title" />
<FormSelect v-model="splitBy" label="Select" name="select" placeholder="Select an option">
<div class="flex gap-4 w-full">
<FormInput v-model="value" label="Title" />
<FormSelect v-model="splitBy" label="Select" name="select" placeholder="Select an option">
<option value="word">Word</option>
<option value="character">Character</option>
</FormSelect>
</div>
<div class="flex gap-4 w-full">
<FormInput v-model="time" label="Time" type="number" name="time" value="100" placeholder="Time" />
<FormSelect v-model="unit" label="Unit" name="unit" placeholder="Select an option">
<option value="ms">ms</option>
<option value="s">s</option>
</FormSelect>
</div>
<div class="flex gap-4">
<FormInput v-model="time" label="Time" type="number" name="time" value="100" placeholder="Time" />
<FormSelect v-model="unit" label="Unit" name="unit" placeholder="Select an option">
<option value="ms">ms</option>
<option value="s">s</option>
</FormSelect>
</div>
</div>
<FormInput v-model="className" label="Classes" type="text" name="classes" placeholder="Classes" />
</ExampleInputs>

<ExampleResult>
<h1 :key="animationKey" v-html="animated" class="text-balance text-center font-bold leading-[1.25em] text-4xl text-gray-900 dark:text-white"></h1>
</ExampleResult>
</Example>
</template>

<script setup lang="ts">
import { ref, computed, watch } from 'vue';
import { ref, computed, watch } from 'vue'
const value = ref('Zippy little utils for your JavaScript projects.');
const splitBy = ref('word');
const time = ref(100);
const unit = ref('ms');
const className = ref('animate-fade-in-up');
const animationKey = ref(0);
const value = ref('Zippy little utils for your JavaScript projects.')
const splitBy = ref('word')
const time = ref(100)
const unit = ref('ms')
const className = ref('animate-fade-in-up')
const animationKey = ref(0)
const animated = computed(() => {
return animateText(value.value, { splitBy: splitBy.value, time: time.value, unit: unit.value, class: className.value });
});
return animateText(value.value, { splitBy: splitBy.value, time: time.value, unit: unit.value, class: className.value })
})
watch([value, splitBy, time, unit, className], () => {
animationKey.value += 1;
});
animationKey.value += 1
})
</script>
5 changes: 2 additions & 3 deletions src/animations.ts
Original file line number Diff line number Diff line change
Expand Up @@ -14,14 +14,13 @@ export function animateText(text: string, options: { splitBy?: 'word' | 'charact

const result = elements.map((element, index) => {
const delay = `${index * time}${unit}`
const spanStyle = 'display: inline-block; position: relative;'
const translateStyle = `position: absolute; top: 0; left: 0; animation-delay: ${delay};`

if (element === ' ' && splitBy === 'character') {
return '<span class="space" style="white-space: pre;"> </span>'
} else {
return `<span class="relative overflow-clip" style="${spanStyle}">
<span class="ghost" style="visibility: hidden;">${element}</span>
return `<span style="display: inline-block; position: relative; overflow: clip;">
<span class="ghost" style="visibility: hidden;" aria-hidden="true">${element}</span>
<span class="translate ${cssClass}" style="${translateStyle}">${element}</span>
</span>`
}
Expand Down

0 comments on commit a06bc9e

Please sign in to comment.