Video wird geladen...

Video konnte nicht geladen werden

Beim Laden dieses Videos ist ein Problem aufgetreten. Dies könnte an einem vorübergehenden Netzwerkproblem liegen oder das Video ist möglicherweise nicht verfügbar.

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 Aufrufe • vor 10 Monaten •via X (Twitter)

Kunst Wissenschaft & Technologie

Anya Rossi• Live Now

Private livecam show

23 Kommentare

Profilbild von ؜؜؜؜؜؜؜؜؜؜؜؜؜؜؜؜؜؜؜؜؜lochie

؜؜؜؜؜؜؜؜؜؜؜؜؜؜؜؜؜؜؜؜؜lochievor 10 Monaten

the web needs more arcs

Profilbild von jhey ʕ•ᴥ•ʔ

jhey ʕ•ᴥ•ʔvor 10 Monaten

fr 💯

Profilbild von matt

mattvor 10 Monaten

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

Profilbild von Danny Clayden Chambers

Danny Clayden Chambersvor 10 Monaten

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

Profilbild von A.

A.vor 10 Monaten

Wow 🔥

Profilbild von Kri3kD3v

Kri3kD3vvor 10 Monaten

So neat 🔥

Profilbild von Kumar Shivam

Kumar Shivamvor 10 Monaten

that's so awesome!!!

Profilbild von Rajesh

Rajeshvor 10 Monaten

This guy keeps cooking BANGERS! 🫡

Profilbild von mohamed-elhaissan

mohamed-elhaissanvor 10 Monaten

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

Profilbild von Ali

Alivor 9 Monaten

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

Profilbild von Zino

Zinovor 10 Monaten

This is honestly so cool

Profilbild von dev1abhi

dev1abhivor 10 Monaten

Cool stuff

Profilbild von Prathmesh

Prathmeshvor 3 Monaten

This is soo cool

Profilbild von Michael Long

Michael Longvor 10 Monaten

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

Profilbild von edgard

edgardvor 10 Monaten

🤯

Profilbild von Sam

Samvor 10 Monaten

Damn what. This is nuts

Profilbild von Bruce Dean Robinson

Bruce Dean Robinsonvor 10 Monaten

sick

Profilbild von phobon

phobonvor 10 Monaten

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

Profilbild von Parssa Kyanzadeh

Parssa Kyanzadehvor 10 Monaten

very sebastian lague vibes, super sick

Profilbild von Ganesh Dole

Ganesh Dolevor 10 Monaten

Wow!! you have a youtube channel?

Profilbild von Pochi

Pochivor 10 Monaten

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.

Profilbild von Radhey Mugdal

Radhey Mugdalvor 9 Monaten

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

Profilbild von Jakove_HR

Jakove_HRvor 10 Monaten

This is so sick

Ähnliche Videos

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 Aufrufe • vor 3 Jahren

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 Aufrufe • vor 1 Jahr

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 Aufrufe • vor 10 Monaten

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 Aufrufe • vor 9 Monaten

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 Aufrufe • vor 4 Monaten

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 Aufrufe • vor 10 Monaten

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 Aufrufe • vor 2 Monaten

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 Aufrufe • vor 6 Monaten

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 Aufrufe • vor 10 Monaten

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 Aufrufe • vor 4 Monaten

🖌️ 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 Aufrufe • vor 1 Jahr

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 Aufrufe • vor 5 Tagen

🚨 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 Aufrufe • vor 9 Monaten

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 Aufrufe • vor 7 Monaten

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 Aufrufe • vor 6 Monaten

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 Aufrufe • vor 2 Jahren

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 Aufrufe • vor 7 Monaten

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 Aufrufe • vor 1 Jahr