
Using some good old obsolete HTML to create JavaScript-free animations - mjtweaver
https://medium.com/@mjtweaver/using-some-good-old-obsolete-html-to-create-a-javascript-free-carousel-animations-7b5f1d6b428
======
pcmaffey
Highly recommend svg for animations too. Totally JS-free, self-contained
files, supported by all browsers but Microsoft (can just show static svg)...
Once you get the hang of the syntax and svg layout, animating is pretty
straightforward.

Here's a fun 404 page I made that shows just how extensive an animation you
can accomplish (let it play for > 1 minute) -
[https://app.astronomer.io/404](https://app.astronomer.io/404)

(You can open the image in a new tab and take a look at the svg code (it's
--pretty printed)

~~~
deergomoo
The problem with SVG animation is it seems to be abnormally resource
intensive. I noticed it on a project I worked on recently -- simply pulsing a
few <circle>s larger and smaller pegged a CPU core at a constant 40% on my
work machine. Indeed, opening your (very cool) 404 page shows a constant 30%
CPU usage.

Fine for a 404 page which people are unlikely to stick around on, not fine for
a screen that someone is going to spend a significant amount of time on.

~~~
pcwalton
I'm working on speeding this up via the Pathfinder project, for Firefox. :)

~~~
tribby
awesome - I enjoyed reading up on your work! stuff like this makes me wonder
if variable fonts will become a popular method for animating certain things on
the web (maybe in the context of UI kits like font awesome, ionicons, etc).

it still kind of blows my mind how quickly we all moved to abandon adobe flash
once HTML became viable. I'm not a fan of the attack surface that flash
presents, but in retrospect, especially thinking about the hardware I was
using 15 years ago, it almost seems like advanced alien technology when
contrasted with the state of vector animation on the web today.

------
progval
The irony is that I needed to allow Javascript from three different domains
(medium.com, embedly.com, codepen.io) to see the demos of these Javascript-
free animations.

------
f-
Yeah - you can actually implement surprisingly complex motion by nesting
<marquee> tags with different directions, speeds, etc.

I posted this long time ago:
[http://lcamtuf.coredump.cx/marquee.html](http://lcamtuf.coredump.cx/marquee.html)

------
bartread
The thing that surprised me most about this is that the marquee element is
still supported: I'd just assumed it had long since gone the way of the blink
tag.

And then this got me wondering whether, if you'd done this back in say the
year 2000, would it have been possible to animate images in this way back
then? I certainly saw plenty of uses of the marquee tag (although my
recollection was it got a fairly comprehensive slagging even in the HTML4 book
I had at the time, published in 1998, so it was already pretty heavily
discouraged) but it was always text, never images. I also don't remember
seeing any sites with nested marquee tags, but I wonder if that would have
worked too?

Interesting piece anyway.

------
vslira
I'd be really interested in seeing examples of the most dynamic websites can
get with HTML only. Penalties for using CSS but that's fine, too. Does anyone
have pointers?

~~~
gkoberger
In theory... not interactive at all. HTML is supposed to be structure only.
There are a few exceptions (blink and marquee tags), so this page pretty much
shows the extent.

(If you allow CSS, you can do pretty much anything JavaScript can do.)

~~~
sureaboutthis
Fun fact: neither the <marquee> element or the <blink> element have ever been
part of any HTML specification.

~~~
detaro
It's in HTML5 (described as obsolete, but defined)

~~~
sureaboutthis
Yes. I was waiting for someone to bring that up. It's there for the sole
purpose of marking it obsolete as a warning so browsers can eventually remove
it. No, you won't find a definition for that element anywhere with WHATWG
though the W3C has one.

~~~
detaro
I was actually surprised how detailed the WHATWG specification is for
something that's been "not recommended" for ages, but I guess they document
everything that's still implemented:
[https://html.spec.whatwg.org/multipage/rendering.html#the-
ma...](https://html.spec.whatwg.org/multipage/rendering.html#the-marquee-
element-2)

(I believe <blink> support has actually been dropped by at least some
browsers)

------
bfred_it
Fun to remember but obviously useless at this point thanks to CSS animations —
which are eased, interactive and more complex than x/y movements.

------
Theodores
Obligatory:

[http://shouldiuseacarousel.com/](http://shouldiuseacarousel.com/)

...but a carousel using the marquee tag?

Definitely. Maybe throw in some inline CSS for good measure, maybe sticking to
web safe colour gifs too.

~~~
petee
I don't know if they did it intentionally, but that was one of the worst
implementations/uses of a carousel i've seen yet -- scrolls every like 2
seconds, so you can't even finish reading a sentence; have to keep hitting
back to try and read each block.

After looking at those "studies", it really seems like nobody is using it
appropriately, not that carousels are actually bad: too fast; not clear its a
carousel; broken implementations; being surprised when people click the first
item, despite that probably being the item they were looking for.

To add, if only 1% are clicking the first item, perhaps reconsider what people
care about and are looking for, because clearly they don't :)

------
alttab
Interesting to say the least!

