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