Hi,
I'm trying to edit one of your SplitText demos.
The demo (Swing Drop Flicker) is on Codepen (see Codepen below).
https://codepen.io/GreenSock/pen/nQzyxo
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.