jollygreen Posted January 15, 2020 Share Posted January 15, 2020 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. Link to comment Share on other sites More sharing options...
Shaun Gorneau Posted January 15, 2020 Share Posted January 15, 2020 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? 2 Link to comment Share on other sites More sharing options...
jollygreen Posted January 15, 2020 Author Share Posted January 15, 2020 @Shaun - We can animate the text with visibility:hidden using https://cdnjs.cloudflare.com/ajax/libs/gsap/1.20.3/TweenMax.min.js Link to comment Share on other sites More sharing options...
GreenSock Posted January 15, 2020 Share Posted January 15, 2020 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. Link to comment Share on other sites More sharing options...
jollygreen Posted January 15, 2020 Author Share Posted January 15, 2020 @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 Link to comment Share on other sites More sharing options...
GreenSock Posted January 15, 2020 Share Posted January 15, 2020 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? 2 Link to comment Share on other sites More sharing options...
jollygreen Posted January 15, 2020 Author Share Posted January 15, 2020 @GreenSock yes, thank you very much! looks great! 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