momo12 Posted October 2, 2022 Share Posted October 2, 2022 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 More sharing options...
Solution Rodrigo Posted October 2, 2022 Solution Share Posted October 2, 2022 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 More sharing options...
momo12 Posted October 2, 2022 Author Share Posted October 2, 2022 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 More sharing options...
Recommended Posts
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 accountSign in
Already have an account? Sign in here.
Sign In Now