Linho

Thank you a lot! I don't want to build a flip clock itself, I rather want to build this effect for some kind of a fake countdown timer. I want to have "10 days left", where it browses down really quick from 20 to 10 each page load. My main problem is that it seems impossible to only animate the top part of the number. I'm quite sure I have to double add each number to my DOM?

Hi GSAP Experts! I'm struggling to create a Flip Clock Effect like this in GSAP: Is somehow possible to realize this "flip down" effect in GSAP? I'm looking forward to your ideas! Cheers 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.

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

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