Texto animado reveal

Classes utilizadas

				
					textoAnimado
				
			

Código Widget HTML

		
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/gsap.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/ScrollTrigger.min.js"></script>
<script src="https://unpkg.com/split-type"></script>

<script>

    gsap.registerPlugin(ScrollTrigger);
    const splitTypes = document.querySelectorAll(".textoAnimado");

    splitTypes.forEach((char, i) => {
      const text = new SplitType(char, { types: "chars" });

      gsap.from(text.chars, {
        scrollTrigger: {
          trigger: char,
          start: "top 50%",
          end: "top top",
          scrub: 1,
          markers: true
        },
        y: -40,
        opacity:0,
        stagger: 0.1,
      });
    });
        
</script>
		
	

Código Widget HTML

		
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/gsap.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/ScrollTrigger.min.js"></script>
<script src="https://unpkg.com/split-type"></script>

<script>

    gsap.registerPlugin(ScrollTrigger);
    const splitTypes = document.querySelectorAll(".textoAnimado");

    splitTypes.forEach((char, i) => {
      const text = new SplitType(char, { types: "chars" });

      gsap.from(text.chars, {
        scrollTrigger: {
          trigger: char,
          start: "top 50%",
          end: "top top",
          scrub: 1,
          markers: true
        },
        y: -40,
        opacity:0,
        stagger: 0.1,
      });
    });
        
</script>
		
	
Generic selectors
Exact matches only
Search in title
Search in content
Post Type Selectors

Torne-se um Desenvolvedor de Sucesso!