Problem editing a GSAP script

[Radar18]

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

[ryan_labar]

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

[Radar18]

@ryan_labar, thanks for your help. Got it! It's working now!

Also, point taken re. FOUC. Will consider this further. Much appreciated!