Загрузка видео...

Не удалось загрузить видео

Возникла проблема при загрузке этого видео. Это может быть связано с временными проблемами сети или видео может быть недоступно.

На главную

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 просмотров • 10 месяцев назад

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

24,707 просмотров • 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 просмотров • 6 месяцев назад

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 просмотров • 3 месяцев назад

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 просмотров • 2 месяцев назад

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 просмотров • 8 месяцев назад