Radar18 Posted November 29, 2023 Share Posted November 29, 2023 Hi, I'm trying to edit one of your SplitText demos. The demo (Swing Drop Flicker) is on Codepen (see Codepen below). In the original GSAP demo, the text is set to visibility:hidden using CSS. Once animation starts, the GSAP JS script animates the text opacity using autoAlpha:1 so that the text fades in to view. CSS #my-animated-txt{ font-size:32px; text-align:center; color:#f00; visibility:hidden; } let tl2 = gsap.timeline({}); theElement = document.getElementById("my-animated-txt"), split = new SplitText(theElement, {type:"chars", position:"absolute"}); for (i = 0; i < split.chars.length; i++) { tl2.fromTo(split.chars[i], 2.4, {transformOrigin:"center -160px", z:0.1, rotation:((Math.random() < 0.5) ? 90 : -90)}, {rotation:0, ease:Elastic.easeOut, autoAlpha:1}, 0.3 + i * 0.06); tl2.to(split.chars[i], 0.6, {y:96, ease:Bounce.easeOut}, 3.4 + Math.random() * 0.6); } My question is: rather than using CSS to initially set the text to be animated to visibility:hidden (opacity:0), is it possible to set the text to visibility:hidden (opacity:0) in the GSAP script? I've tried a few things but cannot get it to work. For example, I've tried to use set() to set the text to opacity:0, but this doesn't work - the text remains invisible throughout the whole animation: gsap.set("#my-animated-txt", {opacity: 0}); let tl2 = gsap.timeline({}); theElement = document.getElementById("my-animated-txt"), split = new SplitText(theElement, {type:"chars", position:"absolute"}); for (i = 0; i < split.chars.length; i++) { tl2.fromTo(split.chars[i], 2.4, {transformOrigin:"center -160px", z:0.1, rotation:((Math.random() < 0.5) ? 90 : -90)}, {rotation:0, ease:Elastic.easeOut, autoAlpha:1}, 0.3 + i * 0.06); tl2.to(split.chars[i], 0.6, {y:96, ease:Bounce.easeOut}, 3.4 + Math.random() * 0.6); } I've also tried initially setting the text to autoAlpha:0 in the GSAP fromto tween: tl2.fromTo(split.chars[i], 2.4, {transformOrigin:"center -160px", z:0.1, rotation:((Math.random() < 0.5) ? 90 : -90), autoAlpha:0}, {rotation:0, ease:Elastic.easeOut, autoAlpha:1}, 0.3 + i * 0.06); ... but this does not seem to work either. Hoping someone can give me some advice on this. See the Pen nQzyxo by GreenSock (@GreenSock) on CodePen Link to comment Share on other sites More sharing options...
Solution ryan_labar Posted November 29, 2023 Solution Share Posted November 29, 2023 4 hours ago, Radar18 said: For example, I've tried to use set() to set the text to opacity:0, but this doesn't work - the text remains invisible throughout the whole animation: With this you are setting the entire block of text to opacity: 0 and never setting the block back to opacity: 1. You could just add autoAlpha: 0 in the from part of the fromTo object, and that should do it.: gsap.set(split.chars, { transformOrigin: "center -160px", z: 0.1, } split.chars.forEach((char, i) => { tl2.fromTo(char, { autoAlpha: 0, rotation: ((Math.random() < 0.5) ? 90 : -90) }, { rotation: 0, autoAlpha: 1, duration: 2.4, ease:'elastic.out', }, 0.3 + i * 0.06); } This is, however, a reason to set the opacity initially with CSS, and that is FOUC. More on that here: https://gsap.com/resources/fouc Link to comment Share on other sites More sharing options...
Radar18 Posted November 29, 2023 Author Share Posted November 29, 2023 @ryan_labar, thanks for your help. Got it! It's working now! Also, point taken re. FOUC. Will consider this further. Much appreciated! 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