Text Animation - gsap3

[jollygreen]

I can animate text with the following:

var headline = document.querySelector('#headline');
var splitHeadline = new SplitText(headline, {type:'words,chars'});
var chars1 = splitHeadline.chars; 

gsap.from(chars1, {duration: 0.5, autoAlpha:0, ease:  SteppedEase.config(6), stagger: 1 / 10 })

However, if I change "autoAlpha:0" with "visibility:'hidden'" to remove the opacity, the text doesn't animate.  I'd appreciate your expertise.

 

 

[Shaun Gorneau]

If I understand correctly, you'd like to tween "visibility". But, visibility isn't a tweenable property because either it is (visible) or it isn't (hidden), there are no states in between.

 

Taking a step back, what is it you're trying to achieve that leads you to believe visibility: hidden; is the answer?

[jollygreen]

@Shaun - We can animate the text with visibility:hidden using https://cdnjs.cloudflare.com/ajax/libs/gsap/1.20.3/TweenMax.min.js

[GreenSock]

7 minutes ago, jollygreen said:

@Shaun - We can animate the text with visibility:hidden using https://cdnjs.cloudflare.com/ajax/libs/gsap/1.20.3/TweenMax.min.js

@jollygreen I'm totally confused. Can you show us an example of that? I can't imagine how that'd work. Like @Shaun Gorneau said, "visibility" isn't an animatable property (what would the halfway-between value be exactly? visibility: "kinda"?  ) I'm sure we're just misunderstanding something about what you're saying/wanting, so it'd be super helpful to see a reduced test case, perhaps in codepen? 

 

And why exactly are you NOT wanting to use autoAlpha? The entire point of that special property is to handle both opacity and visibility for you. So it seems perfect for the effect you described, but again, I must be missing something. 

[jollygreen]

@greensock, an example, which was developed by someone else, is below.  I wonder if we could streamline the code with gsap3.  I thought removing the opacity would give the typewriter effect.

 

See the Pen wvBxpbM#code-area by jollygreen10 (@jollygreen10) on CodePen

 

 

[GreenSock]

Sure, you could simplify that quite a bit. Here's a fork with GSAP 3: 

See the Pen f960d221c5f4074d7c7ae3965edafa07?editors=0010 by GreenSock (@GreenSock) on CodePen

 

Is that what you're looking for? 

[jollygreen]

@GreenSock yes, thank you very much!   looks great!