GSAP animation not working on very first load of the web page.

[codechirag]

Hello my wonderful community, 

 

https://paretoweb.empyrealinfotech.net/

 

this is my website where I have used split-type with gsap animation my concern is that on very first load of the page animation except hero section doesn't work. and once we refresh the page all animations work fine. I don't understand why it that happening it is not throwing any error either. Need your help.

 

useGSAP(() => {
    
    const animText = gsap.utils.toArray("h1");
    animText.forEach((box) => {
      const splith1 = new SplitType(box, {
        types: "words, chars,lines"
      });
      gsap.from(splith1.chars, {
        display: "none",
        stagger: 0.05
      });
    });
    const animH2 = gsap.utils.toArray("h2");
    animH2.forEach((box) => {
      const splith2 = new SplitType(box, {
        types: "words, chars,lines"
      });
      gsap.from(splith2.chars, {
        display: "none",
        stagger: 0.05,
        scrollTrigger: {
          trigger: box,
          start: "top center"
        }
      });
    });
  });

 

[GreenSock]

Hi @codechirag. It's super tough to troubleshoot a live site. There are way too many factors and we can't really tweak things to see what's going on. If you'd like some help, please provide a minimal demo, like a Stackblitz or CodePen. 

 

Here's a starter template you can fork: 

https://stackblitz.com/edit/react-cxv92j

 

Also keep in mind that Split-Type is not a GSAP product, so we can't really support that. Our tool is SplitText. 🙂