Hide scrollable line before GSAP loads

[Steve-O]

I've been looking over the forum for a way to hide a couple of objects (lines) that will appear when the client scrolls and every post states to use opacity: 0, or visibility: "hidden" on the original objects in the CSS and then change that in the toFrom() method, but when I do that the first line reverts back to it's initial state of visibility: "hidden" after the scrolling  and still isn't hidden initially using:

 

mm.add("(min-width: 1024px)", () => {

              const lineTl = gsap.gsap.timeline({
                scrollTrigger: {
                  trigger: ".line-container-1",
                  scrub: 1,
                  start: "top 60%",
                  end: "+=300px",
                  // markers: true,
                },
              });
              // const duration = 1 / 7;
              const line1D = 0.25;
              const line2D = 0.25;
              const duration = (1 - line1D - line2D) / 5;
              // 0.1428
        
              lineTl.fromTo(".line-1", {

               height: 0,
                scaleY: 0,
                transformOrigin: "top top",
                ease: "none",
                duration: line1D
              },

             {

               visibility: "visible",

               scaleY:  "100%"

             },
             )
              .fromTo(
                  ".line-2",
                  {
                    width: 0,
                  },
                  { width: "100%", transformOrigin: "right center", ease: "none", duration: duration, visibility: "visible" },
                );

            });

 

Suggestions? I am very new at gsap.

[mvaneijgen]

Hi @Steve-O welcome to the forum!

 

We have a whole post about having things start out invisible and then appearing when it is time. On the web there is even a term for it FOUC (flash of unstyled content) check it out https://gsap.com/resources/fouc/

 

Also note that if you animate to browser defaults you don't have to specify a .fromTo(), but you can just use .from() or .to(), this will make your code much more readable and easier to manage, check out https://gsap.com/resources/mistakes/#using-fromto-when-from-or-to-would-work

 

 

If you're new to GSAP check out this awesome getting started guide https://gsap.com/resources/get-started/

If you still need help, please provide a minimal demo, so that we can take a look at your code in action. Here is a starter template which loads all the plugins. Hope it helps and happy tweening! 

 

See the Pen aYYOdN by GreenSock (@GreenSock) on CodePen.