Replaced texts disappears

[mercuryN10]

※"typed out" as shorthand for applying typing animation

 

My goal & some details:

• When hovering over various SVG elements, I want texts to be "typed out" in an empty unordered list.
  • Each SVG "types out" a different number of list items, each with varying lengths.
• Each item in the list will be "typed" out simultaneously.
• Say SVG-A list-item-1 has three lines worth of texts, I want list-item-2 to start being "typed out" in the fourth line; if list-item-2 has two lines worth of text, I want list-item-3 to start being "typed out" in the sixth line.
• Similarly, say SVG-B list-item-1 has two lines worth of texts, I want list-item-2 to start being "typed out" in the third line.

 

What I am trying:

• I tried "typing" out the texts twice:
  • (1) Firstly, into the empty list, I "typed" the corresponding texts into it with text-color = background-color.
  • (2) Then, I replaced the typed invisible text from (1) with the same texts, but this time using my desired text color, using the same typing animation. 
    • Since the invisible texts in (1) already printed out the texts, texts in (2) will be printed out in the correct position.
    • In CodePen and my attached video, I did not use background color in (1) just to show what I'm doing.

 

🌞The Problem🌞

• When the animation in (2) starts playing, sometimes the texts in (1) disappears. It doesn't always happen.
  • The CodePen code also sometimes works as intended, sometimes it doesn't.
• This causes the list items to move around when being "typed".
• I recorded the problem from my work here:
  • https://tempclip.com/en/WwnJbztOnHu3NZX/watch

 

My Question

• What went wrong? (Probably very hard to tell...)
• How do I debug this?
• Is there a better way to achieve my goal?

 

My knowledge/background

• This is my first time using GSAP. I don't have much tech background, I only sometimes do this for fun.
• Would appreciate if you can use simple words ;w;

See the Pen zYmarQX by mercuryN10 (@mercuryN10) on CodePen

[GSAP Helper]

Howdy @mercuryN10 and welcome to the GreenSock forums! I don't have a lot of time right now to dig into everything here, but I wanted to offer you some quick advice about how to get the most out of these forums...

 

Keep it simple. Don't list a bunch of requirements ("it should animate over each section, and gradient colors over those children, force animation on hero load and then have ScrollTrigger take over dynamically...and I think my code is a mess so please help clean it up" - that's too hard to follow). Just pick the very first thing and see if you can make that work. If you get stuck, post one question focused on that one piece, like "how can I pin each section one at a time?" Keep your CodePen focused only on that one piece with as little code/markup as possible. Then once that's answered, move on to your next question/problem. 

 

Baby steps 😉

 

Before you know it, things will fall into place one at a time.

 

Again, try not to list out all the problems. Break them apart. You'll get a lot more people willing to help you if you keep things simple and clear. A well-crafted minimal demo is GOLD around here - you'll get people falling over themselves to help you if you make a CodePen that's super clear and isolates the issue. Explain exactly how to reproduce the problem, like "scroll down to the blue section and notice how it pins before it hits the top of the viewport" for example.

 

Don't worry - this community has got your back when it comes to GSAP-specific questions. I just wanted to provide some pointers on how to help us help you.