Video yükleniyor...

Video Yüklenemedi

Bu video yüklenirken bir sorun oluştu. Bu geçici bir ağ sorunundan kaynaklanıyor olabilir veya video kullanılamıyor olabilir.

Ana Sayfaya Dön

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 görüntüleme • 1 yıl önce •via X (Twitter)

Sanat Bilim & Teknoloji

Anya Rossi• Live Now

Private livecam show

23 Yorum

؜؜؜؜؜؜؜؜؜؜؜؜؜؜؜؜؜؜؜؜؜lochie profil fotoğrafı

؜؜؜؜؜؜؜؜؜؜؜؜؜؜؜؜؜؜؜؜؜lochie1 yıl önce

the web needs more arcs

jhey ʕ•ᴥ•ʔ profil fotoğrafı

jhey ʕ•ᴥ•ʔ1 yıl önce

fr 💯

matt profil fotoğrafı

matt1 yıl önce

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

Danny Clayden Chambers profil fotoğrafı

Danny Clayden Chambers1 yıl önce

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

A. profil fotoğrafı

A.1 yıl önce

Wow 🔥

Kri3kD3v profil fotoğrafı

Kri3kD3v1 yıl önce

So neat 🔥

Kumar Shivam profil fotoğrafı

Kumar Shivam1 yıl önce

that's so awesome!!!

Rajesh profil fotoğrafı

Rajesh1 yıl önce

This guy keeps cooking BANGERS! 🫡

mohamed-elhaissan profil fotoğrafı

mohamed-elhaissan1 yıl önce

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

Ali profil fotoğrafı

Ali10 ay önce

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

Zino profil fotoğrafı

Zino1 yıl önce

This is honestly so cool

dev1abhi profil fotoğrafı

dev1abhi1 yıl önce

Cool stuff

Prathmesh profil fotoğrafı

Prathmesh5 ay önce

This is soo cool

Michael Long profil fotoğrafı

Michael Long1 yıl önce

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

edgard profil fotoğrafı

edgard1 yıl önce

🤯

Sam profil fotoğrafı

Sam1 yıl önce

Damn what. This is nuts

Bruce Dean Robinson profil fotoğrafı

Bruce Dean Robinson1 yıl önce

sick

phobon profil fotoğrafı

phobon1 yıl önce

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

Parssa Kyanzadeh profil fotoğrafı

Parssa Kyanzadeh1 yıl önce

very sebastian lague vibes, super sick

Ganesh Dole profil fotoğrafı

Ganesh Dole1 yıl önce

Wow!! you have a youtube channel?

Pochi profil fotoğrafı

Pochi1 yıl önce

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.

Radhey Mugdal profil fotoğrafı

Radhey Mugdal10 ay önce

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

Jakove_HR profil fotoğrafı

Jakove_HR1 yıl önce

This is so sick

Benzer Videolar

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

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

jhey ʕ•ᴥ•ʔ

97,915 görüntüleme • 1 yıl önce

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 görüntüleme • 3 yıl önce

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 görüntüleme • 1 yıl önce

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 görüntüleme • 1 yıl önce

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 görüntüleme • 10 ay önce

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 görüntüleme • 3 ay önce

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 görüntüleme • 11 ay önce

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 görüntüleme • 5 ay önce

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 görüntüleme • 2 ay önce

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 görüntüleme • 11 ay önce

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 görüntüleme • 1 yıl önce

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 görüntüleme • 6 ay önce

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 görüntüleme • 1 yıl önce

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 görüntüleme • 3 ay önce

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 görüntüleme • 3 ay önce

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 görüntüleme • 3 yıl önce

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 görüntüleme • 1 yıl önce

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 görüntüleme • 1 yıl önce

sol 5.6 is perfect for generation svg animations 🤌

sol 5.6 is perfect for generation svg animations 🤌

Misha

109,480 görüntüleme • 2 ay önce

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 görüntüleme • 8 ay önce