5 ms·
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!
by gkoberger 6y ago
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!
- STRML 6y agoThis is honestly really impressive on such a short deadline! Looks really great.
- ghostbrainalpha 6y agoDo you mind estimating exactly how quickly something like that could be produced? Great job!
- gkoberger 6y agoThe whole site took about 4 hours last night, and the SVG animation took about 2.5 of those hours :)
- Rapzid 6y agoCurious what tool/tools you used for that if any.
- deleted 6y ago[deleted]
- gkoberger 6y agoI 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/ https://greensock.com/gsap/
- rexf 6y agoThat's incredible. Very well done!
- swyx 6y agoby 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!
- gkoberger 6y agoOh 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 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 https://pastebin.com/Y6JwkZi4)
- STRML 6y agoSee https://news.ycombinator.com/item?id=24135424 https://news.ycombinator.com/item?id=24135424
- renewiltord 6y agoSo 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!
- gruez 6y ago>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.
- renewiltord 6y agoYes, yes. The interesting part is performing the transformations manually without tooling.
- gkoberger 6y agoYup! Here's the base SVG I started with: https://p195.p4.n0.cdn.getcloudapp.com/items/OAuqBqvx/boat.svg?v=b7ea8350188628e6de9e5fe54388ded3 https://p195.p4.n0.cdn.getcloudapp.com/items/OAuqBqvx/boat.s... Everything else is just CSS!
- renewiltord 6y agoVery cool, indeed!
- swyx 6y agook 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?version=3.24.1 https://svelte.dev/repl/7eea2eba3707414aa62c9ea53b92ad2d?ver... quick youtube discussion: https://www.youtube.com/watch?v=9wKnZNjdpp8&feature=youtu.be 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 https://news.ycombinator.com/item?id=24138573
- dgellow 6y agoI know what I will spend my evening on, I never thought that would be that simple :)