Typing animation

Hi @Noah-R
I have used this typed animation in the placeholder of my search field. But the animation continues even if I start to write and get backspaces then a new line starts.

How can I pause this animation on focus/click and write my own words in that search field stopping the animation? and If I focus outside the search input, I want the animation to be resumed. Is it even possible?

Thanks for your help in advance.

Only by custom code. Use Type.js - stop / start methods. Run stop if the form field s focus.


Use focus events (custom code before body):

Example of using start/stop methods (play type.js when scroll in to view):

Thanks a lot, man. But can you show me a demo?

No. Sorry - its sound more like a freelancer task (Very specific idea - I also need time to solve this).
Write me in private maybe.

I just wondering if you can help me to do this typing animation while scrolling to a specific target or scrolling to a specific element

In case it helps others, I was able to do this without the jumping issue using following this:
Code: Typer.js
Video tutorial: Simple Typewriter Effect in Webflow using Typer.js - YouTube

Hey thank you so much! Is it possible to change the colour of the text everytime a new word shows up?