Hacker News Reader

Comment by dgellow | Hacker News Reader

This animated SVG is dope! Really cute, seems to be done only with SVGs and CSS animations as far as I can tell.

Yup, had to get it out quick so I went simple! Just a single SVG that I shift elements back and forth on, and rotated so it looks like it's floating!

This is honestly really impressive on such a short deadline! Looks really great.

Do you mind estimating exactly how quickly something like that could be produced? Great job!

The whole site took about 4 hours last night, and the SVG animation took about 2.5 of those hours :)

Curious what tool/tools you used for that if any.

I made the SVG in Sketch and then did CSS transforms (by hand).

Normally, however, I'd use GSAP for SVG animations: https://greensock.com/gsap/

That's incredible. Very well done!

by hand? did you use some sort of post processor? because the output css shows some weird repeats:

``` @keyframes sea-Top-Deck-Inside {

  from {transform: translateX(0);}

  from {transform: translateX(0);}

  to {transform: translateX(-3px);}

}

@keyframes sea-Top-Deck-Shadow {

  from {transform: translateX(0);}

  from {transform: translateX(0);}

  to {transform: translateX(-3px);}

} ```

sorry if it seems like im doubting you, i am just really super impressed by this animation and wanted to understand how you put this together!

also: readme is really cool! love your podcast interviews!

Oh hey Shawn!

Yup, I used Stylus mixins for this. I just mean I didn't use something like Framer or an animation library :)

Here's the code (I don't expect it to make any sense to anyone other than me!)

https://pastebin.com/A6zStqmt

(There's a bug in that code causing two `from`s! Seems it's moot since it works, but I fixed it on my end. Here's the updated code: https://pastebin.com/Y6JwkZi4)

See https://news.ycombinator.com/item?id=24135424

So it's not actually 3-D, you shift, scale, and rotate the 2-D elements so it appears 3-D? Or are you rotating it along Z in some way. It's a really good effect. That's some skill!

>So it's not actually 3-D, you shift, scale, and rotate the 2-D elements so it appears 3-D?

You just described 3d projection, aka how most 3d games display a 3d world on a flat monitor.

Yes, yes. The interesting part is performing the transformations manually without tooling.

Yup! Here's the base SVG I started with: https://p195.p4.n0.cdn.getcloudapp.com/items/OAuqBqvx/boat.s...

Everything else is just CSS!

Very cool, indeed!

ok for those who were as obsessed with this as i was... I took the base SVG and cleaned up the CSS to try to understand what was going on with the animations

minimal repro: https://svelte.dev/repl/7eea2eba3707414aa62c9ea53b92ad2d?ver...

quick youtube discussion: https://www.youtube.com/watch?v=9wKnZNjdpp8&feature=youtu.be

I didn't get everything bc you can only get so far looking at the output CSS - he used Stylus here to generate most of these https://news.ycombinator.com/item?id=24138573

thanks for the breakdown! Now we're all a little bit smarter.

This is a great breakdown

Nice breakdown, thank you.

This had me in splits:

>> “ Yup, had to get it out quick so I went simple!“

> “What the actual fuck?!”

i mean... am i wrong? lol

thanks

I know what I will spend my evening on, I never thought that would be that simple :)

The 'M' in Mozilla slowly drifting away is a great touch as well :)

Reply on news.ycombinator.com