marcreichel/alpine-typewriter

Animated cursor possible?

Closed this issue · 5 comments

Loosie94 commented

Hi Marc, really like your project. Clean and simple.
I was only wondering; Is it possible to add an animated cursor: | after the each word?
Thanks!

marcreichel commented

Hey René, thanks for the kind words. Really appreciate it.

Currently there's no option for adding an (animated) cursor though but I'll add it to my todo list. Adding this should be pretty straightforward.
If I find the time I may add it in the next days 👍🏼
I'll leave this issue open as a reminder 👍🏼

  • 👍1
marcreichel commented

@Loosie94 I've added the animated cursor 👍🏼 It's available in version 1.1.0 which I've just tagged. The README is updated on how to add the cursor as well.

Let me know if this is what you need and/or if you need something else 🙂

  • 🎉1
Loosie94 commented

Hi @marcreichel

Thanks for the quick response!
Somehow I do not yet see the animated cursor.
I'm using the CDN version, and my code is this:

<span x-data="{ texts: ['tekst1', 'tekst2', 'tekst3'] }" x-typewriter.cursor.1500ms="texts"></span>

Any idea what is going wrong?

marcreichel commented

@Loosie94 Are you using jsDelivr (as mentioned in the README)?

If so, it seems jsDelivr to not have updated the @latest tag yet.
So to force using version 1.1.0 just replace the @latest with @1.1.0 (or @^1.1.0) and you should be good to go.

-<script src="https://cdn.jsdelivr.net/npm/@marcreichel/alpine-typewriter@latest/dist/alpine-typewriter.min.js" defer></script>
+<script src="https://cdn.jsdelivr.net/npm/@marcreichel/alpine-typewriter@^1.1.0/dist/alpine-typewriter.min.js" defer></script>
Loosie94 commented

@marcreichel That seem to be the issue.

I changed the URL to ^1.1.0, and now it works. Thanks! :)

  • 🎉1