TheNomadicAspie

Hi Cassie, thank you very much. I'll start experimenting, just wanted to make sure I was using (Or not using) the correct tool/approach. Thanks again.

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?

I have a logo that's always in the corner of my app like in the image attached. I also occasionally have a loading animation that plays after fading out the buttons and text on the screen like this. I would really like to animate the logo from the corner of the screen to the center while transitioning from the static image to the gif I'm using. Is there someway to do that? Would I need to buy the license to have access to morph SVG or is there another method I could use? I've never used GSAP before so I'm not sure how to approach this.

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.