Hey community,
I love animating with GSAP but for my latest project I need some help.
I created a very simple Codepen to demonstrate my basic source code:
http://codepen.io/anon/pen/NRVyrY
Now I want to make this "fake input field" to be filled out character per character with the content of the spans, for each input after the other. It should appear as if the computer pre fills it out different altering values.
So the animation should something look like (every line is one animation step):
A
AB
ABC
AB
A
D
DE
DEF
DE
D
G
GH
G
I
...
I hope it comes clear what I want to achieve? Like I said, the effect should be that this "fake input field" is filled out with altering values.
Of course I could make it very painfully by give every input and every span an unique ID and to show and hide all these elements manually in my timeline.
But there MUST be a better way to solute this. Maybe by staggering the DIVs and inside staggering the SPANs? Maybe by looping through elements with a for loop in my timeline? I simply can't figure it out.
Can someone help me?
If it is unclear, I could make a GIF that shows what I basically want.
Cheers,
Linho