So last time, I made a typewriter animation without HTML, CSS, nor Javascript. What happens if instead of using nothing, we allow ourselves to use... everything?
All this is achieved with a fancy new HTML tag, <typewritten-text>
!
This is a <typewritten-text><strong>typewriter effect!</strong></typewritten-text>
Find out how to install and use it here:
Auroratide
/
typewritten-text
The text types itself out!
A New HTML Tag?
The HTML standard allows developers to define custom elements through Web Components. Making a new element just requires a handful of Javascript, from there letting you define as much or as little functionality as needed.
class MyElement extends HTMLElement {
// code for how the element looks and behaves
}
window.customElements.define('my-element', MyElement)
The typewritten-text
element is one such web component, designed to provide a semantic, flexible, and reusable typewriter component!
Since web components are native browser technology, they are meant to work with most of our beloved frameworks out of the box (looking at you, React...). That's one of my favorite things about them!
Granted, the developer experience can be... painful sometimes. This innocent little element turned out to be much much harder than I originally thought in order to achieve all my goals for it.
The typewritten-text
Element
Once Javascript enters the arena, basically anything becomes possible.
- No need for monospace requirements! The inner text can be of any font or size; in fact, it can mix fonts if you want.
- Built-in multiline support, for if you want to type out a longer sentence or two.
- A very simple interface; you can basically use it like any standard HTML tag.
And of course, I put in the effort to make it as accessible as possible.
- It represents its textual content regardless of current typed state, especially useful for those using Assistive Technologies.
- The blinking cursor animation is disabled for people who prefer reduced motion.
- No content-shifting either! The element's size is always the size of its content.
Perhaps the most interesting feature is its events. The element dispatches events when characters are typed or the phrase is finished. By listening to those events, you can use the magic of code to make the typewriter do any custom behaviour that's desired!
For example, starting another typewritten text:
first.addEventListener('typewritten-text:phrasetyped', () => {
second.start()
})
Showcasing
Here's a couple of nifty things you can do with the typewritten-text
component!
Typewriter Cycle
Using events, it's simple to cycle through different texts to type out.
The typewritten-text
element is designed to be very basic so it can be used in as many ways as possible, which is why the cycle effect is not built-in. A different web component could be made to encapsulate the effect, though!
Character Dialog
Characters tend to talk with a typewriter animation also!
Hit Rerun
at the bottom of the frame to see the animation again.
Find out more
All information on how to install and use the typewritten-text
component can be found on github!
Auroratide
/
typewritten-text
The text types itself out!
I may soon write a little more about the process of actually making (and testing) a web component.
Top comments (18)
Well @afif and @alvaromontoro , I finally did a part two which is the polar opposite of part one 😋 This was a lot harder than I expected it to be, so this war has certainly knocked me out cold!
Well done. Not only is your outcome cool, you’ve actually written an article which flows well and isn’t riddled with mistakes and doesn’t just serve as shameless self promotion like some much of the crap on dev.to - kudos
Harsh words right there, but I do agree. It's really nice to see a well-written article on here :D
This motivated me to finally update my own
<type-writer>
to deal with nested HTML elements instead of just text. Here is the result, and here is the code 😁It's currently set up to just type out text in an endless loop, but of course it could easily be modified to wait for manual starting or emit events 🤔
Update: Mine now has a
loop
attribute for automatic looping and a bunch of event event-related stuff to go with it. Here's the code changes :DOooooh! I really like it!
But you used the J-word, @afif will not be happy 😆
But at the end of the day this is what people will be using 😉 .. no one like crazy-sophisticated-CSS-only solutions. People want to download a package, run one instruction and leave JS do all the job behind the scene.
This said, nice job. We end this war with a useful package 👍
PS: better consider the JS tag instead of Codepen for better visibility
The fact I forgot the JS tag existed shows how brain-dead I am right now ^^
What is… the JS tag? 👀
A great demo to show the power of Web Component APIs. Have been willing to see how these components can change the world.
For me it would be even better if you don't need this:
Ah yes I did think about this; normally web components define styles in the shadow dom for encapsulation, but I found I couldn't do that here since the characters live in the light dom.
In theory the
define.js
script could create a style node itself, but in the end I decided to let the developer decide how/when to import the stylesheet, since the preference can differ from app to app.Interesting and useful, thank you!
This is sick. I have plans to introduce a custom element for TypeIt too. This makes me even more excited 🙂
Probably don't make this happen in the future ; )
I was about to panic but realized you forgot the namespace
@auroratide
:Looks great! Any advice on how to use it with Nextjs?
I haven't used Next before, but it should be possible to put the following in Head:
If there's a way to import from node modules in Next, you can do that too; you only have to be careful not to import in a server context, because a server does not know how to define a custom element like a browser does.
Am soo confused... ah fuck i am..