Revelación de Texto Animada

En este tutorial vas a aprender a realizar distintas revelaciones de textos animadas. Estas animaciones son mejores que las que vienen determinadamente en Elementor por defecto, ya que son mucho mas llamativas.

Códigos

Código 1

Copia y pega el siguiente código en un widget de HTML (da igual donde coloques este widget).

<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.4.0/gsap.min.js"></script>
<script src="https://unpkg.com/split-type"></script>

<script>
       const myText = new SplitType('h1')

        gsap.to('.char', {
            y: 0,
            stagger: 0.02,
            delay: 0.2,
            duration: .1,
           
        })
 
</script>

Código 2

Dentro del mismo widget, copia y pega el siguiente código en Avanzado > CSS Personalizado.

.char {
    transform: translateY(175px);
    transition: transform .8s ;

Código 3

Dentro del contenedor donde has colocado el texto que quieras animar, debrás dirigirte a CSS Personalizado, y colocar el siguiente.

.text {
    overflow: hidden;
}

Código 4

En un nuevo widget de HTML, colocarás el siguiente código, y le darás la clase de “reveal-text” a cada uno de los elementos en donde quieres que se presente el efecto

<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.4.0/gsap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.3.3/ScrollTrigger.min.js"></script>

<script>
gsap.registerPlugin(ScrollTrigger);

let revealContainers = document.querySelectorAll(".reveal-text");

revealContainers.forEach((container) => {
  let tl = gsap.timeline({
    scrollTrigger: {
      trigger: container,
      toggleActions: "restart none none reset"
    }
  });

  tl.set(container, { autoAlpha: 1 });
  tl.from(container, 1.5, {
            duration: 1.8,
            delay: .05,
            y: 200,
            skewY: 5,
            stagger: {
                amount: 0.05
            },
            
            ease: "rough.out"
  });

});

</script>

Para ir variando los efectos, puedes ir probando con los siguientes, dentro de la etiqueta “ease”.

back
elastic
bounce
rough
slowmo
stepped
circ
expo
sine

Deja un comentario Cancelar respuesta

Abrir chat

¡Hola! ¿En qué podemos ayudarte?