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,441 subscribers

213,366 Aufrufe • vor 8 Monaten •via X (Twitter)

Kunst Wissenschaft & Technologie

Anya Rossi• Live Now

Private livecam show

0 Kommentare

Keine Kommentare verfügbar

Kommentare vom Original-Post werden hier angezeigt

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

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 7 Monaten

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 8 Monaten

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,870 Aufrufe • vor 11 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 ʕ•ᴥ•ʔ

170,418 Aufrufe • vor 2 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 8 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 ✪

155,963 Aufrufe • vor 12 Tagen

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

69,821 Aufrufe • vor 4 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,210,455 Aufrufe • vor 8 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,256 Aufrufe • vor 2 Monaten

🚨 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 8 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

104,635 Aufrufe • vor 5 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,031 Aufrufe • vor 11 Monaten

Numerous props, primary around Leaky Lake, are completely missing animations. The animations only play for a brief period when damaged. This is caused by one box not being ticked.

Numerous props, primary around Leaky Lake, are completely missing animations. The animations only play for a brief period when damaged. This is caused by one box not being ticked.

AllyJax

52,972 Aufrufe • vor 9 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 4 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🏳️‍⚧️ 🇵🇸🍉

22,987 Aufrufe • vor 5 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

New Tools for a New Era. Coding agents like Claude and Cursor have dramatically reduced the time it takes to go from idea to functional software. But the experience of designing and refining with them sucks. One reason for this is that while the terminal is an incredible tool for communicating direction with language, it is a terrible tool for defining and exploring visual and interactive objects. Here is one idea for how we might fix a small part of that. In the old world, when you wanted to create a transition or animation in your app, you would type some code, refresh your local server, and click to run your animation. It probably wasn't right, because after all no one can know what 'cubic-bezier(0.3, 0.05, 0.45, 1)' really feels like when you read it. You need to see it. Feel it. Interact with it in a real world context. So you'd edit some values, save, refresh, and keep guessing and checking until it felt right. Today, you can write a quick, single-use tool that's a visual studio for designing animations. You can then configure some components and containers common in all apps, and explore different animations in real time, adjusting key properties, and getting it just right. Then, you can copy a highly detailed prompt (or export a skill containing all your animations) that captures your intent and direction with perfect clarity. Paste this into your terminal and your agent instantly implements it everywhere. To me, this is an improvement over the old world, and a better way to work in today's. I'm extremely excited to see the ways in which our ability to rapidly create software will shape how we design software tomorrow. Feedback, ideas, and critiques welcome!

New Tools for a New Era. Coding agents like Claude and Cursor have dramatically reduced the time it takes to go from idea to functional software. But the experience of designing and refining with them sucks. One reason for this is that while the terminal is an incredible tool for communicating direction with language, it is a terrible tool for defining and exploring visual and interactive objects. Here is one idea for how we might fix a small part of that. In the old world, when you wanted to create a transition or animation in your app, you would type some code, refresh your local server, and click to run your animation. It probably wasn't right, because after all no one can know what 'cubic-bezier(0.3, 0.05, 0.45, 1)' really feels like when you read it. You need to see it. Feel it. Interact with it in a real world context. So you'd edit some values, save, refresh, and keep guessing and checking until it felt right. Today, you can write a quick, single-use tool that's a visual studio for designing animations. You can then configure some components and containers common in all apps, and explore different animations in real time, adjusting key properties, and getting it just right. Then, you can copy a highly detailed prompt (or export a skill containing all your animations) that captures your intent and direction with perfect clarity. Paste this into your terminal and your agent instantly implements it everywhere. To me, this is an improvement over the old world, and a better way to work in today's. I'm extremely excited to see the ways in which our ability to rapidly create software will shape how we design software tomorrow. Feedback, ideas, and critiques welcome!

joshpuckett

82,065 Aufrufe • vor 6 Monaten

This Chinese spokesperson blaming Philippines Coast Guard while China's own CG is a menace is like killer blaming the victim for getting into the path of the bullet. Make it make sense. Pathetic!

This Chinese spokesperson blaming Philippines Coast Guard while China's own CG is a menace is like killer blaming the victim for getting into the path of the bullet. Make it make sense. Pathetic!

Nguyen Thi hong

29,538 Aufrufe • vor 1 Jahr