How to hide split text element on page load

[cerealbeast]

I haven't used GSAP for quite a while and I am struggling to remember how to correctly hide text on page load using autoAlpha. Would be super appreciative if someone could show me where to add to below code. Thanks!

 

jQuery(document).ready(function ($) {
  (function () {
    let chck_if_gsap_loaded = setInterval(function () {
      const eleBuilder = document
        .querySelector("body")
        .classList.contains("elementor-editor-active");
      if (window.gsap && window.ScrollTrigger && !eleBuilder) {
        gsap.registerPlugin(ScrollTrigger);
        gsap.registerPlugin(SplitText);
        text_reveal();
        clearInterval(chck_if_gsap_loaded);
      }
    }, 500);

    function text_reveal() {
      const splitLines = new SplitText(".split-me p", {
        type: "lines",
        linesClass: "scroll-reveal scroll-reveal++"
      });

      jQuery(".split-me .scroll-reveal").wrap(
        '<div class="scroll-reveal-wrapper">'
      );

      gsap.utils.toArray(".scroll-reveal").forEach((el) => {
        gsap.from(el, {
          yPercent: 200,
          duration: 1,
          ease: "power4",
          scrollTrigger: {
            trigger: el,
            start: "top 90%"
          }
          
        });
      });

      jQuery(window).resize(function () {
        splitLines.revert();
      });
    }
  })();
});

 

See the Pen VwgybXO by gwjr (@gwjr) on CodePen

[mvaneijgen]

Hi @cerealbeast 

 

Check out https://gsap.com/resources/fouc/, if that isn't clear please provide a minimal demo, so that we can take a look at your setup.

 

Hope it helps and happy tweening!  

 

[cerealbeast]

Hi,

Sure, I have edited my post to include a Codepen.

[mvaneijgen]

See the Pen JjxMydR?editors=0100 by mvaneijgen (@mvaneijgen) on CodePen

[cerealbeast]

Thanks but this doesn't seem to be working? I can still see the text on page load.

[Rodrigo]

Hi,

 

Maybe something like this:

See the Pen yLZpzQP by GreenSock (@GreenSock) on CodePen

 

Hopefully this helps.

Happy Tweening!

[cerealbeast]

perfect, thanks!