Text Animations

Add animations to text easily with pure HTML interface. For further plugin documentation please visit typewriter-effect

Typer

Sandbox is effortless and powerful with

<template>
  <span class="typer text-primary" id="typewriter"></span>
</template>

<script setup>
import Typewriter from "typewriter-effect/dist/core";

onMounted(() => {
  new Typewriter("#typewriter", {
    strings: ["customer satisfaction", "business needs", "creative ideas"],
    autoStart: true,
  });
});
</script>

<style lang="scss" scoped></style>

Typer with Loop

Sandbox focuses on

View example's code


                <template>
  <span class="typer text-primary" id="typewriter2"></span>
</template>

<script setup>
import Typewriter from "typewriter-effect/dist/core";

onMounted(() => {
  new Typewriter("#typewriter2", {
    strings: ["customer satisfaction", "business needs", "creative ideas"],
    autoStart: true,
    loop: true,
  });
});
</script>

<style lang="scss" scoped></style>

Rotator

Sandbox is effortless and powerful with mobile design

View example's code


                <template>
  <span class="rotator-fade text-primary">
    <span
      v-if="animatedText"
      class="animate__animated animate__fadeInDown"
      style="display: inline-block"
      >{{ currentStr }}</span
    >
    <span
      v-else="animatedText"
      class="animate__animated animate__fadeInDown"
      style="display: inline-block; visibility: hidden"
      >{{ currentStr }}</span
    >
  </span>
</template>

<script setup>
const strings = ["easy usage", "fast transactions", "secure payments"];
const currentStr = ref("mobile design");
const animatedText = ref(true);



const changeText = ref();
onMounted(() => {
  changeText.value = setInterval(() => {
  animatedText.value = false;
  setTimeout(() => {
    animatedText.value = true;
  }, 200);
  if (currentStr.value == strings[0]) {
    currentStr.value = strings[1];
  } else if (currentStr.value == strings[1]) {
    currentStr.value = strings[2];
  } else {
    currentStr.value = strings[0];
  }
}, 2000);
});
onUnmounted(() => {
  clearInterval(changeText?.value);
});
</script>

<style lang="scss" scoped></style>

Think unique and be creative. Make a difference with Sandbox.

Everything you need to create your next unique and professional website, including impressive and ready-made blocks and pages.

Buy Sandbox Nuxtjs

Project Pages

Single Projects

Usage

Styleguide

Elements