NubieHere Posted November 26, 2019 Share Posted November 26, 2019 I don't know why I always end up in an extremely complicated setup when trying to do very simple stuff (stupid, maybe?) HOW, do I simply fade out all characters of a text (in any given element) one by one ... then, when done change text (not visibly) ... then fade in the new characters of the new text one by one. Fade in, fade out, fade in, fade out, wax on, wax off, wax on, wax off ... I'm doing stuff like this: ``` function swapText ( element, content ) { var myText = new SplitText( element, { type: "words, chars" } ), tl = gsap.timeline(), chars = myText.chars; tl.to(chars, {duration: 0.1, opacity:0, stagger: 0.02, onComplete: changeText, onCompleteParams: [ { element, content } ] }, "+=0"); } function changeText ( params ) { // How do I start out with an invisible text that I can fade in? $( params.element ).html( params.content ); showText( params ); } function showText ( params ) { var myText = new SplitText( params.element, { type: "words, chars" } ), tl = gsap.timeline(), chars = myText.chars; tl.to(chars, {duration: 0.1, opacity:1, stagger: 0.02 }, "+=0"); } ``` Which becomes overly complicated ... Link to comment Share on other sites More sharing options...
NubieHere Posted November 26, 2019 Author Share Posted November 26, 2019 Yes, and as always: only when I post here I find the answer. I'm going to write a paper on the phenomenon of asking a question and then immediately find the answer. function swapText ( element, content ) { var myText = new SplitText( element, { type: "words, chars" } ), tl = gsap.timeline(), chars = myText.chars; tl.to(chars, {duration: 0.1, opacity:0, autoAlpha: 1, stagger: 0.02, onComplete: showText, onCompleteParams: [ { element, content } ] }, "+=0"); } function showText ( params ) { $( params.element ).html( params.content ); var myText = new SplitText( params.element, { type: "words, chars" } ), tl = gsap.timeline(), chars = myText.chars; tl.from(chars, {duration: 0.1, opacity:0, stagger: 0.02 }, "+=0"); } Sigh! Still not very elegant, though. Link to comment Share on other sites More sharing options...
ZachSaucier Posted November 26, 2019 Share Posted November 26, 2019 Hey NubieHere, I think an easier way to do this would be to not worry about switching the actual text but instead just hiding existing elements. Then you can set it up at the start and not worry about all the details. I modified an existing SplitText demo to show how that could work: See the Pen gOONoQK?editors=0010 by GreenSock (@GreenSock) on CodePen Link to comment Share on other sites More sharing options...
NubieHere Posted November 26, 2019 Author Share Posted November 26, 2019 Great, exactly. I'm still wrapping my head around using this thing properly ... Link to comment Share on other sites More sharing options...
ZachSaucier Posted November 26, 2019 Share Posted November 26, 2019 4 minutes ago, NubieHere said: I'm still wrapping my head around using this thing properly ... Feel free to ask questions At the core, what I'm doing in the above is creating a timeline for each paragraph that will be split. Then I'm adding those timelines in a sequence (to the master timeline) with a 1.5 second gap between them. I make use of a few GSAP 3 features like the ">" operator which places the tween relative to the end of the tween before it. I also repeat that master timeline so it's an infinite effect. Not sure if you need that part. 1 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