JaneOri

The hack does 3 things:

1) make an api request from CSS that responds with data encoded into height and width

2) use container queries and tan(atan2()) in CSS to read the dimensions of the response into 16 bit integers

3) a CSS hack that allows the document :root to capture and hold --var-data computed from several layers of nested DOM, hoisting it back up and holding it in a paused animation

Chrome desktop only for now

I've been inventing CSS tricks for a while. Like my Space Toggle, the latest one blows the lid off of what's possible in 100% CSS.

It's cyclic --var computation. Under normal circumstances any cyclic var would be forced into its initial state. I figured out a way around it with two animations that, one, capture output then, two, hoist it back up as input.

Part of the trick is to sequence the playing state of capture and hoist animations:

  running paused
  paused paused
  paused running
  paused paused

There's a number of ways to ensure this play state sequence but, notably, animations aren't supposed to be able to directly control the state of other animations, so we have to rely on tricks there too.

The other clue in the trick is that a paused animation's value won't change if input changes because animation state overrides static state even when paused.

  Static:
  --in: 1;
  --out: calc(var(--in) + 1);

  capture:
  --held: var(--out);

  hoist:
  --in: var(--held);

That's the basics!

// Jane Ori

Wow, crazy timing! You'll love what I just posted haha

I really like the sounds too - are they original and/or free to use?

wow, that's super clever. I was sitting here reading the code and didn't find a negative margin or positional property anywhere, and further, no switches to hold the state. Couldn't for the life of me figure out what you were doing hahaha I love it

Thank you!

OHHH I wish the others would have been more specific other than "it doesn't work". Thank you!

The way that random thing works is:

1) #randommenu:target shows the overlay (based on hash in the url)

2) the overlay has a link to "#" (fullscreen) that says "click-click"

3) Then rendered ontop of the link, all 16 level labels are full screen & transparent

4) Animations loop through them (hard-coded random scramble) to change their z-index to be on top, one at a time, for about 0.25s each

5) Clicking on any of the labels causes that layer to disappear, exposing the "#" link

6) Clicking again changes the url to "#" so #randommenu is no longer :target, thus closing the overlay

My guess is it's probably flashing too fast for iOS/Safari to register a full click.. I could probably fix it by making the random sequence take longer.

Can you confirm the URL never changes to "#" and stays stuck on "#randommenu"?

This is awesome - Could you please explain how you're holding state of each box individually without checkbox:checked? It's not immediately obvious to me how that's possible or where it's happening in your code!

You can't (afaik) tell if it's a right-click vs left-click in HTML+CSS alone that causes the el state to change - that info is part of the JS event :)

edit: ^ previously said "with css variables to hold state" or something similar (or my wires got crossed and I saw that somewhere else)

CSS variables can't be set by animations yet without JS's CSS Houdini giving them a type - a CSS @ property is in the works to do it without JS though!

lmao, I've come full circle. Excellent callout. hahaha