[space-style] Animation of Lua Block widgets incl. tables

Tricks & Techniques
1

Today I learned a neat little CSS trick from youtube to animate things while scrolling the page, and I said, let’s try it on silverbullet tables and other lua block elements here is the result:

VideoToGif_GIF

(it animates much smoother than it appears in the gif)

Here is the code snippet for you to try it out.

Put this in a space-style codeblock and you’re done :slight_smile: :

@keyframes appear {
  0% {
    opacity: 0;
    scale: 0.4;  /* starting point */
  }
  80% {
    opacity: 1;
    scale: 1.05; /* briefly overshoots */
  }
  100% {
    opacity: 1;
    scale: 1; /* settles back */
  }
}
.sb-table-widget, 
.sb-lua-directive-block {
  animation: appear linear;
  animation-timeline: view();
  animation-range: entry 0% cover 40%;
  
}

And here is the video I learned it from:

[EDIT] it seems I can’t upload GIF from my computer for some reasons … I try it from my phone🤷‍♂️

4 Likes
2

That’s indeed awesome, @Mr.Red!

3

Because how Silverbullet and the CodeMirror editor is built, you can even animate each line in the editor, giving your editor this nice :wink: but unpractical animation :face_with_tongue: , also added a little blur to the edges to make the appearance and disappearance more dramatic:

here is the space-style for this one:

.cm-line,
.sb-table-widget, 
.sb-lua-directive-inline,
.sb-lua-directive-block {
  animation: appear linear both;
  animation-timeline: view();
  animation-range: entry 0% cover 100%;
  
}

@keyframes appear {
  0% {    /* BOTTOM OF THE PAGE*/
    opacity: 0;
    scale: 0.7; 
    filter: blur(10px);
  }
  15% {    /* LINE FULLY RENDERED*/
    opacity: 1;
    scale: 1.0;
     filter: blur(0px);
  }
  80% {  /* LINE FULLY RENDERED*/
    opacity: 1;
    scale: 1;
     filter: blur(0px);
  }
  100% {  /* TOP OF THE PAGE*/
    opacity: 0;
    scale: 0.7;
     filter: blur(10px);
  }
}

PS: Just because we can do it, it doesn’t mean we should! :squinting_face_with_tongue:

1 Like
4

damn too interesting -_+!

It’s just that my top widget is sucked away too easily,

90% {  /* LINE FULLY RENDERED*/
...

and filter: blur(0px) are just right for me :slight_smile:

5

managed to decouple texts:

.cm-line {
  animation: appearText linear both;
  animation-timeline: view();
  animation-range: entry 0% cover 100%;
  
}

@keyframes appearText {
  0% {    /* BOTTOM OF THE PAGE*/
    opacity: 0;
    scale: 0.7; 
    filter: blur(1px);
  }
  10% {    /* LINE FULLY RENDERED*/
    opacity: 1;
    scale: 1.0;
    filter: blur(0px);
  }
  90% {  /* LINE FULLY RENDERED*/
    opacity: 1;
    scale: 1;
    filter: blur(0px);
  }
  100% {  /* TOP OF THE PAGE*/
    opacity: 0;
    scale: 0.7;
    filter: blur(1px);
  }
}

and widgets:

.sb-table-widget, 
.sb-lua-directive-block {
  animation: appearWidget linear;
  animation-timeline: view();
  animation-range: entry 0% cover 40%;
}

@keyframes appearWidget {
  0% {
    opacity: 0;
    scale: 0.4;  /* starting point */
  }
  80% {
    opacity: 1;
    scale: 1.05; /* briefly overshoots */
  }
  100% {
    opacity: 1;
    scale: 1; /* settles back */
  }
}
1 Like
6

hahahah, glad you like it. you can definitely play around with the values, and chose what works for you, since i have my topbar floating and the text should ease in behind it the 80% works for me. but this depends on your personal settup and also personal preference.

1px blur for me is too subtle…i need more ummmph :stuck_out_tongue:

1 Like
7

@Mr.Red Hm. I’ve just tried it and after reload I can’t see page content (the top bar is visible). If I move carret around I can prove the content is there, but it’s not visible. Ideas?

8

Which one did you tried out? The block/table animation or the one with the .cm-line ? I tried it out copy pasting from here and it works for me. Double check for typos or missing semicolons or brackets usually that can mess with the css and with our brain.
If everything seems fine in the typo front. What browser and what a version are you running? Can you provide a screenshot of what you are seeing vs. not seeing?

9

Both. Firefox 137.0 (64-bit), on Fedora. Well, I will try without my CSS tweaks.

1 Like