Default state visible on Load

[momo12]

Hi guys,

Is there a way to make the default state of our elements not visible on reload? As you can see, the text appears for a few seconds without the animation on reload. Then, the animation starts.

See the Pen PoeeKEV by emdesigner-or (@emdesigner-or) on CodePen

[Rodrigo]

Hi,

 

Yeah some times JS takes a few moments to kick in. In those cases my approach is to hide either the element(s) or it's container until the from() instance is created:

.text-wr {
  overflow: hidden;
  opacity: 0; /* <- HIDE THE PARENT */
}

gsap.set(".text-wr", { opacity: 1 });
gsap.from(split.chars, {
  duration: 1,
  y: 200,
  autoAlpha: 0,
  ease: "power3.out",
  stagger: 0.05,
});

In this case your GSAP instance is quite simple and it's execution is super fast so the parent doesn't seems to be visible. If for some reason it does shows, you can try this:

const t = gsap.from(split.chars, {
  paused: true,
  duration: 1,
  y: 200,
  autoAlpha: 0,
  ease: "power3.out",
  stagger: 0.05,
});
gsap.set(".text-wr", { opacity: 1 });
t.play();

Happy Tweening!

[momo12]

1 hour ago, Rodrigo said:

Hi,

 

Yeah some times JS takes a few moments to kick in. In those cases my approach is to hide either the element(s) or it's container until the from() instance is created:

.text-wr {
  overflow: hidden;
  opacity: 0; /* <- HIDE THE PARENT */
}

gsap.set(".text-wr", { opacity: 1 });
gsap.from(split.chars, {
  duration: 1,
  y: 200,
  autoAlpha: 0,
  ease: "power3.out",
  stagger: 0.05,
});

In this case your GSAP instance is quite simple and it's execution is super fast so the parent doesn't seems to be visible. If for some reason it does shows, you can try this:

const t = gsap.from(split.chars, {
  paused: true,
  duration: 1,
  y: 200,
  autoAlpha: 0,
  ease: "power3.out",
  stagger: 0.05,
});
gsap.set(".text-wr", { opacity: 1 });
t.play();

Happy Tweening!

Thanks!!