100% css 0% javascript Pretty cool that you can... run animations like this now off the main thread, was always a worry implementing a scroll animation knowing some users might see "jank" Safari and Firefox are sleeping far too long, scroll driven animations are awesomeshow more

Scroll-triggered animations are coming to Chrome early next year... (and we've been really excited about this one for a bit!) 🥳 Unlike scroll-driven animations (already in Chrome & Safari), this API introduces "timeline-trigger" and "animation-trigger" to start an animation within a specific range, rather than relying on the scroller completion *as* the animation timeline. I got nerd-sniped and wanted to try it out so I built this shape morphing demo to show how you can apply multiple animations to the same element over with different triggers. PRETTY COOL IMO! Bramus has a post with more info ⬇️show more

you can create a sticky navbar that morphs when... you scroll with pure CSS, no JS or animation libraries required 𝚑𝚎𝚊𝚍𝚎𝚛 { 𝚌𝚘𝚗𝚝𝚊𝚒𝚗𝚎𝚛-𝚝𝚢𝚙𝚎: 𝚜𝚌𝚛𝚘𝚕𝚕-𝚜𝚝𝚊𝚝𝚎; 𝚙𝚘𝚜𝚒𝚝𝚒𝚘𝚗: 𝚜𝚝𝚒𝚌𝚔𝚢; 𝚝𝚘𝚙: 𝟶; } @𝚌𝚘𝚗𝚝𝚊𝚒𝚗𝚎𝚛 𝚜𝚌𝚛𝚘𝚕𝚕-𝚜𝚝𝚊𝚝𝚎(𝚜𝚝𝚞𝚌𝚔: 𝚝𝚘𝚙) { .𝚗𝚊𝚟-𝚋𝚊𝚛 { 𝚖𝚊𝚡-𝚠𝚒𝚍𝚝𝚑: 𝟻𝟼𝚛𝚎𝚖; 𝚋𝚘𝚛𝚍𝚎𝚛-𝚛𝚊𝚍𝚒𝚞𝚜: 𝟶.𝟽𝟻𝚛𝚎𝚖; 𝚋𝚊𝚌𝚔𝚐𝚛𝚘𝚞𝚗𝚍: 𝚛𝚐𝚋(𝟸𝟻𝟻 𝟸𝟻𝟻 𝟸𝟻𝟻 / 𝟶.𝟿𝟸); } } the browser now knows when a sticky element is stuck, all triggered by one container query available only in chromium browsers only, no firefox or safari which is a shameshow more

🤩 I just learned a super cool trick! Do... you know how sometimes you want to record while you scroll on a website, like for a demo or something... But by using the mouse to scroll it turns out to be kinda janky and it doesn't look very good? No? Just me? 🤭 Well, I found out that if you paste this code in the console of your browser: ` setInterval(() => window.scrollBy(0, 4), 16); ` You can make the browser automatically scroll for you! And it looks super cool in the recording! 😎show more

Shine animations in CSS are actually simple to make.... .shine-container { position: relative; overflow: hidden; } .shine-container::after { content: ""; position: absolute; inset: 0; transform: translateX(-100%); background: linear-gradient( 90deg, transparent, rgba(255, 255, 255, 0.25), transparent ); animation: shine 1.5s infinite; } KEYframe Galaxy Studios shine { 100% { transform: translateX(100%); } } Now you have a reusable shine effect, that you can reuse in any container! If you found this useful, follow for more. ❤️show more

Over the past 10 days, I've been developing an... app called ICE Home Up. So far, I've added more than 20 features, created tons of customizable animation parameters, and experimented with a wide variety of animation effects. One of my most exciting creations is something I call the "Scroll Animation." As we all know, most smartphone app-opening animations today rely on proportional scaling. But I've taken a different approach by combining proportional scaling with a scroll-like unfolding effect. As an app window expands, it also unfolds naturally and smoothly, creating a much more seamless, elegant, and fluid visual experience. The result feels incredibly satisfying. I've honestly become a little obsessed with studying all these tiny animation details. I'll show you these animations in action when I get the chance. For now, here's a first look at the ICE Home Up interface. As you can see, it's become quite complex, with tons of parameters that allow for incredibly precise adjustments. I'm still experimenting, refining, and exploring what's possible. Once I've fully figured everything out and made the app stable and polished enough, I might eventually share ICE Home Up with everyone, so more Samsung users can experience these new animation effects.show more

The gold standard fluid interactions on iOS are built... using in-process client animations (like SwiftUI does it) and not render-server animations (like CoreAnimation does it). This is common knowledge inside of Apple’s UI framework and system experience teams. A close inspection of iOS’s evolution reveals the gradual upgrading of system experiences written using render-server animations (that often disable user interaction) with ones using client animations (that are interruptible and interactive). The app switcher for iPhone X, the Dynamic Island, and Liquid Glass bars are prime examples of this trend. The other thing that makes these experiences feel so fluid is their use of spring animations that preserve velocity, rather than Bézier curve easing functions. To get velocity preservation, you need to be able to interrupt a spring animation and retarget it or drive it with a gesture. That’s a lot easier to do when the animation is running in the same process as the event handling. When we were first pitching SwiftUI, two of our go-to demos were a recreation of the iOS 9 navigation and Home Screen interactions which were fully interactive and interruptible, at a time when the actual implementations of those experiences in the OS disabled user interaction and ran server-side animations. CoreAnimation is great and the framework does much more than animation. You can build a fine app using its server-side animations. But if your UI framework can’t do efficient main thread client animations, there’s a ceiling to the quality of the experience your app can provide.show more

Design Engineering Tip: Most UI animations are built for... a single uninterrupted transition. Real users might reverse direction before the animation finishes. Use a spring transition that preserves the element’s current velocity instead of restarting from zero. This keeps rapid hover, press, and state changes smooth and responsive. transition={{ type: "spring", stiffness: 520, damping: 38, }}show more

THIS SITE COST AROUND $12 IN CREDITS TO BUILD.... STUDIOS QUOTE $35,000 FOR THE SAME THING. What's on screen isn't a basic landing page. It's a fully animated, scroll-driven site, generated end to end in one agentic session with Claude Code + Higgsfield. What's actually on the page: → Cinematic motion clips pulled from 30+ generative models → Scroll animations written automatically - zero hand-coded keyframes → 6 cinematic effects baked in with no config: film grain, particles, vignette, glass cards, color tints, scroll pacing Scroll the demo and one question won't go away: did Claude really assemble all of this in a single pass? For boutique studios billing $100-149/hr, that question lands like a verdict. What it normally takes: → A designer, a motion artist, and a developer → Weeks of handoffs between them → 6 systems wired by hand - GSAP ScrollTrigger, Lenis smooth-scroll, frame extraction, asset optimization, layout, copy That pipeline was the moat. It's what justified the invoice. Here's the part studios and their clients won't enjoy hearing. The price gap: → Boutique agency build: $6,000-$35,000+ → Industry average project: ~$5,280 → Delivery cost: a Claude subscription + a few dollars of Higgsfield credits → Timeline: weeks of production → a single session One operator can now run all six systems in one pass and ship a working site - without touching a frame extractor or writing a CSS keyframe by hand. Full breakdown of how it's built in the article below. Save it & read today 👇show more

Known this for a while but now people are... finding out so might aswell tweet, you can run up all mountains and edges if you swing the chainsaw around 50 times and drop it and pick it back up 5 times, Like and RT so your friends can seeshow more

Seeing this in the subway station was so cool!... 🤩but what was even more awesome was that we just happened to see this little boy and his dad copying my pose 🥺 This is a perfect example that YOU CAN DO IT TOO 🫵🏼 This is why I do what I do, and it’s so a special!☺️show more

STUDIOS QUOTE $35,000 FOR THIS WEBSITE. A FULLY ANIMATED,... SCROLL-DRIVEN BUILD - CINEMATIC CLIPS, FILM GRAIN, GLASS CARDS - SHIPPED IN ONE SESSION FOR $12. Scroll it and one question won't leave: did an AI really assemble all of this in a single pass? For studios quoting $35,000 and billing $100-149/hr, that question lands like a verdict. Here's what the page actually runs: → Motion clips generated from 30+ models - not stock, not hand-shot → Scroll animations written automatically - zero hand-coded keyframes → Six cinematic effects baked in with no config: film grain, particles, vignette, glass cards, color tints, scroll pacing What that used to require: → A designer, a motion artist, and a developer → Weeks of handoffs → Six systems wired by hand - GSAP ScrollTrigger, Lenis, frame extraction, asset optimization, layout, copy That pipeline was the moat. It justified the invoice. It just collapsed into Claude Code + Higgsfield running in one pass. The gap nobody wants to say out loud: → Agency build: $6,000-$35,000+ → Real cost now: a Claude sub + a few dollars of credits → Timeline: weeks → a single session Follow me + reply "web-site" to this post and I will send you the step-by-step Playbook 👇show more

I got sick near the end of making this... animation can you tell? lol That aside, though, I think action #animations are becoming my bread and butter. It's just a lot of fun watching your characters come to life in this way y'know?show more

HE BUILT A $35,000-TIER ANIMATED WEBSITE WITH CLAUDE CODE... + HIGGSFIELD - FOR A SUBSCRIPTION AND A FEW DOLLARS OF CREDITS What’s on screen isn’t a basic landing page. It’s a fully animated, scroll-driven site generated end to end in one agentic session. What’s actually on the page: → Cinematic motion clips pulled from 30+ generative models → Scroll animations written automatically - no hand-coded keyframes → 6 cinematic effects baked in with zero config: film grain, particles, vignette, glass cards, color tints, scroll pacing Scrolling the demo is one question: did Claude really assemble all of this? For boutique studios billing $100-149/hr, that lands like a verdict. What it normally takes: → A designer, a motion artist, and a developer → Weeks of handoffs between them → 6 separate systems wired by hand - GSAP ScrollTrigger, Lenis smooth-scroll, frame extraction, asset optimization, layout, copy That pipeline was the moat. It’s what justified the invoice. Here’s the part studios and their clients won’t enjoy hearing. The price gap: → Boutique agency build: $6,000-$35,000+ → Industry average project: ~$5,280 → Your cost: a Claude subscription + a few dollars of Higgsfield credits → Timeline: weeks of production → a single session One creator can now run all six systems in one pass and ship a working site - without touching a frame extractor or writing a CSS keyframe by hand. Full breakdown of how it was built in the article below. Save it & read today 👇show more

A SOLO CREATOR JUST SHIPPED A $35,000-TIER ANIMATED SITE... IN ONE WEEKEND - WITH CLAUDE CODE + HIGGSFIELD, FOR THE COST OF A SUBSCRIPTION. What you're looking at isn't a template. It's a fully animated, scroll-driven site, generated end to end in a single agentic session. What's actually on the page: → Cinematic motion clips pulled from 30+ generative models → Scroll animations written automatically - not a single hand-coded keyframe → 6 cinematic effects baked in with zero config: film grain, particles, vignette, glass cards, color tints, scroll pacing Scroll the demo and one question keeps surfacing: a person didn't build this by hand… did they? For studios billing $100-149/hr, that question lands like a verdict. What this normally takes: → A designer, a motion artist, and a developer → Weeks of handoffs between all three → 6 systems wired by hand - GSAP ScrollTrigger, Lenis smooth-scroll, frame extraction, asset optimization, layout, copy That pipeline was the moat. It's what justified the invoice. Here's the part the agency won't put in its pitch deck. The price gap: → Boutique agency build: $6,000-$35,000+ → Industry average project: ~$5,280 → Your cost: a Claude subscription + a few dollars of Higgsfield credits → Timeline: weeks of production → one session One operator now runs all six systems in a single pass and ships a working site - without opening a frame extractor or writing one CSS keyframe. Full breakdown of how it's built in the article below. Save it & read today 👇show more

huh i never knew bugs can be this big,... i guess they had it coming for calling him a pest (wait if hes big then are we the real bugs?) awesome animation from the epic MsPaintGTS go check em out they got pretty cool art things :3 (alt has no text if you freaks like the audio)show more

⚽ Day 44 of building my soccer/football game solo... in Unreal Engine. Tonight, we solved an animation bug that was occuring when blending animations together. Can you spot the difference between the two animation clips (right drag back versus left drag back? 🐛BUG: All animations rotated the player mesh (character body), but the capsule underneath (invisible box) never turned at all. 🎞️At the end of the animation, you'd see the player facing the direction where the animation begun on frame 0, then flick to where I was moving the left analog stick. This was resolved with a tool I built which moves the rotation to the invisible box instead. The same animations play, but now the game knows that the character's capsule has turned with an animation. #indiedev #gamedev #soccer #football #unrealengineshow more

On the left is the default animation of the... Samsung One UI 9. On the right is a standard animation that I designed（Ice Home Up）. Over the past few days, I've made extensive modifications and improvements to Samsung's system animations. As you can see, the opening and closing animations now feel much lighter, smoother, and more natural. The entire transition is more fluid, with greater elasticity and a stronger sense of depth. Compared to Samsung's official animations, which often feel somewhat rigid and abrupt, I wanted to create something that truly feels alive and flows naturally. I've also made some special improvements to background blur. I want to prove through my own work that Samsung phones are absolutely capable of delivering perfectly smooth animations even with background blur enabled. Previously, Samsung's Home Up team suggested that background blur could increase system load, causing lag or overheating. But based on my own testing, I find that explanation highly questionable. With proper design and optimization, background blur and smooth animations can absolutely coexist. What's more, my implementation supports progressive background blur with highly customizable parameters. You can freely adjust the blur intensity, transition behavior, and various other details to create exactly the visual experience you want. What surprised me the most is that once you actually start designing animations yourself, studying every frame, experimenting with motion curves, and fine-tuning countless parameters, you begin to realize just how much room Samsung still has for improvement. I used to simply think Samsung's animations weren't good enough. But after working on them myself, I'm increasingly convinced that Samsung's software team simply hasn't put enough effort into animation design. There are so many effects that could be more refined, more natural, and more fluid. Yet Samsung seems unwilling to seriously explore these possibilities. And that's exactly why I keep working on these animations. I want to prove that Samsung phones are capable of delivering animations far better than what we have today.show more

THIS GUY JUST REBUILT A $35,000 ANIMATED SITE FOR... $12. IF YOU RUN A WEB STUDIO, YOU SHOULD PROBABLY KEEP SCROLLING. Every agency billing $100-149/hr is selling you five departments wearing one invoice. Here’s each one - collapsed into a single agentic session. LAYER 1 - THE CONCEPT ROOM (Claude) Reads the brief, pulls references, and scripts the scroll: what the visitor feels at second 3, second 15, second 40. → Used to be a strategist and a wall of mood boards. Now it’s a conversation. LAYER 2 - THE MOTION STUDIO (Higgsfield) Cinematic clips from 30+ generative models - hero shots, transitions, ambient loops - all matched to the story from Layer 1. → Used to be a motion artist on retainer. Now it’s a prompt. LAYER 3 - THE DEV TEAM (Claude Code) Scaffolds the site, writes the GSAP ScrollTrigger timelines and Lenis smooth-scroll, extracts frames, optimizes every asset. → A full scroll-driven build with zero hand-coded keyframes. LAYER 4 - THE DESIGN DEPT (baked-in cinematic layer) Six effects, zero config: film grain, particles, vignette, glass cards, color tints, scroll pacing. → The polish that justified the invoice - now it ships by default. LAYER 5 - THE QA PASS (Claude) Checks load speed, mobile breakpoints, and whether the scroll actually lands - then rewrites whatever doesn’t. → Used to be a client call and a revision cycle. Now it’s one more turn in the same session. Five departments. One operator. One pass. A strategist, a motion artist, a developer, a designer, and a QA lead - weeks of handoffs - now run in a single session. For a Claude subscription and a few dollars of Higgsfield credits. The studio was never selling talent. It was selling overhead. And the overhead just became five layers. Follow me, reply “website” to this post and I will send you the step-by-step Playbook 👇show more

Pixel art was MADE to be viewed on a... CRT TV. The blooming, scanlines, etc are part of the image that smooths it out, blends colors together, and gets rid of the harsh edges. The original game artists created everything with that analog distortion in mind, so the raw pixels aren't necessarily what they intended you to see. Don't get me wrong, raw pixels can look cool too! And if you like that look, then by all means go for it. But it's worth trying a nice CRT shader on them to see if you might like it even better!show more