wowperfect

stimming with scissors

meadow (from real life) // mid20s // I'm bnuuy 🐰 and also deer 🦌 and also a few more // wow!~!! //

🩡 @choir
πŸ’œ @queeronfire

this user is a duckstimming with scissors
corruslut respect zone

email
meadow @ wowperfect dot net

DiscoDeerDiary
@DiscoDeerDiary

<div>πŸš‚</div>

πŸš‚

DiscoDeerDiary
@DiscoDeerDiary

<div style="text-align: center">πŸš‚</div>

πŸš‚

DiscoDeerDiary
@DiscoDeerDiary

<div style="text-align: center; animation: 2s linear infinite spin">πŸš‚</div>

πŸš‚

DiscoDeerDiary
@DiscoDeerDiary

<div style="text-align: center; animation: 6s linear infinite spin; transform: translatex(100%)">πŸš‚</div>

πŸš‚

Hmmmmmm that's not quite right, it disappears in the middle! Maybe we should try left-aligning it again.


DiscoDeerDiary
@DiscoDeerDiary

<div style="animation: 6s linear infinite spin; transform: translatex(100%)">πŸš‚</div>

πŸš‚

That's better but it still kind of disappears jarringly at the left margin. How can we fix that? Normally we'd use translatex, but we're already using that to turn the spin animation into a horizontal movement. But maybe if we . . .


DiscoDeerDiary
@DiscoDeerDiary

<div style="transform: translatex(-10%)">
<div style="animation: 6s linear infinite spin; transform: translatex(120%)">πŸš‚</div>
</div>

πŸš‚

Look at that! We used a second, outer <div> to shift everything to the left! Also changed the 100% to 120% to make the distance a little bit wider than the window. Looking pretty smooth!


DiscoDeerDiary
@DiscoDeerDiary

<div style="transform: translatex(-10%)">
<div style="animation: 6s linear infinite spin; transform: translatex(120%)">πŸš‚</div>
</div>
<div style="text-align: center">πŸͺœ</div>

πŸš‚
πŸͺœ

DiscoDeerDiary
@DiscoDeerDiary

<div style="transform: translatex(-10%)">
<div style="animation: 6s linear infinite spin; transform: translatex(120%)">πŸš‚</div>
</div>
<div style="text-align: center; transform: rotate(-90deg)">πŸͺœ</div>

πŸš‚
πŸͺœ

DiscoDeerDiary
@DiscoDeerDiary

<div style="transform: translatex(-10%)">
<div style="animation: 6s linear infinite spin; transform: translatex(120%)">πŸš‚</div>
</div>
<div style="text-align: center">
<span style="display: inline-block; transform: rotate(-90deg)">πŸͺœ</span><span style="display: inline-block; transform: rotate(-90deg)">πŸͺœ</span><span style="display: inline-block; transform: rotate(-90deg)">πŸͺœ</span>
</div>

πŸš‚
πŸͺœπŸͺœπŸͺœ

Wondering what's going on with <div> and <span> and inline-block? @lexyeevee explains it all in this tutorial


DiscoDeerDiary
@DiscoDeerDiary
<div style="transform: translatex(-10%)">
<div style="animation: 6s linear infinite spin; transform: translatex(120%)">πŸš‚</div>
</div>
<div style="text-align: center">
<span style="display: inline-block; transform: rotate(-90deg)">πŸͺœ</span><span style="display: inline-block; transform: rotate(-90deg)">πŸͺœ</span><span style="display: inline-block; transform: rotate(-90deg)">πŸͺœ</span><span style="display: inline-block; transform: rotate(-90deg)">πŸͺœ</span><span style="display: inline-block; transform: rotate(-90deg)">πŸͺœ</span><span style="display: inline-block; transform: rotate(-90deg)">πŸͺœ</span><span style="display: inline-block; transform: rotate(-90deg)">πŸͺœ</span><span style="display: inline-block; transform: rotate(-90deg)">πŸͺœ</span><span style="display: inline-block; transform: rotate(-90deg)">πŸͺœ</span><span style="display: inline-block; transform: rotate(-90deg)">πŸͺœ</span><span style="display: inline-block; transform: rotate(-90deg)">πŸͺœ</span><span style="display: inline-block; transform: rotate(-90deg)">πŸͺœ</span><span style="display: inline-block; transform: rotate(-90deg)">πŸͺœ</span><span style="display: inline-block; transform: rotate(-90deg)">πŸͺœ</span><span style="display: inline-block; transform: rotate(-90deg)">πŸͺœ</span><span style="display: inline-block; transform: rotate(-90deg)">πŸͺœ</span><span style="display: inline-block; transform: rotate(-90deg)">πŸͺœ</span><span style="display: inline-block; transform: rotate(-90deg)">πŸͺœ</span><span style="display: inline-block; transform: rotate(-90deg)">πŸͺœ</span><span style="display: inline-block; transform: rotate(-90deg)">πŸͺœ</span><span style="display: inline-block; transform: rotate(-90deg)">πŸͺœ</span><span style="display: inline-block; transform: rotate(-90deg)">πŸͺœ</span><span style="display: inline-block; transform: rotate(-90deg)">πŸͺœ</span><span style="display: inline-block; transform: rotate(-90deg)">πŸͺœ</span><span style="display: inline-block; transform: rotate(-90deg)">πŸͺœ</span><span style="display: inline-block; transform: rotate(-90deg)">πŸͺœ</span><span style="display: inline-block; transform: rotate(-90deg)">πŸͺœ</span><span style="display: inline-block; transform: rotate(-90deg)">πŸͺœ</span><span style="display: inline-block; transform: rotate(-90deg)">πŸͺœ</span><span style="display: inline-block; transform: rotate(-90deg)">πŸͺœ</span><span style="display: inline-block; transform: rotate(-90deg)">πŸͺœ</span><span style="display: inline-block; transform: rotate(-90deg)">πŸͺœ</span><span style="display: inline-block; transform: rotate(-90deg)">πŸͺœ</span><span style="display: inline-block; transform: rotate(-90deg)">πŸͺœ</span><span style="display: inline-block; transform: rotate(-90deg)">πŸͺœ</span><span style="display: inline-block; transform: rotate(-90deg)">πŸͺœ</span><span style="display: inline-block; transform: rotate(-90deg)">πŸͺœ</span><span style="display: inline-block; transform: rotate(-90deg)">πŸͺœ</span>
</div>
πŸš‚
πŸͺœπŸͺœπŸͺœπŸͺœπŸͺœπŸͺœπŸͺœπŸͺœπŸͺœπŸͺœπŸͺœπŸͺœπŸͺœπŸͺœπŸͺœπŸͺœπŸͺœπŸͺœπŸͺœπŸͺœπŸͺœπŸͺœπŸͺœπŸͺœπŸͺœπŸͺœπŸͺœπŸͺœπŸͺœπŸͺœπŸͺœπŸͺœπŸͺœπŸͺœπŸͺœπŸͺœπŸͺœπŸͺœ

WELP we added too many units of train track and it hit the margin and started wrapping around. But I bet there's a way we can fix this . . . .


DiscoDeerDiary
@DiscoDeerDiary
<div style="transform: translatex(-10%)">
<div style="animation: 6s linear infinite spin; transform: translatex(120%)">πŸš‚</div>
</div>
<div style="text-align: center; height: 1.5rem; overflow: hidden">
<span style="display: inline-block; transform: rotate(-90deg)">πŸͺœ</span><span style="display: inline-block; transform: rotate(-90deg)">πŸͺœ</span><span style="display: inline-block; transform: rotate(-90deg)">πŸͺœ</span><span style="display: inline-block; transform: rotate(-90deg)">πŸͺœ</span><span style="display: inline-block; transform: rotate(-90deg)">πŸͺœ</span><span style="display: inline-block; transform: rotate(-90deg)">πŸͺœ</span><span style="display: inline-block; transform: rotate(-90deg)">πŸͺœ</span><span style="display: inline-block; transform: rotate(-90deg)">πŸͺœ</span><span style="display: inline-block; transform: rotate(-90deg)">πŸͺœ</span><span style="display: inline-block; transform: rotate(-90deg)">πŸͺœ</span><span style="display: inline-block; transform: rotate(-90deg)">πŸͺœ</span><span style="display: inline-block; transform: rotate(-90deg)">πŸͺœ</span><span style="display: inline-block; transform: rotate(-90deg)">πŸͺœ</span><span style="display: inline-block; transform: rotate(-90deg)">πŸͺœ</span><span style="display: inline-block; transform: rotate(-90deg)">πŸͺœ</span><span style="display: inline-block; transform: rotate(-90deg)">πŸͺœ</span><span style="display: inline-block; transform: rotate(-90deg)">πŸͺœ</span><span style="display: inline-block; transform: rotate(-90deg)">πŸͺœ</span><span style="display: inline-block; transform: rotate(-90deg)">πŸͺœ</span><span style="display: inline-block; transform: rotate(-90deg)">πŸͺœ</span><span style="display: inline-block; transform: rotate(-90deg)">πŸͺœ</span><span style="display: inline-block; transform: rotate(-90deg)">πŸͺœ</span><span style="display: inline-block; transform: rotate(-90deg)">πŸͺœ</span><span style="display: inline-block; transform: rotate(-90deg)">πŸͺœ</span><span style="display: inline-block; transform: rotate(-90deg)">πŸͺœ</span><span style="display: inline-block; transform: rotate(-90deg)">πŸͺœ</span><span style="display: inline-block; transform: rotate(-90deg)">πŸͺœ</span><span style="display: inline-block; transform: rotate(-90deg)">πŸͺœ</span><span style="display: inline-block; transform: rotate(-90deg)">πŸͺœ</span><span style="display: inline-block; transform: rotate(-90deg)">πŸͺœ</span><span style="display: inline-block; transform: rotate(-90deg)">πŸͺœ</span><span style="display: inline-block; transform: rotate(-90deg)">πŸͺœ</span><span style="display: inline-block; transform: rotate(-90deg)">πŸͺœ</span><span style="display: inline-block; transform: rotate(-90deg)">πŸͺœ</span><span style="display: inline-block; transform: rotate(-90deg)">πŸͺœ</span><span style="display: inline-block; transform: rotate(-90deg)">πŸͺœ</span><span style="display: inline-block; transform: rotate(-90deg)">πŸͺœ</span><span style="display: inline-block; transform: rotate(-90deg)">πŸͺœ</span>
</div>
πŸš‚
πŸͺœπŸͺœπŸͺœπŸͺœπŸͺœπŸͺœπŸͺœπŸͺœπŸͺœπŸͺœπŸͺœπŸͺœπŸͺœπŸͺœπŸͺœπŸͺœπŸͺœπŸͺœπŸͺœπŸͺœπŸͺœπŸͺœπŸͺœπŸͺœπŸͺœπŸͺœπŸͺœπŸͺœπŸͺœπŸͺœπŸͺœπŸͺœπŸͺœπŸͺœπŸͺœπŸͺœπŸͺœπŸͺœ

We can hide the extra train tracks by setting the height of their <div> to 1.5rem, and setting the overflow property to "hidden". That's a bit better!


DiscoDeerDiary
@DiscoDeerDiary
<div style="transform: translatex(-10%)">
<div style="animation: 6s linear infinite spin; transform: translatex(120%)">πŸš‚</div>
</div>
<div style="text-align: center; width: 120%; height: 1.5rem; overflow: hidden">
<span style="display: inline-block; transform: rotate(-90deg)">πŸͺœ</span><span style="display: inline-block; transform: rotate(-90deg)">πŸͺœ</span><span style="display: inline-block; transform: rotate(-90deg)">πŸͺœ</span><span style="display: inline-block; transform: rotate(-90deg)">πŸͺœ</span><span style="display: inline-block; transform: rotate(-90deg)">πŸͺœ</span><span style="display: inline-block; transform: rotate(-90deg)">πŸͺœ</span><span style="display: inline-block; transform: rotate(-90deg)">πŸͺœ</span><span style="display: inline-block; transform: rotate(-90deg)">πŸͺœ</span><span style="display: inline-block; transform: rotate(-90deg)">πŸͺœ</span><span style="display: inline-block; transform: rotate(-90deg)">πŸͺœ</span><span style="display: inline-block; transform: rotate(-90deg)">πŸͺœ</span><span style="display: inline-block; transform: rotate(-90deg)">πŸͺœ</span><span style="display: inline-block; transform: rotate(-90deg)">πŸͺœ</span><span style="display: inline-block; transform: rotate(-90deg)">πŸͺœ</span><span style="display: inline-block; transform: rotate(-90deg)">πŸͺœ</span><span style="display: inline-block; transform: rotate(-90deg)">πŸͺœ</span><span style="display: inline-block; transform: rotate(-90deg)">πŸͺœ</span><span style="display: inline-block; transform: rotate(-90deg)">πŸͺœ</span><span style="display: inline-block; transform: rotate(-90deg)">πŸͺœ</span><span style="display: inline-block; transform: rotate(-90deg)">πŸͺœ</span><span style="display: inline-block; transform: rotate(-90deg)">πŸͺœ</span><span style="display: inline-block; transform: rotate(-90deg)">πŸͺœ</span><span style="display: inline-block; transform: rotate(-90deg)">πŸͺœ</span><span style="display: inline-block; transform: rotate(-90deg)">πŸͺœ</span><span style="display: inline-block; transform: rotate(-90deg)">πŸͺœ</span><span style="display: inline-block; transform: rotate(-90deg)">πŸͺœ</span><span style="display: inline-block; transform: rotate(-90deg)">πŸͺœ</span><span style="display: inline-block; transform: rotate(-90deg)">πŸͺœ</span><span style="display: inline-block; transform: rotate(-90deg)">πŸͺœ</span><span style="display: inline-block; transform: rotate(-90deg)">πŸͺœ</span><span style="display: inline-block; transform: rotate(-90deg)">πŸͺœ</span><span style="display: inline-block; transform: rotate(-90deg)">πŸͺœ</span><span style="display: inline-block; transform: rotate(-90deg)">πŸͺœ</span><span style="display: inline-block; transform: rotate(-90deg)">πŸͺœ</span><span style="display: inline-block; transform: rotate(-90deg)">πŸͺœ</span><span style="display: inline-block; transform: rotate(-90deg)">πŸͺœ</span><span style="display: inline-block; transform: rotate(-90deg)">πŸͺœ</span><span style="display: inline-block; transform: rotate(-90deg)">πŸͺœ</span>
</div>
πŸš‚
πŸͺœπŸͺœπŸͺœπŸͺœπŸͺœπŸͺœπŸͺœπŸͺœπŸͺœπŸͺœπŸͺœπŸͺœπŸͺœπŸͺœπŸͺœπŸͺœπŸͺœπŸͺœπŸͺœπŸͺœπŸͺœπŸͺœπŸͺœπŸͺœπŸͺœπŸͺœπŸͺœπŸͺœπŸͺœπŸͺœπŸͺœπŸͺœπŸͺœπŸͺœπŸͺœπŸͺœπŸͺœπŸͺœ

I tried to make the tracks extend off the sides of the viewing window by setting the width of their <div> to 120%. Curiously, this seems to only make them extend off the right side, even though the <div> is centered!


DiscoDeerDiary
@DiscoDeerDiary
<div style="transform: translatex(-10%)">
<div style="animation: 6s linear infinite spin; transform: translatex(120%)">πŸš‚</div>
</div>
<div style="text-align: center; transform: translate(-10%, -1.3rem); width: 120%; height: 1.5rem; overflow: hidden">
<span style="display: inline-block; transform: rotate(-90deg)">πŸͺœ</span><span style="display: inline-block; transform: rotate(-90deg)">πŸͺœ</span><span style="display: inline-block; transform: rotate(-90deg)">πŸͺœ</span><span style="display: inline-block; transform: rotate(-90deg)">πŸͺœ</span><span style="display: inline-block; transform: rotate(-90deg)">πŸͺœ</span><span style="display: inline-block; transform: rotate(-90deg)">πŸͺœ</span><span style="display: inline-block; transform: rotate(-90deg)">πŸͺœ</span><span style="display: inline-block; transform: rotate(-90deg)">πŸͺœ</span><span style="display: inline-block; transform: rotate(-90deg)">πŸͺœ</span><span style="display: inline-block; transform: rotate(-90deg)">πŸͺœ</span><span style="display: inline-block; transform: rotate(-90deg)">πŸͺœ</span><span style="display: inline-block; transform: rotate(-90deg)">πŸͺœ</span><span style="display: inline-block; transform: rotate(-90deg)">πŸͺœ</span><span style="display: inline-block; transform: rotate(-90deg)">πŸͺœ</span><span style="display: inline-block; transform: rotate(-90deg)">πŸͺœ</span><span style="display: inline-block; transform: rotate(-90deg)">πŸͺœ</span><span style="display: inline-block; transform: rotate(-90deg)">πŸͺœ</span><span style="display: inline-block; transform: rotate(-90deg)">πŸͺœ</span><span style="display: inline-block; transform: rotate(-90deg)">πŸͺœ</span><span style="display: inline-block; transform: rotate(-90deg)">πŸͺœ</span><span style="display: inline-block; transform: rotate(-90deg)">πŸͺœ</span><span style="display: inline-block; transform: rotate(-90deg)">πŸͺœ</span><span style="display: inline-block; transform: rotate(-90deg)">πŸͺœ</span><span style="display: inline-block; transform: rotate(-90deg)">πŸͺœ</span><span style="display: inline-block; transform: rotate(-90deg)">πŸͺœ</span><span style="display: inline-block; transform: rotate(-90deg)">πŸͺœ</span><span style="display: inline-block; transform: rotate(-90deg)">πŸͺœ</span><span style="display: inline-block; transform: rotate(-90deg)">πŸͺœ</span><span style="display: inline-block; transform: rotate(-90deg)">πŸͺœ</span><span style="display: inline-block; transform: rotate(-90deg)">πŸͺœ</span><span style="display: inline-block; transform: rotate(-90deg)">πŸͺœ</span><span style="display: inline-block; transform: rotate(-90deg)">πŸͺœ</span><span style="display: inline-block; transform: rotate(-90deg)">πŸͺœ</span><span style="display: inline-block; transform: rotate(-90deg)">πŸͺœ</span><span style="display: inline-block; transform: rotate(-90deg)">πŸͺœ</span><span style="display: inline-block; transform: rotate(-90deg)">πŸͺœ</span><span style="display: inline-block; transform: rotate(-90deg)">πŸͺœ</span><span style="display: inline-block; transform: rotate(-90deg)">πŸͺœ</span>
</div>
πŸš‚
πŸͺœπŸͺœπŸͺœπŸͺœπŸͺœπŸͺœπŸͺœπŸͺœπŸͺœπŸͺœπŸͺœπŸͺœπŸͺœπŸͺœπŸͺœπŸͺœπŸͺœπŸͺœπŸͺœπŸͺœπŸͺœπŸͺœπŸͺœπŸͺœπŸͺœπŸͺœπŸͺœπŸͺœπŸͺœπŸͺœπŸͺœπŸͺœπŸͺœπŸͺœπŸͺœπŸͺœπŸͺœπŸͺœ

We'll just use our old friend the translate command to push it 10% to the left, and while we're at it we'll nudge it up 1.3rem so the train is no longer hovering in the air. But now we've got another problem . . . .


DiscoDeerDiary
@DiscoDeerDiary
<div style="position: relative; z-index: 1; transform: translatex(-10%)">
<div style="animation: 6s linear infinite spin; transform: translatex(120%)">πŸš‚πŸšƒπŸšƒπŸšƒπŸšƒπŸšƒπŸšƒπŸšƒπŸšƒ</div>
</div>
<div style="transform: translate(-10%, -1.3rem); width: 120%; height: 1.5rem; overflow: hidden">
<span style="display: inline-block; transform: rotate(-90deg)">πŸͺœ</span><span style="display: inline-block; transform: rotate(-90deg)">πŸͺœ</span><span style="display: inline-block; transform: rotate(-90deg)">πŸͺœ</span><span style="display: inline-block; transform: rotate(-90deg)">πŸͺœ</span><span style="display: inline-block; transform: rotate(-90deg)">πŸͺœ</span><span style="display: inline-block; transform: rotate(-90deg)">πŸͺœ</span><span style="display: inline-block; transform: rotate(-90deg)">πŸͺœ</span><span style="display: inline-block; transform: rotate(-90deg)">πŸͺœ</span><span style="display: inline-block; transform: rotate(-90deg)">πŸͺœ</span><span style="display: inline-block; transform: rotate(-90deg)">πŸͺœ</span><span style="display: inline-block; transform: rotate(-90deg)">πŸͺœ</span><span style="display: inline-block; transform: rotate(-90deg)">πŸͺœ</span><span style="display: inline-block; transform: rotate(-90deg)">πŸͺœ</span><span style="display: inline-block; transform: rotate(-90deg)">πŸͺœ</span><span style="display: inline-block; transform: rotate(-90deg)">πŸͺœ</span><span style="display: inline-block; transform: rotate(-90deg)">πŸͺœ</span><span style="display: inline-block; transform: rotate(-90deg)">πŸͺœ</span><span style="display: inline-block; transform: rotate(-90deg)">πŸͺœ</span><span style="display: inline-block; transform: rotate(-90deg)">πŸͺœ</span><span style="display: inline-block; transform: rotate(-90deg)">πŸͺœ</span><span style="display: inline-block; transform: rotate(-90deg)">πŸͺœ</span><span style="display: inline-block; transform: rotate(-90deg)">πŸͺœ</span><span style="display: inline-block; transform: rotate(-90deg)">πŸͺœ</span><span style="display: inline-block; transform: rotate(-90deg)">πŸͺœ</span><span style="display: inline-block; transform: rotate(-90deg)">πŸͺœ</span><span style="display: inline-block; transform: rotate(-90deg)">πŸͺœ</span><span style="display: inline-block; transform: rotate(-90deg)">πŸͺœ</span><span style="display: inline-block; transform: rotate(-90deg)">πŸͺœ</span><span style="display: inline-block; transform: rotate(-90deg)">πŸͺœ</span><span style="display: inline-block; transform: rotate(-90deg)">πŸͺœ</span><span style="display: inline-block; transform: rotate(-90deg)">πŸͺœ</span><span style="display: inline-block; transform: rotate(-90deg)">πŸͺœ</span><span style="display: inline-block; transform: rotate(-90deg)">πŸͺœ</span><span style="display: inline-block; transform: rotate(-90deg)">πŸͺœ</span><span style="display: inline-block; transform: rotate(-90deg)">πŸͺœ</span><span style="display: inline-block; transform: rotate(-90deg)">πŸͺœ</span><span style="display: inline-block; transform: rotate(-90deg)">πŸͺœ</span><span style="display: inline-block; transform: rotate(-90deg)">πŸͺœ</span>
</div>
πŸš‚πŸšƒπŸšƒπŸšƒπŸšƒπŸšƒπŸšƒπŸšƒπŸšƒ
πŸͺœπŸͺœπŸͺœπŸͺœπŸͺœπŸͺœπŸͺœπŸͺœπŸͺœπŸͺœπŸͺœπŸͺœπŸͺœπŸͺœπŸͺœπŸͺœπŸͺœπŸͺœπŸͺœπŸͺœπŸͺœπŸͺœπŸͺœπŸͺœπŸͺœπŸͺœπŸͺœπŸͺœπŸͺœπŸͺœπŸͺœπŸͺœπŸͺœπŸͺœπŸͺœπŸͺœπŸͺœπŸͺœ

We can put the train on top of the tracks by setting its position to "relative" and its z-index to 1. @lexyeevee explains it all in this tutorial. To make it extra obvious that the train is on top of the tracks instead of underneath them, I added some carriages. I also got rid of the text-align: center on the railroad tracks because we don't actually need it.

There's one new problem: the carriages abruptly vanish when the train hits the left margin. But we know how to solve this!


DiscoDeerDiary
@DiscoDeerDiary
<div style="position: relative; z-index: 1; transform: translatex(-50%)">
<div style="animation: 6s linear infinite spin; transform: translatex(200%)">πŸš‚πŸšƒπŸšƒπŸšƒπŸšƒπŸšƒπŸšƒπŸšƒπŸšƒ</div>
</div>
<div style="transform: translate(-10%, -1.3rem); width: 120%; height: 1.5rem; overflow: hidden">
<span style="display: inline-block; transform: rotate(-90deg)">πŸͺœ</span><span style="display: inline-block; transform: rotate(-90deg)">πŸͺœ</span><span style="display: inline-block; transform: rotate(-90deg)">πŸͺœ</span><span style="display: inline-block; transform: rotate(-90deg)">πŸͺœ</span><span style="display: inline-block; transform: rotate(-90deg)">πŸͺœ</span><span style="display: inline-block; transform: rotate(-90deg)">πŸͺœ</span><span style="display: inline-block; transform: rotate(-90deg)">πŸͺœ</span><span style="display: inline-block; transform: rotate(-90deg)">πŸͺœ</span><span style="display: inline-block; transform: rotate(-90deg)">πŸͺœ</span><span style="display: inline-block; transform: rotate(-90deg)">πŸͺœ</span><span style="display: inline-block; transform: rotate(-90deg)">πŸͺœ</span><span style="display: inline-block; transform: rotate(-90deg)">πŸͺœ</span><span style="display: inline-block; transform: rotate(-90deg)">πŸͺœ</span><span style="display: inline-block; transform: rotate(-90deg)">πŸͺœ</span><span style="display: inline-block; transform: rotate(-90deg)">πŸͺœ</span><span style="display: inline-block; transform: rotate(-90deg)">πŸͺœ</span><span style="display: inline-block; transform: rotate(-90deg)">πŸͺœ</span><span style="display: inline-block; transform: rotate(-90deg)">πŸͺœ</span><span style="display: inline-block; transform: rotate(-90deg)">πŸͺœ</span><span style="display: inline-block; transform: rotate(-90deg)">πŸͺœ</span><span style="display: inline-block; transform: rotate(-90deg)">πŸͺœ</span><span style="display: inline-block; transform: rotate(-90deg)">πŸͺœ</span><span style="display: inline-block; transform: rotate(-90deg)">πŸͺœ</span><span style="display: inline-block; transform: rotate(-90deg)">πŸͺœ</span><span style="display: inline-block; transform: rotate(-90deg)">πŸͺœ</span><span style="display: inline-block; transform: rotate(-90deg)">πŸͺœ</span><span style="display: inline-block; transform: rotate(-90deg)">πŸͺœ</span><span style="display: inline-block; transform: rotate(-90deg)">πŸͺœ</span><span style="display: inline-block; transform: rotate(-90deg)">πŸͺœ</span><span style="display: inline-block; transform: rotate(-90deg)">πŸͺœ</span><span style="display: inline-block; transform: rotate(-90deg)">πŸͺœ</span><span style="display: inline-block; transform: rotate(-90deg)">πŸͺœ</span><span style="display: inline-block; transform: rotate(-90deg)">πŸͺœ</span><span style="display: inline-block; transform: rotate(-90deg)">πŸͺœ</span><span style="display: inline-block; transform: rotate(-90deg)">πŸͺœ</span><span style="display: inline-block; transform: rotate(-90deg)">πŸͺœ</span><span style="display: inline-block; transform: rotate(-90deg)">πŸͺœ</span><span style="display: inline-block; transform: rotate(-90deg)">πŸͺœ</span>
</div>
πŸš‚πŸšƒπŸšƒπŸšƒπŸšƒπŸšƒπŸšƒπŸšƒπŸšƒ
πŸͺœπŸͺœπŸͺœπŸͺœπŸͺœπŸͺœπŸͺœπŸͺœπŸͺœπŸͺœπŸͺœπŸͺœπŸͺœπŸͺœπŸͺœπŸͺœπŸͺœπŸͺœπŸͺœπŸͺœπŸͺœπŸͺœπŸͺœπŸͺœπŸͺœπŸͺœπŸͺœπŸͺœπŸͺœπŸͺœπŸͺœπŸͺœπŸͺœπŸͺœπŸͺœπŸͺœπŸͺœπŸͺœ

We can widen the animation to 200% and then shove it 50% to the left. Looking spiffy!


You must log in to comment.

in reply to @DiscoDeerDiary's post:

in reply to @DiscoDeerDiary's post:

in reply to @DiscoDeerDiary's post:

Unironically more technical documentation should be done in this style. Looking at a finished product is one thing, but the process of trying shit and fiddling with it is so critically important.

choo choo