4 ms·
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/ https://greenso
by gkoberger 6y ago
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/ 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)