Animated showing of data from an array

[Cere6ellum]

Hello dear community.

I have big interesting issue.

 

I need to animate string.

This string will be animated divided on chars.

I know how i'll animate it.

 

But, i cannot understand how i need to show this string.

 

This method doesn't work.

$.each(charsArr, function(i) {
            tl.to($(this).find("#section-1"), 2.5, {
            autoalpha: 1,
            fontSize: "2vw",
            color: "#eeeeee",
            opacity: 100,

[Kishin Karra]

How I mostly do it is as follows:

 

Split the text using SplitText utility

 

Stagger the character elements

 

Just a quick demo

 

See the Pen jOONQrQ by kishin-karra (@kishin-karra) on CodePen

 

[Cere6ellum]

8 minutes ago, Kishin Karra said:

How I mostly do it is as follows:

 

Split the text using SplitText utility

 

Stagger the character elements

 

Just a quick demo

 

 

 

 

 

There is you are showing that your chars have parent's id.

I know and understand this solution.

But, if these chars are in the array (not in DOM), how will it be shown?

 

 

[mikel]

Hey @Cere6ellum,

 

You can use the textPlugin if I understand your intention correctly.

 

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

 

Happy tweening ...

Mikel

[Kishin Karra]

A little different approach than @mikel

 

See the Pen dyybaXB by kishin-karra (@kishin-karra) on CodePen