正在加载视频...

视频加载失败

加载此视频时出现问题。这可能是由于临时网络问题，或视频可能不可用。

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 次观看 • 1 年前 •via X (Twitter)

艺术科学技术

Anya Rossi• Live Now

Private livecam show

23 条评论

؜؜؜؜؜؜؜؜؜؜؜؜؜؜؜؜؜؜؜؜؜lochie 的头像

؜؜؜؜؜؜؜؜؜؜؜؜؜؜؜؜؜؜؜؜؜lochie1 年前

the web needs more arcs

jhey ʕ•ᴥ•ʔ 的头像

jhey ʕ•ᴥ•ʔ1 年前

fr 💯

matt 的头像

matt1 年前

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

Danny Clayden Chambers 的头像

Danny Clayden Chambers1 年前

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

A. 的头像

A.1 年前

Wow 🔥

Kri3kD3v 的头像

Kri3kD3v1 年前

So neat 🔥

Kumar Shivam 的头像

Kumar Shivam1 年前

that's so awesome!!!

Rajesh 的头像

Rajesh1 年前

This guy keeps cooking BANGERS! 🫡

mohamed-elhaissan 的头像

mohamed-elhaissan1 年前

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

Ali 的头像

Ali10 个月前

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

Zino 的头像

Zino1 年前

This is honestly so cool

dev1abhi 的头像

dev1abhi1 年前

Cool stuff

Prathmesh 的头像

Prathmesh5 个月前

This is soo cool

Michael Long 的头像

Michael Long1 年前

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

edgard 的头像

edgard1 年前

🤯

Sam 的头像

Sam1 年前

Damn what. This is nuts

Bruce Dean Robinson 的头像

Bruce Dean Robinson1 年前

sick

phobon 的头像

phobon1 年前

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

Parssa Kyanzadeh 的头像

Parssa Kyanzadeh1 年前

very sebastian lague vibes, super sick

Ganesh Dole 的头像

Ganesh Dole1 年前

Wow!! you have a youtube channel?

Pochi 的头像

Pochi1 年前

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 的头像

Radhey Mugdal10 个月前

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

Jakove_HR 的头像

Jakove_HR1 年前

This is so sick

相关视频

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

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

jhey ʕ•ᴥ•ʔ

97,915 次观看 • 1 年前

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 次观看 • 3 年前

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 次观看 • 1 年前

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 次观看 • 1 年前

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 次观看 • 11 个月前

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 次观看 • 3 个月前

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

25,489 次观看 • 11 个月前

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 次观看 • 5 个月前

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 次观看 • 2 个月前

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 次观看 • 11 个月前

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 次观看 • 1 年前

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 次观看 • 7 个月前

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 次观看 • 1 年前

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 次观看 • 3 个月前

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 次观看 • 4 个月前

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 次观看 • 3 年前

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 次观看 • 1 年前

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 次观看 • 1 年前

sol 5.6 is perfect for generation svg animations 🤌

sol 5.6 is perfect for generation svg animations 🤌

Misha

109,480 次观看 • 3 个月前

play 🤝 pause you don't always need to morph the svg jus' a little scale + translate on the paths w/ css 👇

play 🤝 pause you don't always need to morph the svg jus' a little scale + translate on the paths w/ css 👇

jhey ʕ•ᴥ•ʔ

17,688 次观看 • 4 个月前