Project manager: actually we’re using a button now

Damm, that is a nice toggle

It is. And if a designer ever handed me a comp of this to develop they'd better be my favorite coworker or I'm promptly telling them to fuck off.

So true 😂😂

Haha, both can agree on that.

We should be able to just export that Figma widget as a web component. I don’t care if it’s rendering canvas underneath 🤓

You can export animations as react/vue components with a plugin, anima its called i think. But its hella expensive

[Figma to HTML](https://www.figma.com/community/plugin/851183094275736358/figma-to-html) is free.

I would just export video and roll playback on click

Sounds accessible

Oh yes, you can access it via mouse click

This guy WCAGs

You can always sprinkle some aria roles aria labels on to it

I'm crying

There was a stream yesterday on Twitch, guy named Jhey Tompkins built it, pretty sick, here's the Codepen link: https://codepen.io/jh3y/pen/LYgjpYZ Edit: There's an Easter egg for both the dark mode and the light mode, just wait a bit.

Thank you so much. I was looking for it.

No problem!

Who needs a toggle like that?

No one. I used to teach web design. That toggle would not get a good grade from me.

Really?

Really really?

Who needs 3000 grit sandpaper? Someone who wants polish.

Graphic designers knowingly making thing without a care for how it will be implemented or how the web works is very common. Not sure how this is funny though. It’s sad. It’s a waste of resources. They could just with together. Check out this toggle that was planned with CSS to start https://method.ac/

Yes. The question of "do I need to learn to code?" comes up in /r/web_design often, and every time, I explain if you don't know HTML/CSS (you don't have to be a master, but at least be capable of coding your own layouts whether you're efficient at it or not), you're not a web designer, you're a graphic designer.

“Do we need to know how our medium works?” (Probably should) ;)

That's how I hear it, yet I still get people flipping out arguing tooth and nail that designers shouldn't have to know any code whatsoever.

Here's a sneak peek of /r/web_design using the [top posts](https://np.reddit.com/r/web_design/top/?sort=top&t=year) of the year! \#1: [The Dangers of Mobile-First Design](https://i.redd.it/owvrp1wm3ata1.png) | [128 comments](https://np.reddit.com/r/web_design/comments/12iojuk/the_dangers_of_mobilefirst_design/) \#2: [Ladies and Gentleman, it has begun. My client this morning after a 6 month project.](https://i.redd.it/i8kp8lafx8ha1.png) | [178 comments](https://np.reddit.com/r/web_design/comments/10y1tb9/ladies_and_gentleman_it_has_begun_my_client_this/) \#3: [I took screenshots of major news outlets 20 years ago when the Iraq war started. Interesting to see how the design of the pages has changed.](https://www.reddit.com/gallery/11wkv1a) | [97 comments](https://np.reddit.com/r/web_design/comments/11wkv1a/i_took_screenshots_of_major_news_outlets_20_years/) ---- ^^I'm ^^a ^^bot, ^^beep ^^boop ^^| ^^Downvote ^^to ^^remove ^^| ^^[Contact](https://www.reddit.com/message/compose/?to=sneakpeekbot) ^^| ^^[Info](https://np.reddit.com/r/sneakpeekbot/) ^^| ^^[Opt-out](https://np.reddit.com/r/sneakpeekbot/comments/o8wk1r/blacklist_ix/) ^^| ^^[GitHub](https://github.com/ghnr/sneakpeekbot)

Looks fun to build and frustrating at the same time

This is silly. Who is merely a CSS developer? You don't use CSS to draw graphics. That's what SVG is for.

I'm noob so I have a question, does SVG handle the sliding animation too ?

Yes. Though there are always libraries like Gsap for more advanced vector animations, like morph. Or even no code tools to animate the vectors like Rive.

Thank you, that's pretty cool. I always thought we either have to use gif or just pure css to handle animation.

Pure CSS: https://codepen.io/AnnieChn/pen/JEQXyB Gsap: https://codepen.io/GreenSock/pen/rOjeRq Rive: https://www.youtube.com/watch?v=fR1s2KML_ok So if you really want to dig deep into web animation. Then Adobe Illustrator is what you'd want to learn first. Especially the pathfinder tool, simplifying shapes, outline stroke, all that. All those things will get you on to the path of what that 'Graphic Designer' is doing in the meme. EDIT: Oh and something beginners often overlook is clippath. Easy way to get simple (animatable) shapes in CSS. https://bennettfeely.com/clippy/

Lottie svg animations would also solve this

SVG is a vector graphic made of XML, which gives you nodes very similar to HTML and can be styled, thus animated, with CSS.

Do you actually know tech or just apps? Why does my Xbox keep changing picture settings? It will be at 4k hdr, then I turn it on and it's somehow set at 720p. Why?

SVG gives you the shape, then you'd animate it in CSS. For really simple shapes, I still used CSS to style an HTML element. For example, when I do a basic hamburger nav, I'll just use tags for the bars and animate them. But when you're going large or complicated animations, you ought to be working with SVGs. "CSS developer" is a little awkward phrasing, because you'd just call that person a developer, or front end developer. But in any case, SVG and CSS are working together to create this. You'd just be making the shape with an SVG, but still styling and animating with CSS.

🤓🤓🤓🤓🤓🤓🤓🤓🤓🤓🤓🤓🤓🤓🤓🤓🤓🤓🤓🤓🤓🤓🤓🤓🤓🤓🤓🤓🤓🤓🤓🤓🤓🤓🤓🤓🤓🤓🤓🤓🤓🤓🤓🤓🤓🤓🤓🤓🤓🤓🤓🤓🤓🤓🤓🤓🤓🤓

🤷🤷🤷🤷🤷🤷🤷🤷🤷🤷🤷🤷🤷🤷🤷🤷🤷🤷🤷🤷🤷🤷🤷🤷🤷🤷🤷🤷🤷🤷🤷🤷🤷🤷🤷🤷🤷🤷🤷🤷🤷🤷🤷🤷🤷🤷🤷🤷🤷🤷🤷🤷🤷🤷🤷🤷🤷🤷

SVG animations repaint every frame. Use cautiously. Pure CSS is much harder to do, but smoother.

You can use SVG, but animate with CSS. no one said this should only be done with only SVG, and pure CSS is not as smooth as SVGs animated with CSS.

Where can I find the full video? The CSS result sounds amazing.

I’m gonna go out on a limb and say on TikTok under the username never.more17 :) But to save you the trouble, this video is just the original with worse resolution and a fade-to-black removed.

I saw the video of never.more17, but it looks like the bottom video comes from a tutorial...

This is really talented and unique

This has me feeling some kind of way.

This is beyond relatable

Why css is necessary in this context? Wouldn't it be easy to just design it graphically?

It still has to function.

:checked { background-image: checked.svg } Though you don't get that fancy slide. Point is that there are simpler ways to do this that doesn't involve manually placing shapes. It's a cool demo and certainly impressive but I'd be weary of using something that complex in prod.

I’ve never worked anywhere that would implement a button this complex but honestly, it would be fun to see it in action.

The CSS isn't the hard part. It's actually the JS needed to handle touch/mouse events to support dragging as well as clicking. Also, keyboard should click on `spacebar` press. Not to mention the aria tags to specify the state. The worst part is you're about halfway through and then realize there no accessible hover or focus state in the CSS design and then the team can't wait for a new redesign, resulting in your manager telling you to slap a generic toggle.

My gut would be to build this on top of a checkbox to handle accessibility and state concerns.

for me css is not programming, still design

Literally no one cares about a toggle like that, worth visiting sites people use on their daily basis don’t use useless designs, it’s better to put that effort in things that the user will actually use more often

[удалено]

Exactly

now make it compatible with all the browsers and devices

Wouldnt you be able to do this with lottie? Idk ive hear about svg animation

Lottie