正在加载视频...

视频加载失败

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,404 次观看 • 3 个月前 •via X (Twitter)

0 条评论

暂无评论

原始帖子的评论将显示在这里

相关视频

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,985 次观看 • 2 年前

this is pure f*cking treasure Netflix engineers posted 20 GitHub repos that turn your Opus 5.5 into a f*cking motion empire: built for Opus 5.5 1. claude-motion: taste, checks its own frames, sound written in code. the author built it for Opus 5.5 2. claude-motion-design: HTML, Playwright and ffmpeg, no Remotion. the demo was made on Opus 5.5 3. motion-graphics-skills: 13 skills for launch videos. the README tells you to run it on Opus 5.5 4. claude-remotion-skill: a Remotion editor from one prompt. captions, B-roll, sound 5. klik-anim-skill-creation: the laws of animation and camera, built on Opus 6. hyperframes-motion-reel-skill: a showreel cut to the beat at 120 BPM, on HyperFrames 7. product-launch-motion: a full launch film. voice-over, camera, color grade 8. animate: a short clip in one canvas file, storyboarded as it goes 9. motion-design-skills: timing, color, typography, logos, Remotion 10. hyperframes-student-kit: 14 skills and 406 motion graphics cards the engines these skills render with 11. hyperframes: HTML to MP4. the one almost everyone installs 12. remotion: video written in React 13. remotion skills: the official Remotion skills for your agent 14. GSAP: the timelines HyperFrames runs on. skills: npx skills add greensock/gsap-skills taste and everything around it 15. motion-design-skill: motion principles that work with any engine 16. awesome-motion-design-agent-skills: a map of GSAP, Remotion, Lottie and Rive skills 17. motion-graphics: B-roll built straight from your transcript 18. motion-dev-animations-skill: web animation on not video 19. motion: Motion itself, formerly Framer Motion 20. lottie-web: when you need Lottie, not MP4 the stack in one line: Opus 5.5 writes the code, a skill sets the timing and the camera, an engine renders the MP4. check each repo before you install. save this.

NO1ennn

459,964 次观看 • 6 天前

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 次观看 • 9 个月前