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

146,984 subscribers

213,841 görüntüleme • 10 ay önce •via X (Twitter)

Sanat Bilim & Teknoloji

Anya Rossi• Live Now

Private livecam show

23 Yorum

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

؜؜؜؜؜؜؜؜؜؜؜؜؜؜؜؜؜؜؜؜؜lochie10 ay önce

the web needs more arcs

jhey ʕ•ᴥ•ʔ profil fotoğrafı

jhey ʕ•ᴥ•ʔ10 ay önce

fr 💯

matt profil fotoğrafı

matt10 ay önce

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

Danny Clayden Chambers profil fotoğrafı

Danny Clayden Chambers10 ay önce

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

A. profil fotoğrafı

A.10 ay önce

Wow 🔥

Kri3kD3v profil fotoğrafı

Kri3kD3v10 ay önce

So neat 🔥

Kumar Shivam profil fotoğrafı

Kumar Shivam10 ay önce

that's so awesome!!!

Rajesh profil fotoğrafı

Rajesh10 ay önce

This guy keeps cooking BANGERS! 🫡

mohamed-elhaissan profil fotoğrafı

mohamed-elhaissan10 ay önce

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

Ali profil fotoğrafı

Ali9 ay önce

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

Zino profil fotoğrafı

Zino10 ay önce

This is honestly so cool

dev1abhi profil fotoğrafı

dev1abhi10 ay önce

Cool stuff

Prathmesh profil fotoğrafı

Prathmesh3 ay önce

This is soo cool

Michael Long profil fotoğrafı

Michael Long10 ay önce

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

edgard profil fotoğrafı

edgard10 ay önce

🤯

Sam profil fotoğrafı

Sam10 ay önce

Damn what. This is nuts

Bruce Dean Robinson profil fotoğrafı

Bruce Dean Robinson10 ay önce

sick

phobon profil fotoğrafı

phobon10 ay ö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 Kyanzadeh10 ay önce

very sebastian lague vibes, super sick

Ganesh Dole profil fotoğrafı

Ganesh Dole10 ay önce

Wow!! you have a youtube channel?

Pochi profil fotoğrafı

Pochi10 ay ö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 Mugdal9 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_HR10 ay önce

This is so sick

Benzer Videolar

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

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

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

72,045 görüntüleme • 9 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 • 4 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 • 10 ay ö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 ✪

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

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

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

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

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

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

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

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

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

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

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