Typing animation

Hello Noah-R, this looks sooo good! Thank you!

I’m a total noob, is there any documentation I can read that explain how to set it up?

Hey Noah!

Just the cursor for the text appears on a new line below the strings text and is not effected by the character properties applied to the strings either… do you know why this might be happening?

Here is the site: https://offbrand.webflow.io/

Hi there,

I implemented the typing animation twice on my page. (salesclass.ai)

I noticed that the text for the second instance is hanging at the bottom of my mobile view. What can I do to hide this?

@Noah-R Thanks so much for building this!

-Sean

Hi,
very excited about using this animation, however a complete noob in JS.
How would I go about making the typing speed ever faster for every string in the “strings” list, i.e. make typeSpeed and backDelay dynamic as a function of the length of “strings”?
My hacky solution was to turn them into arrays, but that’s not really a clean solution imo as I manually need to type out the speed params (e.g. [750, 650, 550, 450, 350, 250, 150, 750]).

Hope I’m making sense here.
Thank you,
Fred

I’m actually facing the same issue, any idea on how to resolve it? Thank you

Hello. I copied the exact same code, and it works fine. The only problem is that on my website, the cursor is on the next line, each time a typing text ends, the cursor moves up for a millisecond and all the subsequent content jumps up and down. Would you or anyone else have an insight as to what the problem with my code is? Many thanks in advance.

2 Likes

Hi! I am having the same issue as @Mehrnoush with the cursor appearing on the next line and my content shifting up and down. Any idea on how to resolve it? Thank you in advance!

I was able to fix the shifting up and down by giving the div a specific height. But I’m also having issues with the cursor appearing on the next line.

Update: I have since changed the layout to ‘fix’ the cursor issue when the text before and after was stacked with the typed text.

Read only link.

HI Nneoma,

Like Sherry, we found a workaround by giving the div a fixed height. Finding the right height was just a few trial and error. I am sure there should be a more systematic way to fix it. But, the hack works for now.

This is super awesome, I’ve successfully implemented on my site. I was wondering - is there a way to disable the start delay upon looping? I have this start after some animations upon page load and then want it to keep looping without the startDelay.

Also I learned via trial and error, if you want to add return to the next line use <br>.

https://developer.mozilla.org/en-US/docs/Web/HTML/Element/br

Hey Sherry I am experiencing the same issue with the content below the animation shifting up and down, giving a specific height to the div didn’t work either. Which height did you use? thank you in advance

Michela,

I’m sorry, I don’t remember. I ended up doing the animation in After Effects and embedding a Lottie (.json) file.

1 Like

I’m about 3 years late to this party, but I’m having some issues with this @Noah-R. I embedded this to my site but the first text isn’t animating. I wrapped it in a span. Help!!!

I can’t seem to get it to work on my site. https://frame-of-light-designs.webflow.io/

I was able to fix it by going to the original github and using the “customization” script code instead

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.

http://mattboldt.github.io/typed.js/docs/

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.