6 ms·

Show HN: Txt.wav – Text Animation Library

98 points by eorge_g 10y ago

eorge_g 10y ago
Thanks for checking out our project! We made this after recreating this functionality a few different times and love giving back to the open source community. Dependency free, super compact animation library. Enjoy!
koytch 10y ago
Select the text to enjoy fully in reverse video.
Deadsunrise 10y ago
Not working on Firefox 48.0.1
- eorge_g 10y ago
  thanks for the report, we'll fix that! thank you for the interest
- awqrre 10y ago
  It works on Firefox 48.0 / Ubuntu (but I had to allow scripts from cdn.rawgit.com in uMatrix)
- anotheryou 10y ago
  working in 50.0a2 / win10
SimeVidas 10y ago
First thought: accessibility issues.
- gok 10y ago
  Yep, this totally kills VoiceOver (haven't tried other screen readers) the way it's implemented. Each letter gets read separately. Check out ARIA.
thekonqueror 10y ago
Nice! My first thought was this is a text-to-speech engine.
horsecaptin 10y ago
Feature request: blinky text.
- theophrastus 10y ago
  I'll regard this 'request' as a bit of wry sarcasm ;) (https://developer.mozilla.org/en-US/docs/Web/HTML/Element/blink https://developer.mozilla.org/en-US/docs/Web/HTML/Element/bl... )
- edejong 10y ago
  First we need the "marquee" tag, if it hasn't been invented yet... Lets see.
deleted 10y ago
[deleted]
j4_james 10y ago
On IE and Edge, every sentence becomes prefixed with the string "null". This appears to be caused by the code that clears the element content with: el.innerHTML = null; Changing that to a blank string fixes the issue for me, i.e. el.innerHTML = "";
- eorge_g 10y ago
  thanks!
  - nthcolumn 10y ago
    'Meh, thanks'. cool stuff btw.
anotheryou 10y ago
what have we done to deserve this?
Asooka 10y ago
You thought it was dead... You thought it would never return... YOU THOUGHT WRONG! Presenting: Spawn of Blink: Jiggly Boogaloo
z3t4 10y ago
I wonder if it's possible to increase readability or fun factor or programming code by adding animations. Like an evaluation to color highlighting. I'm sure you will hate the idea but is there actually any R&D in this area?
- z3t4 10y ago
  brainstorming: Make async calls appear like it's on the way and make hot code restless maybe it will reduce cognitive load and help write better code. A global variable would be like hey look at me
- stingraycharles 10y ago
  This is a great idea. It pretty much adds a new dimension to syntax highlighting, and can be used for many additional semantics. Network communication, dangerous functions / race condition alerts, async behavior, etc etc. I wonder whether there are any Emacs packages for this.
izolate 10y ago
The first 3 seem to be the same effect at different speeds. Quite a limited feature set.
Volt 10y ago
`txt.avi` could be more descriptive.
taivare 10y ago
can you put this on a CDN so I can bring it into Codepen ?
- eorge_g 10y ago
  yes definitely that is on the list for this week as well as making it available as an NPM module. using rawgit.com might be a good workaround until then. thanks for the interest

98 points by eorge_g 10y ago

Thanks for checking out our project! We made this after recreating this functionality a few different times and love giving back to the open source community. Dependency free, super compact animation library. Enjoy!

koytch 10y ago

Select the text to enjoy fully in reverse video.

Deadsunrise 10y ago

Not working on Firefox 48.0.1

eorge_g 10y ago
thanks for the report, we'll fix that! thank you for the interest
awqrre 10y ago
It works on Firefox 48.0 / Ubuntu (but I had to allow scripts from cdn.rawgit.com in uMatrix)
anotheryou 10y ago
working in 50.0a2 / win10

SimeVidas 10y ago

First thought: accessibility issues.

gok 10y ago
Yep, this totally kills VoiceOver (haven't tried other screen readers) the way it's implemented. Each letter gets read separately. Check out ARIA.

thekonqueror 10y ago

Nice! My first thought was this is a text-to-speech engine.

horsecaptin 10y ago

Feature request: blinky text.

theophrastus 10y ago
I'll regard this 'request' as a bit of wry sarcasm ;) (https://developer.mozilla.org/en-US/docs/Web/HTML/Element/blink https://developer.mozilla.org/en-US/docs/Web/HTML/Element/bl... )
edejong 10y ago
First we need the "marquee" tag, if it hasn't been invented yet... Lets see.

deleted 10y ago

[deleted]

j4_james 10y ago

On IE and Edge, every sentence becomes prefixed with the string "null". This appears to be caused by the code that clears the element content with: el.innerHTML = null; Changing that to a blank string fixes the issue for me, i.e. el.innerHTML = "";

eorge_g 10y ago
thanks!
- nthcolumn 10y ago
  'Meh, thanks'. cool stuff btw.

anotheryou 10y ago

what have we done to deserve this?

Asooka 10y ago

You thought it was dead... You thought it would never return... YOU THOUGHT WRONG! Presenting: Spawn of Blink: Jiggly Boogaloo

z3t4 10y ago

I wonder if it's possible to increase readability or fun factor or programming code by adding animations. Like an evaluation to color highlighting. I'm sure you will hate the idea but is there actually any R&D in this area?

z3t4 10y ago
brainstorming: Make async calls appear like it's on the way and make hot code restless maybe it will reduce cognitive load and help write better code. A global variable would be like hey look at me
stingraycharles 10y ago
This is a great idea. It pretty much adds a new dimension to syntax highlighting, and can be used for many additional semantics. Network communication, dangerous functions / race condition alerts, async behavior, etc etc. I wonder whether there are any Emacs packages for this.

izolate 10y ago

The first 3 seem to be the same effect at different speeds. Quite a limited feature set.

Volt 10y ago

`txt.avi` could be more descriptive.

taivare 10y ago

can you put this on a CDN so I can bring it into Codepen ?

eorge_g 10y ago
yes definitely that is on the list for this week as well as making it available as an NPM module. using rawgit.com might be a good workaround until then. thanks for the interest