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

1 Like

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

Hi Noah - I am a Webflow beginner and trying to build out my design portfolio

I used the code you suggested above and in publish it works however I am not able to add any additional sections, containers, div blocks etc in my body without it going directly next to the typed-text div and it also doesn’t show on published. I want this typewriter text section to be my hero and either add a button to bring users to my projects pages or add my projects below the fold. Any help?

Is there a way of fading out the text once it types?