made only using css. no js listener used. took me longer than i thought it would. for hover state im doing `:has(*:is(.sidebar-icon-trigger:hover` so much you can do in css using pseudo classes. invest in css.

using css `scale()` and `translate()` function and some viewport calculation to do this effect. for scale easing using `ease-in-out-quart` for `400ms`. made it origin aware. craving spring ease like @emilkowalski_ did for @linear's team page. should have used @motiondotdev :)

@emilkowalski_ @linear @motiondotdev here the original inspiration from @linear made by @emilkowalski_ .

using css `scale()` and `translate()` function and some viewport calculation to do this effect. for scale easing using `ease-in-out-quart` for `400ms`. made it origin aware. craving spring ease like @emilkowalski_ did for @linear's team page. should have used @motiondotdev :)

just to be safe, here is a raw screen recording without big cursors and motion blurs

playing with easing in css is fun. here im using `ease-out-cubic` with `200ms` duration. this works best for user initiated interactions with transforms. animations here using css only transform and opacity. p.s: no! don't count my useState. i love my useState.

fine you win @lukerramsden using hand cursor this time

you can check @emilkowalski_'s blogs to learn more about css animations. https://t.co/i9JKuHpSt3 also here is a nice resource to check all easing functions:

playing with easing in css is fun. here im using `ease-out-cubic` with `200ms` duration. this works best for user initiated interactions with transforms. animations here using css only transform and opacity. p.s: no! don't count my useState. i love my useState.

also sync your `theme-color` with the background to match color with ui bars of browsers like safari and arc

hey @theo can we have this or a sidebar like this for @t3dotchat ? right now there is no way to view the chats real quick when the sidebar is closed. maybe something like this would help. also here is the live link: https://t.co/EOHqVcm2Df want to hear your thoughts on this.

try it from here: https://t.co/EOHqVcm2Df p.s: in video the sidebar icon color not matching the ui XD i recorded as soon as I made it work. fixed it in production.

also thanks for pushing me to animate the icon @stevenkovar @Taskinoz love you guys. i really mean it.

the sidebar icon now matches the state or the state it will go to. thanks @jh3yy :3

if you are starting out, to learn in depth you can look into https://t.co/qcCQ4RwG4M by @emilkowalski_

use css properties like `blur` and `opacity` in your animations to make it look smooth and not sloppy. using blurs, opacity changes and spring animation is the reason why @Apple's animations looks smooth.

another long shot .@alifdotbuild @omarwasm can i join for design eng/frontend? :3

im gonna pull a long shot here now @amasad @theandytee can I get a design eng role? :33 i would love to build at @Replit

here is the code: https://t.co/UqieqhaApD and if you want try the component yourself: https://t.co/EOHqVcm2Df p.s: i know the code is shitty so don't judge. and yes i used @tailwindcss and it counts heh <3

this is probably the best feature i've shipped so far. all of my projects will have this world class level responsiveness for all size displays.

made only using css. no js listener used. took me longer than i thought it would. for hover state im doing `:has(*:is(.sidebar-icon-trigger:hover` so much you can do in css using pseudo classes. invest in css.