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

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

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

На главную

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

jhey ʕ•ᴥ•ʔ

146,984 subscribers

213,841 просмотров • 10 месяцев назад •via X (Twitter)

Искусство Наука и технологии

Anya Rossi• Live Now

Private livecam show

Комментарии: 23

Фото профиля ؜؜؜؜؜؜؜؜؜؜؜؜؜؜؜؜؜؜؜؜؜lochie

؜؜؜؜؜؜؜؜؜؜؜؜؜؜؜؜؜؜؜؜؜lochie10 месяцев назад

the web needs more arcs

Фото профиля jhey ʕ•ᴥ•ʔ

jhey ʕ•ᴥ•ʔ10 месяцев назад

fr 💯

Фото профиля matt

matt10 месяцев назад

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

Фото профиля Danny Clayden Chambers

Danny Clayden Chambers10 месяцев назад

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

Фото профиля A.

A.10 месяцев назад

Wow 🔥

Фото профиля Kri3kD3v

Kri3kD3v10 месяцев назад

So neat 🔥

Фото профиля Kumar Shivam

Kumar Shivam10 месяцев назад

that's so awesome!!!

Фото профиля Rajesh

Rajesh10 месяцев назад

This guy keeps cooking BANGERS! 🫡

Фото профиля mohamed-elhaissan

mohamed-elhaissan10 месяцев назад

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

Фото профиля Ali

Ali9 месяцев назад

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

Фото профиля Zino

Zino10 месяцев назад

This is honestly so cool

Фото профиля dev1abhi

dev1abhi10 месяцев назад

Cool stuff

Фото профиля Prathmesh

Prathmesh3 месяцев назад

This is soo cool

Фото профиля Michael Long

Michael Long10 месяцев назад

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

Фото профиля edgard

edgard10 месяцев назад

🤯

Фото профиля Sam

Sam10 месяцев назад

Damn what. This is nuts

Фото профиля Bruce Dean Robinson

Bruce Dean Robinson10 месяцев назад

sick

Фото профиля phobon

phobon10 месяцев назад

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

Фото профиля Parssa Kyanzadeh

Parssa Kyanzadeh10 месяцев назад

very sebastian lague vibes, super sick

Фото профиля Ganesh Dole

Ganesh Dole10 месяцев назад

Wow!! you have a youtube channel?

Фото профиля Pochi

Pochi10 месяцев назад

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 Mugdal9 месяцев назад

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

Фото профиля Jakove_HR

Jakove_HR10 месяцев назад

This is so sick

Похожие видео

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 лет назад

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 год назад

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

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 ʕ•ᴥ•ʔ

72,045 просмотров • 9 месяцев назад

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

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

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 ✪

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

And HERE IT IS GEMINI 3!!! Prompt: Make a neobrutalist webpage, make it extremely creative, as far as possible, push the limits. Add smooth scroll animations, add fancy colors and tailwind css styles. Make it responsive. title of the page is dorksense Check it out

And HERE IT IS GEMINI 3!!! Prompt: Make a neobrutalist webpage, make it extremely creative, as far as possible, push the limits. Add smooth scroll animations, add fancy colors and tailwind css styles. Make it responsive. title of the page is dorksense Check it out

Dorksense

1,211,040 просмотров • 10 месяцев назад

007/100 Buttons. This button was way more complex than I first thought. I love the page transition on the Truus site that Dennis Snellenberg and Jordan Gilroy worked on. So I wanted to use that drawing SVG Path idea somehow and fit it into a button. In best case with a mask effect. The idea was to have an SVG path in the background that fills the button. At the same time, this path should also be used as a mask to reveal the differently colored text. The SVG should also be replaceable and work with other SVGs. For the path animation, I can use the DrawSVGPlugin from GSAP. Sounds like a solid plan. I built the button so far, and it worked great in Chrome and Firefox. In Safari, nope. I used an SVG mask that I referenced through CSS. But Safari can’t handle that properly when the path inside the mask is animated, so the animation lags. There was no simple solution for that. At least I didn’t find something. So I had to rebuild the button in another way. What I found was that the SVG mask animation works in Safari when the mask is placed on the desired element inside the SVG. That’s where foreignObject comes in, it allows you to use normal HTML elements inside an SVG. Using that, I rebuilt the hover text inside the SVG. I then referenced the mask on the foreignObject with a bit of JavaScript. And it worked! The button’s structure looks more complicated than I wanted it to be, but that happens quite often when you need to make something work across different browsers 😃 Crafting 100 Buttons with Osmo ⏳ Total time: 96h

007/100 Buttons. This button was way more complex than I first thought. I love the page transition on the Truus site that Dennis Snellenberg and Jordan Gilroy worked on. So I wanted to use that drawing SVG Path idea somehow and fit it into a button. In best case with a mask effect. The idea was to have an SVG path in the background that fills the button. At the same time, this path should also be used as a mask to reveal the differently colored text. The SVG should also be replaceable and work with other SVGs. For the path animation, I can use the DrawSVGPlugin from GSAP. Sounds like a solid plan. I built the button so far, and it worked great in Chrome and Firefox. In Safari, nope. I used an SVG mask that I referenced through CSS. But Safari can’t handle that properly when the path inside the mask is animated, so the animation lags. There was no simple solution for that. At least I didn’t find something. So I had to rebuild the button in another way. What I found was that the SVG mask animation works in Safari when the mask is placed on the desired element inside the SVG. That’s where foreignObject comes in, it allows you to use normal HTML elements inside an SVG. Using that, I rebuilt the hover text inside the SVG. I then referenced the mask on the foreignObject with a bit of JavaScript. And it worked! The button’s structure looks more complicated than I wanted it to be, but that happens quite often when you need to make something work across different browsers 😃 Crafting 100 Buttons with Osmo ⏳ Total time: 96h

Eduard Bodak

67,623 просмотров • 4 месяцев назад

🖌️ Quick Tip: Wispy Textures with Path Blur Learn how to breathe life into your Photoshop textures using the Path Blur tool. It’s perfect for smoky, wispy, and motion-filled effects, and is often overlooked! #PhotoshopTips #PathBlur #DigitalArt #VFX

🖌️ Quick Tip: Wispy Textures with Path Blur Learn how to breathe life into your Photoshop textures using the Path Blur tool. It’s perfect for smoky, wispy, and motion-filled effects, and is often overlooked! #PhotoshopTips #PathBlur #DigitalArt #VFX

Beyond-FX

11,046 просмотров • 1 год назад

Codex can now make launch videos. Introducing the Motion MCP for Codex Connect it to motion through the MCP, give it your assets and describe what you want. Codex builds the scenes, animations and transitions directly inside motion. This video was created using the MCP 👇

Codex can now make launch videos. Introducing the Motion MCP for Codex Connect it to motion through the MCP, give it your assets and describe what you want. Codex builds the scenes, animations and transitions directly inside motion. This video was created using the MCP 👇

Motion

89,518 просмотров • 5 дней назад

🚨 INSANE FRONT END by Opus 4.5 Exactly the same prompt : Make a neobrutalist webpage, make it extremely creative, as far as possible, push the limits. Add smooth scroll animations, add fancy colors and tailwind css styles. Make it responsive. title of the page is dorksense.

🚨 INSANE FRONT END by Opus 4.5 Exactly the same prompt : Make a neobrutalist webpage, make it extremely creative, as far as possible, push the limits. Add smooth scroll animations, add fancy colors and tailwind css styles. Make it responsive. title of the page is dorksense.

Rayane

93,337 просмотров • 9 месяцев назад

Meet InterfaceKit, a design tool for working with agents. Refine components live in your app → click to copy prompt. Your agent gets the element data, Tailwind classes, and Motion animations it needs to make your changes in one shot. No more guess and check.

Meet InterfaceKit, a design tool for working with agents. Refine components live in your app → click to copy prompt. Your agent gets the element data, Tailwind classes, and Motion animations it needs to make your changes in one shot. No more guess and check.

joshpuckett

105,097 просмотров • 7 месяцев назад

i used AI to make an ad for an AI tool one product image. one prompt. it generated a cinematic cookie breaking apart in slow motion. no studio. no photographer. no edit. The tool is called eComrads it’s not even launched yet and it just marketed itself?

i used AI to make an ad for an AI tool one product image. one prompt. it generated a cinematic cookie breaking apart in slow motion. no studio. no photographer. no edit. The tool is called eComrads it’s not even launched yet and it just marketed itself?

K

17,387 просмотров • 6 месяцев назад

Since I made this, I have used it for all the icons I need in Blazor. It is so nice to be able to quickly create an icon and then paste it into my solution. #dotnet #blazor #svg Tool: Project:

Since I made this, I have used it for all the icons I need in Blazor. It is so nice to be able to quickly create an icon and then paste it into my solution. #dotnet #blazor #svg Tool: Project:

Kristoffer Strube

12,800 просмотров • 2 лет назад

inspired by QZW Labs' raised-PCB method. the tool takes your SVG and generates the companion mold with clearance, ridges, alignment spikes — the whole thing. free on itch. This is what happens when creative people can't find work. Don't encourage it :P

inspired by QZW Labs' raised-PCB method. the tool takes your SVG and generates the companion mold with clearance, ridges, alignment spikes — the whole thing. free on itch. This is what happens when creative people can't find work. Don't encourage it :P

CASTPIXEL🏳️‍⚧️ 🇵🇸🍉

23,183 просмотров • 7 месяцев назад

Thoughts on transferable skills. I was surprised reading the comments to Riley’s question about best UI animation tool for web. To anyone interested in diving into motion design I would strongly recommend - aim to become a motion expert, not Jitter/Rive/Lottie specialist. If you start from the foundations, jumping into any animation tool will feel like a walk in the park. Keyframes, easing functions, transformations - same concepts are shared between all of them. Getting to know the foundations on the web means starting with CSS, Tailwind or React Motion. I’m often creating small motion concepts in Figma (see video) and then recreating them manually in code. Any language, it doesn’t matter because principles are the same. I recently made the switch to Swift and built a small animation tool for myself (see video) that I’ll discard after I’m done with the motion. This level of comfortableness with motion gives you unmatched flexibility. From that point, tools are just interfaces for expressing something you already deeply understand. This is not about performance or technical optimizations (Lottie files can outperform CSS equivalents), tools mentioned above really are great - it’s about developing transferable creative skill that lets you think across any medium, platform or tool.

Thoughts on transferable skills. I was surprised reading the comments to Riley’s question about best UI animation tool for web. To anyone interested in diving into motion design I would strongly recommend - aim to become a motion expert, not Jitter/Rive/Lottie specialist. If you start from the foundations, jumping into any animation tool will feel like a walk in the park. Keyframes, easing functions, transformations - same concepts are shared between all of them. Getting to know the foundations on the web means starting with CSS, Tailwind or React Motion. I’m often creating small motion concepts in Figma (see video) and then recreating them manually in code. Any language, it doesn’t matter because principles are the same. I recently made the switch to Swift and built a small animation tool for myself (see video) that I’ll discard after I’m done with the motion. This level of comfortableness with motion gives you unmatched flexibility. From that point, tools are just interfaces for expressing something you already deeply understand. This is not about performance or technical optimizations (Lottie files can outperform CSS equivalents), tools mentioned above really are great - it’s about developing transferable creative skill that lets you think across any medium, platform or tool.

Natko Hasic

64,045 просмотров • 1 год назад