maz-ui
Version:
A standalone components library for Vue.Js 3 & Nuxt.Js 3
93 lines (92 loc) • 4.95 kB
JavaScript
import { defineComponent, computed, ref, onMounted, nextTick, onBeforeUnmount, createElementBlock, openBlock, createBlock, resolveDynamicComponent, mergeProps, withCtx, createCommentVNode, Fragment, renderList, createElementVNode, normalizeStyle, normalizeClass, toDisplayString, createTextVNode } from "vue";
import { c as checkAvailability } from "../chunks/checkAvailability.aTpZidex.js";
import { _ as _export_sfc } from "../chunks/_plugin-vue_export-helper.B--vMWp3.js";
import '../assets/MazAnimatedText.DwSVjclZ.css';const _hoisted_1 = { class: "m-reset-css m-animated-text" }, _hoisted_2 = { class: "m-animated-text__last-word-inner" }, _hoisted_3 = { class: "m-animated-text__last-word-inner-text" }, _sfc_main = /* @__PURE__ */ defineComponent({
inheritAttrs: !1,
__name: "MazAnimatedText",
props: {
text: {},
lastWord: {},
delay: { default: 0 },
direction: { default: "up" },
tag: { default: "span" },
wordDelay: { default: 75 },
columnGap: { default: 0.5 },
rowGap: { default: 0 },
duration: { default: 2e3 },
once: { type: Boolean, default: !0 }
},
setup(__props) {
const words = computed(() => __props.text.split(" ")), wordCount = computed(() => words.value.length), isVisible = ref(!1), isClient = ref(!1), animatedWords = ref([]), element = ref();
let observer = null, animationFrameId = null;
function triggerWordAnimations() {
const totalWords = words.value.length + (__props.lastWord ? 1 : 0);
animatedWords.value = Array.from({ length: totalWords }, () => !1);
let currentIndex = 0;
const animateNextWord = () => {
currentIndex < totalWords && requestAnimationFrame(() => {
animatedWords.value[currentIndex] = !0, currentIndex++, currentIndex < totalWords && (animationFrameId = setTimeout(animateNextWord, __props.wordDelay));
});
};
setTimeout(animateNextWord, __props.delay);
}
return onMounted(() => {
isClient.value = !0, observer = new IntersectionObserver(([entry]) => {
entry.isIntersecting && !isVisible.value && (isVisible.value = !0, nextTick(() => {
triggerWordAnimations();
}), __props.once && element.value && observer?.unobserve(element.value));
}), checkAvailability(() => element.value, (element2) => {
observer?.observe(element2);
});
}), onBeforeUnmount(() => {
observer?.disconnect(), animationFrameId && clearTimeout(animationFrameId);
}), (_ctx, _cache) => (openBlock(), createElementBlock("div", _hoisted_1, [
isClient.value ? (openBlock(), createBlock(resolveDynamicComponent(__props.tag), mergeProps({
key: 0,
ref_key: "element",
ref: element
}, _ctx.$attrs, {
class: "m-animated-text__root",
style: { columnGap: `${__props.columnGap}rem`, rowGap: `${__props.rowGap}rem` }
}), {
default: withCtx(() => [
(openBlock(!0), createElementBlock(Fragment, null, renderList(words.value, (word, index) => (openBlock(), createElementBlock("span", {
key: word + index,
class: "m-animated-text__word"
}, [
createElementVNode("span", {
class: normalizeClass(["m-animated-text__word-inner", animatedWords.value[index] ? `maz-animate-slide-${__props.direction}-blur` : "maz-invisible"]),
style: normalizeStyle({
animationDuration: `${__props.duration}ms`
})
}, toDisplayString(word), 7)
]))), 128)),
__props.lastWord ? (openBlock(), createElementBlock("span", {
key: 0,
class: normalizeClass(["m-animated-text__last-word", animatedWords.value[wordCount.value] ? `maz-animate-slide-${__props.direction}-blur` : "maz-invisible"]),
style: normalizeStyle({
animationDuration: `${__props.duration}ms`
})
}, [
createElementVNode("span", _hoisted_2, [
_cache[0] || (_cache[0] = createElementVNode("span", { class: "m-animated-text__last-word-inner-gradient" }, null, -1)),
createElementVNode("span", _hoisted_3, toDisplayString(__props.lastWord), 1)
])
], 6)) : createCommentVNode("", !0)
]),
_: 1
}, 16, ["style"])) : (openBlock(), createBlock(resolveDynamicComponent(__props.tag), mergeProps({ key: 1 }, _ctx.$attrs, { class: "maz-invisible maz-inline-flex" }), {
default: withCtx(() => [
createTextVNode(toDisplayString(__props.text) + " ", 1),
__props.lastWord ? (openBlock(), createElementBlock(Fragment, { key: 0 }, [
createTextVNode(toDisplayString(__props.lastWord), 1)
], 64)) : createCommentVNode("", !0)
]),
_: 1
}, 16))
]));
}
}), MazAnimatedText = /* @__PURE__ */ _export_sfc(_sfc_main, [["__scopeId", "data-v-70674d43"]]);
export {
MazAnimatedText as default
};