Animation with split text

[Sirisha Pendem]

Hi, I have some bulleted text with a background color. When I try to animate this using split text plugin, I could animate individual chars. But I'm unable to remove the background color and bullets, so that I can show them only when the text corresponding to list items is being shown.

Basically I want the background color to be present only when the corresponding list item is being shown. Any tips on how to achieve this is appreciated. Thank you.

See the Pen ZEOGMRL by cjayanth95 (@cjayanth95) on CodePen

[mvaneijgen]

I've tried something and it works but I would suggest creating a timeline for each item and then animate everything only for that Item, otherwise you'll need to know how much letters are in each item before you can start the next animation.

 

See the Pen ZEOGMRL?editors=1010 by cjayanth95 (@cjayanth95) on CodePen

[mikel]

8 minutes ago, mvaneijgen said:

I would suggest creating a timeline for each item and then animate everything only for that Item

 

That could be an option

 

See the Pen wvWaOgp by mikeK (@mikeK) on CodePen

 

Happy listing ...

Mikel

 

[Sirisha Pendem]

Thanks for the response.

Here's the final implementation. Animating each list item separately.

Typewriter: 

See the Pen ExyVZvq by cjayanth95 (@cjayanth95) on CodePen

Sample text delivery animation: 

See the Pen RwRWGVJ by cjayanth95 (@cjayanth95) on CodePen