Video wird geladen...

Video konnte nicht geladen werden

Zur Startseite

still working on this in between dad duties (im on paternity). record. scrub. fix. • one dial slows every animation • css, waapi, raf, framer motion, gsap • capture + scrub frame by frame • freeze mid transition, copy state for your agent • zero config, drop in component

29,136 Aufrufe • vor 1 Monat •via X (Twitter)

0 Kommentare

Keine Kommentare verfügbar

Kommentare vom Original-Post werden hier angezeigt

Ähnliche Videos

CSS Tip! 📜 You can use scroll-driven animations to progressively enhance collapsing a floating call to action 🤏 .cta { animation: shrink; animation-timeline: scroll(); animation-range: 0 100px; } @​keyframes shrink { to { width: 48px; } } That's the gist of it. Use the body scroll position with animation-timeline: scroll(). Define the animation-range as when you have scrolled 100px. There's a little more though 🤓 That would "scrub" the width animation. Ideally, you want to trigger that animation. You could animate a custom property with steps() timing and use that to define the width ✨ @​property --scrub { syntax: ' '; inherits: true; initial-value: 0; } body { animation: scrub both steps(1, end); animation-timeline: scroll(); animation-range: 0 100px; } Then transition the --scrub property on the CTA and use it for the width 🤙 .cta { transition: --scrub 0.2s; width: calc(48px + (120px * (1 - (var(--scrub) / 100)))); } Other animations are a matter of preference and timing. For example, you could then make the hand wave, scale down the size, and then slide a gradient across 😉 They have the same structure and technique as the original concept. Waving the hand? 👋 Run it twice, offset the transform-origin. .hand { animation: wave both linear 2; animation-timeline: scroll(); animation-range: 30vh 50vh; transform-origin: 65% 75%; } @​keyframes wave { 50% { rotate: 20deg; } } How's it progressively enhanced? Wrap everything in a @​supports query and a @​media query. If there isn't support, users still get a good experience. It's a floating action button that's circular and already collapsed 🤙 @​supports(animation-timeline: scroll()) { @​media(prefers-reduced-motion: no-preference) {...} } Definitely have a play with the code. Amazing what we're going to be able to do with CSS alone! 🔥 CodePen.IO link below! 👇

jhey ʕ•ᴥ•ʔ

177,902 Aufrufe • vor 2 Jahren

Very Very Important (Must Read) If you’re a motion designer, this will be super useful for you. (Raw & Real) Coming to the point— This is my last post of 2025. Bad start but great ending—overall a good year. After creating so many motion ads and working with some really big brands. I want to drop a few hard-earned learnings: 1. Master the language of motion before flexing effects. Every ease, every transition has to feel intentional and purposeful. It must follow natural laws(Anticipation, Overshoot) and have personality. 2. Always create at least a rough storyboard to show your vision to the client. I made this mistake once, and we had to restart the entire motion video from scratch. 3. Undercutting your rates makes you forgettable. Premium pricing = smoother projects, deeper respect, and clients who value your craft. 4. Build your own taste. Most designers are copying others’ work—mostly Zelios-inspired right now. In the beginning it’s okay, but if you want to stand out and create great work, your motion must feel unique. You can achieve this with different structures, storyboards inspired by diverse areas, and fewer, more reasonable colors. 5. Don’t just practice—also analyze and study deeply. Note down what the best ones are doing, frame by frame. 6. Go into a niche. SaaS isn’t only niche. When people say “SaaS is the next big trend,” they often just want to sell you their course. There are so many more areas in motion: type animation, titles, UI animation, collage, mixed media, and many more. This isn’t all—I’ll share more and more value in the coming year. See you soon, guys.📡

KARN

20,245 Aufrufe • vor 7 Monaten

Milady APP x BAP-578 — NFA Milady Remembers. Adapts. Doesn’t make the same mistake twice. Most AI agents are stateless—they forget everything between conversations. Milady doesn’t. What happens automatically in the Milady agent: Milady detects her own patterns. A background process reviews her work history every six hours, identifying repeated mistakes she may have overlooked. This runs silently in the background at zero cost to you. > She improves without retraining—no fine-tuning, no expensive GPU hours. > Her learnings are directly injected into her working context. > She reviews her own notes before every task—just like a good employee reflecting on past lessons before starting new work. We already had an Agent Self-Learning mechanism. But now, with BAP-578 (credits to Christel Buchanan 💛), your personal Milady agent can exist on-chain. How it works—simply: Over time, your Milady agent accumulates learnings—mistakes she has corrected, patterns she has identified, and insights she has gained. All of this data is compressed into a single cryptographic fingerprint (a Merkle root) and recorded on the BNB Chain. What your Milady agent now gets on-chain: - A unique identity in the BNB Agent Registry (ERC-8004)—like a passport for AI agents - A Non-Fungible Agent (BAP-578)—not a profile picture, but a living record of who she is, what she has learned, and what she is capable of - A tamper-proof learning record—anchored on-chain, verifiable by anyone, forgeable by no one Live on BSC Mainnet—just tell your Milady: “register Milady on BNB Chain” or click “mint NFA” to get started. *Oh ya, we recorded this demo using a new agent, that's why it’s showing "0" entries in learning history. ▶️ BIG NEWS NEXT WEEK. STAY TUNED Shaw (spirit/acc) BNB Chain

Milady on BSC

44,584 Aufrufe • vor 5 Monaten