Video wird geladen...
Video konnte nicht geladen werden
View Transition powered drag n' drop! just drag events then swappin DOM, #CSS view transitions doin all the animation work (which it's GREAT AT) 🤯 that animated emoji don't miss a beat try it!
351,668 Aufrufe • vor 3 Jahren •via X (Twitter)
9 Kommentare
For folks reading along, here's how to keep other animations running during a view transition
Incredibly cool! View Transitions is the gift that keeps on giving
@maric_astro
Awesome! But I find it confusing to drop the item ON another item. It would be more clear if I dropped the item _between_ two items. Is that possible?
def possible!
ok I wasn't paying attention to view transitions before. I am now.
I love how you name things so much; it's crystal clear the intent is NOT to ship, and no docs needed! style="view-transition-name: yes-this-keeps-animating-during-morph"> 💯
Is there any article explaining how you use imports and CSS layers this way? Didn't even know it was possible before today. Is there a bundler equivalent of doing the same while importing CSS from JS files (I mean, applying a layer to the imported file)
Miriams for you covered with a full overview For bundlers, Sass has offered a feature very similar for a while, Stitches offers it for css-in-js and there's postcss and lightning CSS support as well
![View Transitions with CSS linear() to create a light flicker effect on theme change 💡 [data-theme='light']::view-transition-group(root) { animation-timing-function: var(--flicker); } jus' set a custom timing function on the default animation 👨🍳 bonus: drag switch ✨](https://image.24vids.com/tw-1984372822421225721/amplify_video_thumb/1984372745480667136/img/-oQA7wWfhp3dXAtu.jpg)
![CSS Tip! 🐳 You can add little details like this scale down on scroll effect with scroll-driven animations and some sticky positioning 🤙 section { animation: scale-down; animation-timeline: view(); animation-range: exit; } @keyframes scale-down { to { scale 0.8; } ] In this smaller example, you can lean into using the position to drive an animation that scales itself down as it leaves the viewport (Seen on the Apple Vision Pro site 🍏) The nice thing here is that if you don't have scroll-driven animations, the user still gets a good experience ✨ So how do you do it? There isn't much to it header { transform-origin: 50% 0%; animation: scale-down both ease-in; animation-timeline: view(); animation-range: exit; view-timeline: --header; } @keyframes scale-down { to { scale: 0.8 0.8; } } That's it. The layout makes use of position: sticky so that the element stays in the shot whilst you scroll the page. As it leaves the page, it scales down inside the 🫶 The other smol animation here is fading the overlay on the video out 😎 Real easy. You may notice the view-timeline you defined above for the 👀 header { view-timeline: --header; } You have a pseudoelement on the text content of the header that lives inside a header > section::before { background: hsl(0 0% 0% / 0.75); opacity: 1; animation: fade both linear; animation-timeline: --header; animation-range: exit-crossing 0% exit 0%; } @keyframes fade { to { opacity: 0; } } You use a slightly smaller range on this with exit-crossing to fade it out before you start the scale down animation 🤏 That's it! Thought this smaller example would be easier to grok for people 🙏 It's also covered with JavaScript if you really want it for your sites 🤙 CodePen.IO link below 👇](https://image.24vids.com/tw-1752479022674481373/ext_tw_video_thumb/1752475535978934272/pu/img/5naYIYo6vw_NbpbO.jpg)
