Video wird geladen...

Video konnte nicht geladen werden

Beim Laden dieses Videos ist ein Problem aufgetreten. Dies könnte an einem vorübergehenden Netzwerkproblem liegen oder das Video ist möglicherweise nicht verfügbar.

when the tool is missing, make it 👨‍🍳 motion path visualizer w/ SVG for accumulated cubic-bezier timed CSS animations ⚡

jhey ʕ•ᴥ•ʔ

148,288 subscribers

214,603 Aufrufe • vor 1 Jahr •via X (Twitter)

Kunst Wissenschaft & Technologie

Anya Rossi• Live Now

Private livecam show

23 Kommentare

Profilbild von ؜؜؜؜؜؜؜؜؜؜؜؜؜؜؜؜؜؜؜؜؜lochie

؜؜؜؜؜؜؜؜؜؜؜؜؜؜؜؜؜؜؜؜؜lochievor 1 Jahr

the web needs more arcs

Profilbild von jhey ʕ•ᴥ•ʔ

jhey ʕ•ᴥ•ʔvor 1 Jahr

fr 💯

Profilbild von matt

mattvor 1 Jahr

you post, i bookmark. its a simple life 👨‍🌾

Profilbild von Danny Clayden Chambers

Danny Clayden Chambersvor 1 Jahr

Design System Inspector, Copy Designer.. and more in the way

Profilbild von A.

A.vor 1 Jahr

Wow 🔥

Profilbild von Kri3kD3v

Kri3kD3vvor 1 Jahr

So neat 🔥

Profilbild von Kumar Shivam

Kumar Shivamvor 1 Jahr

that's so awesome!!!

Profilbild von Rajesh

Rajeshvor 1 Jahr

This guy keeps cooking BANGERS! 🫡

Profilbild von mohamed-elhaissan

mohamed-elhaissanvor 1 Jahr

yoooooooooooooooow how can i made like this animation ? is there is any spificique library or something ?

Profilbild von Ali

Alivor 10 Monaten

Do you offer a complete set of tutorials or a YouTube playlist for your animation process?

Profilbild von Zino

Zinovor 1 Jahr

This is honestly so cool

Profilbild von dev1abhi

dev1abhivor 1 Jahr

Cool stuff

Profilbild von Prathmesh

Prathmeshvor 5 Monaten

This is soo cool

Profilbild von Michael Long

Michael Longvor 1 Jahr

bro 💀 this is nuts do you guys actually use these animations in prod?

Profilbild von edgard

edgardvor 1 Jahr

🤯

Profilbild von Sam

Samvor 1 Jahr

Damn what. This is nuts

Profilbild von Bruce Dean Robinson

Bruce Dean Robinsonvor 1 Jahr

sick

Profilbild von phobon

phobonvor 1 Jahr

I'm really into custom tools for this stuff. Seems like such fertile ground to do really amazing things 🤔

Profilbild von Parssa Kyanzadeh

Parssa Kyanzadehvor 1 Jahr

very sebastian lague vibes, super sick

Profilbild von Ganesh Dole

Ganesh Dolevor 1 Jahr

Wow!! you have a youtube channel?

Profilbild von Pochi

Pochivor 1 Jahr

This is fantastic! Turning complex, invisible logic into something you can interact with is the core of great developer tooling. It's the same philosophy we're building into Pochi: giving you an agent that can explain your entire codebase, making the whole system feel more visible and tangible.

Profilbild von Radhey Mugdal

Radhey Mugdalvor 10 Monaten

What tool is this ? can anyone tell me that editor like thing in right side, what's that?

Profilbild von Jakove_HR

Jakove_HRvor 1 Jahr

This is so sick

Ähnliche Videos

curved scrollbar 👨‍🍳 powered by GSAP + CSS scroll-snap + SVG

curved scrollbar 👨‍🍳 powered by GSAP + CSS scroll-snap + SVG

jhey ʕ•ᴥ•ʔ

97,915 Aufrufe • vor 1 Jahr

SVG path animation is child’s play when you’re using a no-code tool 🎈 See for yourself 👇

SVG path animation is child’s play when you’re using a no-code tool 🎈 See for yourself 👇

SVGator

204,760 Aufrufe • vor 3 Jahren

tool iteration 👨‍🍳 drag source/destination to refine responsive CSS motion path timings ⚡ .p { animation: x .8s var(--x-time), y .8s var(--y-time); animation-composition: accumulate; } @keyframes x { to { translate: var(--x) 0 } @keyframes y { to { translate: 0 var(--y) }

tool iteration 👨‍🍳 drag source/destination to refine responsive CSS motion path timings ⚡ .p { animation: x .8s var(--x-time), y .8s var(--y-time); animation-composition: accumulate; } @keyframes x { to { translate: var(--x) 0 } @keyframes y { to { translate: 0 var(--y) }

jhey ʕ•ᴥ•ʔ

58,449 Aufrufe • vor 1 Jahr

CSS "will-change" is not always the answer – sometimes it can make things worse reach for "transform: translateZ(0)" and give that a try if you're having issues with motion 👨‍🍳

CSS "will-change" is not always the answer – sometimes it can make things worse reach for "transform: translateZ(0)" and give that a try if you're having issues with motion 👨‍🍳

jhey ʕ•ᴥ•ʔ

54,922 Aufrufe • vor 1 Jahr

this year's editions page is a marvel – so many awesome details 👨‍🍳 honored to contribute, team smashed it 👏 beyond the incredible webgl work, there's crafty use of css container queries, counters, transitions/animations, and svg too!

this year's editions page is a marvel – so many awesome details 👨‍🍳 honored to contribute, team smashed it 👏 beyond the incredible webgl work, there's crafty use of css container queries, counters, transitions/animations, and svg too!

jhey ʕ•ᴥ•ʔ

87,348 Aufrufe • vor 10 Monaten

css mix-blend-mode + svg filters + mess w/ contrast, etc. love stuff like this when it comes up 🙏

css mix-blend-mode + svg filters + mess w/ contrast, etc. love stuff like this when it comes up 🙏

jhey ʕ•ᴥ•ʔ

14,210 Aufrufe • vor 3 Monaten

figured out how to do motion blurs in the browser using svg filters and css

figured out how to do motion blurs in the browser using svg filters and css

ravarcheon

24,707 Aufrufe • vor 11 Monaten

your signature is a custom easing function™ ✒️ draw it map the motion to css linear() timing function package as portable SVG paste anywhere 👇

your signature is a custom easing function™ ✒️ draw it map the motion to css linear() timing function package as portable SVG paste anywhere 👇

jhey ʕ•ᴥ•ʔ

171,109 Aufrufe • vor 5 Monaten

This tool is insane! Create your own mascot in Grok Bot style. Export as SVG animations. Save it →

This tool is insane! Create your own mascot in Grok Bot style. Export as SVG animations. Save it →

Tran Mau Tri Tam ✪

76,955 Aufrufe • vor 2 Monaten

built some 3D css books in the past with scroll interaction and demo links might make a css cookbook 👨‍🍳

built some 3D css books in the past with scroll interaction and demo links might make a css cookbook 👨‍🍳

jhey ʕ•ᴥ•ʔ

59,139 Aufrufe • vor 11 Monaten

a smoother radius transform version using css. no framer motion used here. for auto height transition using css `grid` inspired by jhey ʕ•ᴥ•ʔ. when collapsed `grid-rows-[0fr]` and expanded `grid-rows-[1fr]`. and that with `ease-out-cubic` with `300ms` makes it feel just perfect ~

a smoother radius transform version using css. no framer motion used here. for auto height transition using css `grid` inspired by jhey ʕ•ᴥ•ʔ. when collapsed `grid-rows-[0fr]` and expanded `grid-rows-[1fr]`. and that with `ease-out-cubic` with `300ms` makes it feel just perfect ~

Soren

119,817 Aufrufe • vor 1 Jahr

Updated my SVG-to-CSS converter to support multiple path elements. An easy way to convert complex SVG shapes into CSS. It's a single-element implementation with a single shape() value! You can also have the border-only version using border-shape.

Updated my SVG-to-CSS converter to support multiple path elements. An easy way to convert complex SVG shapes into CSS. It's a single-element implementation with a single shape() value! You can also have the border-only version using border-shape.

CSS by T. Afif

15,196 Aufrufe • vor 6 Monaten

responsive stacked tabs w/ CSS grid 👨‍🍳 + works with keyboard navigation + drag gestures + container queries for orientation

responsive stacked tabs w/ CSS grid 👨‍🍳 + works with keyboard navigation + drag gestures + container queries for orientation

jhey ʕ•ᴥ•ʔ

71,261 Aufrufe • vor 1 Jahr

New tools I keep coming back to. Save this 👇 - - AI prompts for animated websites - - free animated component library - - pure CSS text animations - - spring physics UI motion - - build terminal UIs with TypeScript - - name any UI element instantly - - logo, color & gradient tools - - 3D product visualizer in browser - - Claude skills for web design What am I missing?

Tran Mau Tri Tam ✪

171,140 Aufrufe • vor 3 Monaten

The open-source library of CSS motion effects, Kinetics, now contains 99 motion effects. You can copy CSS to the clipboard or the prompt so it's easy to replicate in your AI tool.

The open-source library of CSS motion effects, Kinetics, now contains 99 motion effects. You can copy CSS to the clipboard or the prompt so it's easy to replicate in your AI tool.

Csaba Kissi

107,100 Aufrufe • vor 3 Monaten

animated illustration that picks a different path every time you see it 🪄✨🛣️ framer motion + tailwind + svg + react

animated illustration that picks a different path every time you see it 🪄✨🛣️ framer motion + tailwind + svg + react

pugson

113,320 Aufrufe • vor 3 Jahren

This week, Gabriel Perales 🤓 and I worked together on a tool for Tailwind CSS users. The tool lets you easily create grids for your Tailwind CSS projects, perfect for generating bento-style grids! It supports Tailwind CSS v3/v4 —

This week, Gabriel Perales 🤓 and I worked together on a tool for Tailwind CSS users. The tool lets you easily create grids for your Tailwind CSS projects, perfect for generating bento-style grids! It supports Tailwind CSS v3/v4 —

Michael Andreuzza

69,404 Aufrufe • vor 1 Jahr

soon: CSS only sticky scroll hide/reveal 🧑‍🍳 .atc { position: fixed; bottom: 0; transition: translate 0.26s cubic-bezier(.55,0,.67,1.25); /* hide on scroll down */ @container scroll-state(scrolled: bottom) { translate: 0 100%; transition-delay: 0.5s; } }

soon: CSS only sticky scroll hide/reveal 🧑‍🍳 .atc { position: fixed; bottom: 0; transition: translate 0.26s cubic-bezier(.55,0,.67,1.25); /* hide on scroll down */ @container scroll-state(scrolled: bottom) { translate: 0 100%; transition-delay: 0.5s; } }

jhey ʕ•ᴥ•ʔ

66,423 Aufrufe • vor 1 Jahr

sol 5.6 is perfect for generation svg animations 🤌

sol 5.6 is perfect for generation svg animations 🤌

Misha

109,480 Aufrufe • vor 2 Monaten

i built the animation tool i’ve needed for years. framezero v1 is live. i call it "the whiteboard video editor" - sketch visually - add motion + animations instantly - show code w/ syntax highlighting - quick use icons + GIFS to your video - export 4k — all in your browser

i built the animation tool i’ve needed for years. framezero v1 is live. i call it "the whiteboard video editor" - sketch visually - add motion + animations instantly - show code w/ syntax highlighting - quick use icons + GIFS to your video - export 4k — all in your browser

Matt Maribojoc

70,252 Aufrufe • vor 8 Monaten