Jump to content
GreenSock

momo12

Default state visible on Load

Go to solution Solved by Rodrigo,

Recommended Posts

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

Link to comment
Share on other sites

  • Solution

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!

Link to comment
Share on other sites

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!!

Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
  • Recently Browsing   0 members

    • No registered users viewing this page.
×