Create an auto-type animation in Webflow!
HTML-код
- Опубликовано: 9 сен 2019
- The script used in this video can be found here:
forum.webflow.com/t/typing-an...
Credit: Noah R, Webflow Community expert
Typed JS: webflow.com/website/Typing-Te...
In this video, I show how to create an auto-type text animation. This can be used to add some visual interest and interactivity to your site.
Subscribe for weekly product design tutorials! 
Кино
I have the solution for the blinking cursor, you just have to add a div block and give it the class typed-cursor and then just edit the style. (Or add the same class directly in the custom code)
You’re the man David! Pinning this so others can see, thanks!
@@JakePomperDesign Great idea. I'm glad I could help!
@David Salcedo and @JP Design Academy, can you please kindly explain this in more detail. I don't seem to understand this.
@@davidsalcedo8979 David, I am still having difficulty with understanding the solution, does this get rid of the cursor or just changes the style of the cursor? I would rather not have the cursor. Is this possible?
@@nurturepilot The easiest fix is to go into custom code, and add this line for the cursor: showCursor: false,
I like this! I'm subscribing, good job man!
Simple tutorial. Found it helpful. Thank you!
Great video, thanks, solved a specific design goal!
If anyone is still having trouble with the blinking "cursor" as mentioned in this video. My workaround was to select the wrapping div block's styles panel and set the type colour to transparent. It seemed to have gone away for me after doing that. good luck!
It took me so long to make the typing work. This video really helped
Glad to hear it helped!
You saved me a lot of time, thanks a ton!
Love this tutorial! Thank you!
You’re welcome!
THANK YOU! I was just trying to find this solution the other day :)
Thanks for watching!
Just what I was looking for, thanks
Glad to hear it!
Hey, I would love to know how to have 2 div blocks with different typed text appearing on them, should I just add a new custom code with a different class name?
Not sure if they changed it, but there is no such a section like Footer Code anymore (to add this custom code you're talking about). You know anything that could help? Thanks.
is there a way to set a time parameter so that the animation time is consistent with different amounts of text.
if you add custom css you can change the paramaters of the cursor with the .typed-cursor class. font-size: whatever you want
Can I set the timing to be fixed? so doesn't matter how many letters are in the sentence it will take the same amount of time to type it. I need to synchronize it with a Webflow interaction, and setting timing based on the number of letters breaks it down :(
I had this kinda effect on my Wordpress site and I've been looking for something like this. But I had one of the words as different color. Could I do that too and what would it require?
does anyone know how to style the blinking cursor at all? I know that adding the line showCursor: false will hide it, but just looking for a war to make it make my text styling
Thank you so much, this works wonders! For some reason the words that are written have a standard black color, which I cannot change. Any idea what may cause this? Thanks a lot :)
Great tutorial thanks! Did you ever figure out how to customize that blinking cursor at the end?
Marcus Moraru thanks! Try giving the typography itself the class of typed-text rather than the entire div block
Hi! I have problem regarding this ayto-typing. I added 8 phrases in the code but after 8th phrases my type stops. Did any of you know about this.
I wonder if there is some way to integrate this in to a collection :)
Thanks a lot! You saved a problem I struggled with for weeks. The written instructions weren't clear enough for me.
happy to help!
@@JakePomperDesign I put the exact same code, but I don't know why mine keeps the cursor in the line below the typed text, so each time the text disappears, the following text jumps up and down. pollination-cloud-001-5337df9783d422608.webflow.io/home/home-6
Thanks You !
thanks ! subscribed
Welcome!
hey, I don't know if it's possible but can we change every word's color? It's very important for me right now...
If you have content underneath how do you get it to stop moving up and down once it loops?
If I am understanding correctly, you are talking about the content below the typing element that is moving up and down as the type is looped? If this is the case, it may be happening because the height of the Div you are using for your typing animation is set to AUTO and is adjusting to 0px on the loop (aka, when it is empty). Try setting a fixed height for this Div (set it to the height used for text [next to font size]).
@@connorbyram5221 oh my dayss I love yall
does anybody know how to style each word differently, like a separate font for each?
Noticed there is a delay in the first word. Any solution for that?
good man
thanks
Mine is starting from the back, any way to fix this?
Increase the line height of the text to get the dash to the baseline
Thank you!
love you
❤️❤️❤️
Hi, amazing video thanks, did everything accordingly and it works but on mobile it moves whole website up and down, do u know how to fix that? thank u and happy new year
Hi, did you find a way to resolve this?
@@isabelvergara4255 I hired a guy and he did it for me.
Hey so I did this, but whenever I view the website, the animation doesn't load at all
Make sure you publish, it won’t be visible in the webflow preview
Thanks for this tutorial. Did every step you did. But it's still not showing the animation. Got a idea?
Hmm tough to answer this without seeing what you did, sorry!!
This forum post may further help you out forum.webflow.com/t/typing-animation-in-webflow/12933/4
Is this actually working right now? It seems that is not. Thanks for the video.
Such a bummer that they made it a paid feature to add code
Yeah:/
How long did it take you to learn webflow from scratch
Sesan Osanyinbi I’d say around a month to get fairly proficient, but I had very little front end experience prior. Building my own portfolio site really helped me get the hang of it
@@JakePomperDesign amazing good one bro...
I take webflow workshops and get people started in 4 hours.
Becoming proficient in the tool is a different story, which takes time :)
@@keshavsharma5419 practice, practice, practice!
@@keshavsharma5419 free workshop?
wait.......... it's cheesy? 😞
It can be! But can also be cool!
Just what I was looking for, thanks
Happy to help!