Join the Webstudio community

Updated 3 months ago

How would I create a typewriter effect in WS?

At a glance
https://youtu.be/zF8Rj3bGJdE?si=ZHfjkWn_0hm_zw6B

I tried to follow this as best as I could but it didn’t work. Main problem I ran into was when I tried to create a second text span right next to an existing span it combined the 2 into one span.

Also besides typer.js is there another way to do this through something like GSAP or something else?
c
J
O
20 comments
How would I create a typewriter effect in WS?
In the marketplace > integrations > GSAP
Attachment
CleanShot_2024-11-29_at_09.09.202x.png
"staggered text".
Just tested with Text component, it works. Can you record the demo how you do the spans?
Oh I think you are trrying to create multiple spans in one word and when its one word we automatically make one span
Just tested in webflow, when there is no space between, webflow is doing the exact same thing.
So not even sure what you are seeing as a difference here
I was able to create 2 spans next to eachother in webflow
I see if you separate them by space, create spans, then delete space, they don't merge into one
@TrySound do you think we should treat this as a bug on our side?
I dont know if that tutorial I linked would work anyways. The custom code he inputs through webflow is for before the </body> tag. And custom code in webstudio is added at the end of the <head> tag?
Lmk if thats a dumb assumption or question im not exactly technically versed in coding
Honestly just asked chatgpt if the code would still work with those differences and it said no
you can add that code in html embed after the isntance
chatgpt needs to be asked in those cases things it knows about, framing it on html level of knowledge
working perfectly now thanks! html embed did it 👍
only thing is is the space between the spans which isnt really a problem at this moment
you could probably try using flex on the parent, so space will prob go away, not sure
Fixed! Parent set to flex allows text spans to border each other without merging
Add a reply
Sign up and join the conversation on Discord