Create illusion of filling out "fake input field"

[Linho]

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:

 

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

See the Pen NRVyrY by anon (@anon) on CodePen

[Jonathan]

Hello Linho and Welcome to the GreenSock Forum!

 

Here is an example of using GSAP to create a typing text effect.

 

See the Pen avXdvw by jonathan (@jonathan) on CodePen

 

You can modify it to your needs and overlay it over a input box .

 

It uses the SplitTextPlugin and mix of TimelineMax.

 

Resources:

SplitTextPlugin http://greensock.com/docs/#/HTML5/GSAP/Utils/SplitText/

TimelineMax: http://greensock.com/docs/#/HTML5/GSAP/TimelineMax/

 

SplitText is a Club GreenSock membership benefit. You must have a valid membership to use this class without violating the terms of use. Visit http://greensock.com/club/ to sign up or get more details.

 

[Linho]

Hi Jonathan,

 

thank you for your quick reply. That looks nice.

 

However I would still have to find a way to iterate over all the different Inputs for my fake input without having to create those manual animations which would be possible but a bit inconvenient...

 

And of course I would prefer a free solution (probably possible with staggering the in span wrapped characters), but I will consider joining Club GreenSock. I will have a closer look this weekend.

 

Cheers,

Linho

[Carl]

You can do something similar with the TextPlugin which doesn't require a club membership.

 

 

var tl = new TimelineLite();


tl.to("h1", 1, {text:"username"})
  .to("h1", 1, {text:""}, "+=0.5")
  .to("h1", 1, {text:"password"}, "+=0.5")
  .to("h1", 1, {text:""}, "+=0.5")
  .to("h1", 1, {text:"pancakes"}, "+=0.5")

 

http://codepen.io/GreenSock/pen/WGBajd?editors=0010

 

 

You will notice though that when the words 'un-type' characters get removed from the beginning.

 

With both solutions the text that you are animating can be off-screen or hidden somewhere and you can use an onUpdate callback to grab those text values and insert them into your input field. This will remove the need to manually overlay elements on top of the input fields.

[Linho]

Thank you, Carl. I didn't know the TextPlugin yet, that works 90% perfect for my intention: If there's was any possibility to untype characters from the end somehow it's 100% perfect... Is there any way? Maybe by some kind of reverting the animation?

 

I don't have a real input field where I need to update the values, it's just an optical illusion so a div styled like an input field is fine for me. But I will remember your onUpdate hint if I ever come in such situation.