How to fade out text, change, then fade back in?

[TheNomadicAspie]

I'm completely new to GSAP, and it was suggested to me since I'm struggling to manually animate several parts of my app.

 

The first thing I'm working on is text transition. Throughout my code I constantly fade out my text, change it, and fade it back in. I found an example script that almost does what I want here, but requires multiple divs.

 

Can I just fade the text out, change the element.innerText, then fade it back in? I just want to make sure I'm doing things the "correct" way since I have a tendency to meticulously write code poorly only to rewrite it all later.

 

See the Pen OGgMdG by PointC (@PointC) on CodePen

[GreenSock]

Welcome to the forums (and GSAP), @TheNomadicAspie. 

 

There are actually quite a few ways to do this in a "clean" manner. A few questions:

1. Is your goal to have only one element in the markup and inject the various subsequent text via JS? Or do you like having all the text in the markup (but the alternate states invisible initially)? Some people prefer to have it all in the markup because it's coming from a CMS or maybe they have other editors that always work on that layer instead of the JS.
2. Is there any particular reason you're using the very old syntax from years ago? I just want to make sure it's okay for you to use the more modern and concise GSAP 3.x syntax. 
3. Is the first state supposed to be opacity: 1 initially on page load or do you want that to fade in too? 

[TheNomadicAspie]

19 minutes ago, GreenSock said:

Welcome to the forums (and GSAP), @TheNomadicAspie. 

 

There are actually quite a few ways to do this in a "clean" manner. A few questions:

1. Is your goal to have only one element in the markup and inject the various subsequent text via JS? Or do you like having all the text in the markup (but the alternate states invisible initially)? Some people prefer to have it all in the markup because it's coming from a CMS or maybe they have other editors that always work on that layer instead of the JS.
2. Is there any particular reason you're using the very old syntax from years ago? I just want to make sure it's okay for you to use the more modern and concise GSAP 3.x syntax. 
3. Is the first state supposed to be opacity: 1 initially on page load or do you want that to fade in too? 

Hi Jack, thanks for the welcome.

 

1. I would like to only have one element in the mark-up, as I will be changing the text hundreds of times throughout the course of the program. It would be easier to manage one element rather than continually showing and hiding different elements.

2. I actually didn't write that code at all, I just copied the link to the codepen from the link I referenced in my post, as the forum suggested including a codepen is advisable for context. Sorry if that was not clear, but I was only including that link as an example of what I'm trying to do (Minus toggling the visibility of multiple elements).

3. On my actual code, I'm currently handling it by having the text div visible, then changing the opacity. Then I use setTimeout to change the innerText and begin showing the element at the exact moment the opacity transition is complete. This works but makes it difficult to chain multiple animations that have to come one after another.

 

I will be making several similar animations though. For example I have a loading animation gif which plays, which I need to fade out and then fade in some text.

 

This is complicated and requires chaining promises since there's no way to know exactly when the program will finish loading, so I was hoping GSAP could make this simpler?

[GreenSock]

Sure, this might be a great use case for gsap.registerEffect() which you could do one time and then call on that effect as many times as you want, and all the logic is in one place. It makes your code much more concise and manageable:

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

 

So once that effect is registered, you could use it in a one-off way like this: 

gsap.effects.swapText(".subtext", {text: "NEW TEXT"});

And that returns a timeline which you can nest in another timeline or do whatever you want with. Even pause(), resume(), timeScale(), whatever. 

 

Once you wrap your head around some of the key building blocks in GSAP, I think you'll be blown away by how modular you can make your code and how simple it makes things. 

 

Does that help? 

[TheNomadicAspie]

That's perfect, thank you so much. I initially tried to pass an ID to it before realizing it needed to be a class. That's completely fine for my purpose now, but in the future is it possible to use an ID? I tried replacing targets[0] with targets to see if that would work, but it didn't. It's no big deal if I need to use classes but was just curious so I know if I need to anticipate always using classes in the future or not?

 

I'm really excited to learn about gsap btw, thanks for the help.

[GreenSock]

1 hour ago, TheNomadicAspie said:

in the future is it possible to use an ID?

Of course! You can pass any selector text in. So, for example, if you want to target an element with an ID of "text1", you'd do: 

gsap.effects.swapText("#text1", {text: "whatever"});

The "#" represents an ID whereas "." represents a class (just like any CSS selector). 

 

You can also pass in a direct reference of the element itself:

var myElement = document.querySelector("#text1");
gsap.effects.swapText(myElement, {text: "whatever"});

 

I'd encourage you to read through the Getting Started article and poke around in the docs. It'll start making sense in no time.