Create an auto-type animation in Webflow!



The script used in this video can be found here:

Credit: Noah R, Webflow Community expert
Typed JS:

In this video, I show how to create an auto-type text . This can be used to add some visual interest and interactivity to your site.

Subscribe for weekly product design tutorials!

See also  Hướng dẫn chèn chữ vào ảnh bằng ứng dụng Canva

About admin

Check Also

Học tiếng Anh lớp 4 - Unit 1. Nice to see you again - Lesson 1 - THAKI

Học tiếng Anh lớp 4 – Unit 1. Nice to see you again – Lesson 1 – THAKI

Học tiếng Anh lớp 4 – Unit 1. Nice to see you again – Lesson …

25 comments

  1. 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)

  2. 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!

  3. You saved me a lot of time, thanks a ton!

  4. Is this actually working right now? It seems that is not. Thanks for the video.

  5. Such a bummer that they made it a paid feature to add code

  6. Just what I was looking for, thanks

  7. Increase the line height of the text to get the dash to the baseline

  8. 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

  9. wait………. it's cheesy? ?

  10. Thanks a lot! You saved a problem I struggled with for weeks. The written instructions weren't clear enough for me.

  11. 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.

  12. It took me so long to make the typing work. This video really helped

  13. 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?

  14. Just add custom CSS for class "typed-cursor" that's it.

  15. Thanks for this video. Here is the complete repo if anyone needs it: https://github.com/mattboldt/typed.js/ There are a few more options there.

    Also, you can also style the cursor by using this code inside the head and play with the CSS (this code was published by Matt Boldt):

    <style>
    /* add custom cursor */
    .typed-words::after {
    content: "|";
    display: inline;
    animation: blink 1s infinite;
    }

    /* custom cursor animation */
    @keyframes blink {
    0% {
    opacity: 1;
    }
    50% {
    opacity: 0;
    }
    100% {
    opacity: 1;
    }
    }
    </style>

    Good luck!

  16. THANK YOU! I was just trying to find this solution the other day 🙂

  17. Just what I was looking for, thanks

  18. I like this! I'm subscribing, good job man!

  19. I wonder if there is some way to integrate this in to a collection 🙂

  20. 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?

  21. Great tutorial thanks! Did you ever figure out how to customize that blinking cursor at the end?

  22. Thanks for this tutorial. Did every step you did. But it's still not showing the animation. Got a idea?

  23. How long did it take you to learn webflow from scratch