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.

#CSS only full URL page navigation with View Transitions - 5 minute prototype - 1 meta tag - a few lines of CSS - Open Props Behind a flag in Canary: chrome://flags/#view-transition-on-navigation It's not finished yet, but there's really rad opportunities already available 🤓

Adam Argyle

58,600 subscribers

30,454 Aufrufe • vor 3 Jahren •via X (Twitter)

Wissenschaft & Technologie Bildung Kunst #CSS #view

Anya Rossi• Live Now

Private livecam show

10 Kommentare

Profilbild von Adam Argyle

Adam Argylevor 3 Jahren

new page scales += fades in old page quickly scales += fades out that's it. and there's way more customization you can do, this is basic!

Profilbild von 🍊 KIRUPA

🍊 KIRUPAvor 3 Jahren

Really cool. Is this for multi-page navigation? 🔥

Profilbild von Adam Argyle

Adam Argylevor 3 Jahren

yep!

Profilbild von Dave Geddes

Dave Geddesvor 3 Jahren

this is going to be super cool

Profilbild von Alex Casillas —アレックス

Alex Casillas —アレックスvor 3 Jahren

WOW 🤩 This is really cool ❤️

Profilbild von Luky - A$AP Luky

Luky - A$AP Lukyvor 3 Jahren

Damn! Looking stellar! I need to check this out with care!

Profilbild von Craig Webb

Craig Webbvor 3 Jahren

Thank you Adam for all you do

Profilbild von real007

real007vor 3 Jahren

How come it's taking 3.4s for the view to change when the user clicks on some things?

Profilbild von Adam Argyle

Adam Argylevor 3 Jahren

@MrH26750794 They're still working on things

Profilbild von César Gómez

César Gómezvor 3 Jahren

@SaveToNotion #thread #css #animation #viewtransitionsapi

Ähnliche Videos

Can you believe these slides are full page loads to completely new HTML pages‽ #smashingconf ^ try it with Canary and enable the flag chrome://flags/#view-transition-on-navigation what. rad. tech. 🤯

Can you believe these slides are full page loads to completely new HTML pages‽ #smashingconf ^ try it with Canary and enable the flag chrome://flags/#view-transition-on-navigation what. rad. tech. 🤯

Adam Argyle

456,950 Aufrufe • vor 3 Jahren

View Transitions now work almost perfectly in Safari Tech Preview. In this recording, you see a mobile view of What PWA Can Do Today to simulate what it would look like on iOS once support also lands there. The "flip" animation doesn't work as expected yet since the page is flipped in the wrong direction on a back navigation. Another issue is the scroll positions of the views when the page is not scrolled to the top. In Chrome this is taken care of by the "scroll" option of the Navigation API which is not yet functional in Safari TP. More details in the upcoming edition of Modern Web Weekly. Subscribe link 👇

View Transitions now work almost perfectly in Safari Tech Preview. In this recording, you see a mobile view of What PWA Can Do Today to simulate what it would look like on iOS once support also lands there. The "flip" animation doesn't work as expected yet since the page is flipped in the wrong direction on a back navigation. Another issue is the scroll positions of the views when the page is not scrolled to the top. In Chrome this is taken care of by the "scroll" option of the Navigation API which is not yet functional in Safari TP. More details in the upcoming edition of Modern Web Weekly. Subscribe link 👇

Danny Moerkerke

38,805 Aufrufe • vor 2 Jahren

Future CSS && UI Tip! ⚡️ You could use View Transitions to create those word carousel-type effects 😍 span:nth-of-type(2) { view-transition-name: swap; } ::view-transition-old(swap) { animation-name: slide-down; } ::view-transition-new(swap) { animation-name: slide-up; } How To 1. Create a paragraph split into spans 2. Set an interval in JavaScript that swaps out the accent word 3. Set a view-transition-name on the accent word and the last span Then you've got a responsive word carousel with View Transitions 🤙 Words and inspiration from work louder®'s home page. Had to see if this API could do it and it ended up raising a bug for the web platform! 💪 CodePen.IO link below! 👇

Future CSS && UI Tip! ⚡️ You could use View Transitions to create those word carousel-type effects 😍 span:nth-of-type(2) { view-transition-name: swap; } ::view-transition-old(swap) { animation-name: slide-down; } ::view-transition-new(swap) { animation-name: slide-up; } How To 1. Create a paragraph split into spans 2. Set an interval in JavaScript that swaps out the accent word 3. Set a view-transition-name on the accent word and the last span Then you've got a responsive word carousel with View Transitions 🤙 Words and inspiration from work louder®'s home page. Had to see if this API could do it and it ended up raising a bug for the web platform! 💪 CodePen.IO link below! 👇

jhey ʕ•ᴥ•ʔ

230,229 Aufrufe • vor 3 Jahren

A visual comparison of HTML-in-Canvas vs rasterizing DOM to a canvas texture (side-by-side below, compare average capture times) Existing approaches to pull web content into canvas are slow and lossy: - Animations glitch, or don't play at all - CSS replication is imprecise - Clogs up the main thread, other animations lag HTML-in-Canvas (texElementImage2D) lets the browser's own compositor map CSS layouts, animations, and transitions precisely into canvas/WebGL textures — one native call instead of thousands of JS style reads. It's currently available behind an experimental Chrome flag. Really cool, and I can't wait for it to become mainstream.

A visual comparison of HTML-in-Canvas vs rasterizing DOM to a canvas texture (side-by-side below, compare average capture times) Existing approaches to pull web content into canvas are slow and lossy: - Animations glitch, or don't play at all - CSS replication is imprecise - Clogs up the main thread, other animations lag HTML-in-Canvas (texElementImage2D) lets the browser's own compositor map CSS layouts, animations, and transitions precisely into canvas/WebGL textures — one native call instead of thousands of JS style reads. It's currently available behind an experimental Chrome flag. Really cool, and I can't wait for it to become mainstream.

Robin

46,604 Aufrufe • vor 5 Monaten

CSS Trick 📜 You can trigger text highlights on scroll with scroll-driven animations 😎 mark { animation: highlight; animation-timeline: view(); } @keyframes highlight { to { --lit: 1; }} mark span { background-position: calc(var(--lit) * -110%) 0; transition: background 1s; } The trick is using a scroll-driven animation to flip a custom property on a element 🎚️ You flip the value between 0 and 1, and that transitions the background position of the element mark { --lit: 0; animation: highlight steps(1) both; animation-timeline: view(); animation-range: entry 100% cover 10%; } The background has to be applied on a child of the mark to see the change in the custom property 👀 mark span { background: linear-gradient( 120deg, yellow 50%, transparent 50%) 110% 0 / 220% 100% no-repeat; background-position: calc(var(--lit) * 110%) 0; transition: background-position 1s; } The trick is to set the background-size so that it's bigger than the element and then split the background-color in the middle using a linear-gradient 🤙 And the property flips fills in the color 🫶 That's it! If there isn't support for scroll-driven animations, use JavaScript's IntersectionObserver API. The code for this is in the demo 😎 Cool example of using CSS as an IntersectionObserver! CodePen.IO link below 👇

CSS Trick 📜 You can trigger text highlights on scroll with scroll-driven animations 😎 mark { animation: highlight; animation-timeline: view(); } @keyframes highlight { to { --lit: 1; }} mark span { background-position: calc(var(--lit) * -110%) 0; transition: background 1s; } The trick is using a scroll-driven animation to flip a custom property on a element 🎚️ You flip the value between 0 and 1, and that transitions the background position of the element mark { --lit: 0; animation: highlight steps(1) both; animation-timeline: view(); animation-range: entry 100% cover 10%; } The background has to be applied on a child of the mark to see the change in the custom property 👀 mark span { background: linear-gradient( 120deg, yellow 50%, transparent 50%) 110% 0 / 220% 100% no-repeat; background-position: calc(var(--lit) * 110%) 0; transition: background-position 1s; } The trick is to set the background-size so that it's bigger than the element and then split the background-color in the middle using a linear-gradient 🤙 And the property flips fills in the color 🫶 That's it! If there isn't support for scroll-driven animations, use JavaScript's IntersectionObserver API. The code for this is in the demo 😎 Cool example of using CSS as an IntersectionObserver! CodePen.IO link below 👇

jhey ʕ•ᴥ•ʔ

208,411 Aufrufe • vor 2 Jahren

Future CSS Tip! 📜 You can create these landing page effects with CSS scroll-driven animations and zero JavaScript 🔥 Blurred text on exit? 👀 @keyframes fade { to { opacity: 0; filter: blur(2rem); } } h2 { animation: fade; animation-timeline: view(); animation-range: cover 40% cover 85%; } Lots of treats in this one! ✨ How about the circular shape on scroll? That's an animated clip-path 😮 @keyframes unclip { to { clip-path: ellipse(220% 200% at 50% 175%); } } Create a clip-path with a large size that's offset vertically. On scroll, animate it in ⭐️ .content { clip-path: ellipse(220% 200% at 50% 300%); animation: unclip both linear; animation-timeline: --article; animation-range: entry; } That second section combines unclipping with scaling down an image at the same time 🤓 Using the same animation-timeline 🫶 @keyframes scale-down { 0% { scale: 5; } } img { animation: scale-down; animation-timeline: --article; 👈 animation-range: entry; } Every section gets a scoped view-timeline of --article. That's scoped so we can reuse it for all the animations we need 🙌 article { view-timeline-name: --article; } Honestly, the more you play with this stuff, the more tricks you will find 💯 And it also makes you think "Wow! CSS can do this!" As always, CodePen.IO link below! 👇

Future CSS Tip! 📜 You can create these landing page effects with CSS scroll-driven animations and zero JavaScript 🔥 Blurred text on exit? 👀 @keyframes fade { to { opacity: 0; filter: blur(2rem); } } h2 { animation: fade; animation-timeline: view(); animation-range: cover 40% cover 85%; } Lots of treats in this one! ✨ How about the circular shape on scroll? That's an animated clip-path 😮 @keyframes unclip { to { clip-path: ellipse(220% 200% at 50% 175%); } } Create a clip-path with a large size that's offset vertically. On scroll, animate it in ⭐️ .content { clip-path: ellipse(220% 200% at 50% 300%); animation: unclip both linear; animation-timeline: --article; animation-range: entry; } That second section combines unclipping with scaling down an image at the same time 🤓 Using the same animation-timeline 🫶 @keyframes scale-down { 0% { scale: 5; } } img { animation: scale-down; animation-timeline: --article; 👈 animation-range: entry; } Every section gets a scoped view-timeline of --article. That's scoped so we can reuse it for all the animations we need 🙌 article { view-timeline-name: --article; } Honestly, the more you play with this stuff, the more tricks you will find 💯 And it also makes you think "Wow! CSS can do this!" As always, CodePen.IO link below! 👇

jhey ʕ•ᴥ•ʔ

426,640 Aufrufe • vor 2 Jahren

Future CSS Tip! 📜 You can use scroll-driven animations like JavaScript's IntersectionObserver to animate highlights ✏️ mark { animation-name: highlight; animation-timeline: view(); } @keyframes highlight { to { --light: 1; }} mark span { background-position: calc((1 - var(--light)) * 110%) 0; transition: background 1s; } The "trick" is to animate a custom property with a scroll-driven animation. These will flip in a binary fashion if not using @property. And that's what you want. You can then use that value to set the style on the highlights ( ). What you see is the transition of a background-position to get the multi-line highlight. A technique posted on this account before 🤙 Added bonuses: – Could use another element for the author initials of a highlight and animate that in too. Here the pseudoelement is being used. But another accessible span would do the trick. – Highlight color is scoped inline via hue. – View transition theme switch for a bonus that looks like a triangle. Been messing with Vercel docs so was the easiest thing to go with 😅 CodePen.IO link below! 👇

Future CSS Tip! 📜 You can use scroll-driven animations like JavaScript's IntersectionObserver to animate highlights ✏️ mark { animation-name: highlight; animation-timeline: view(); } @keyframes highlight { to { --light: 1; }} mark span { background-position: calc((1 - var(--light)) * 110%) 0; transition: background 1s; } The "trick" is to animate a custom property with a scroll-driven animation. These will flip in a binary fashion if not using @property. And that's what you want. You can then use that value to set the style on the highlights ( ). What you see is the transition of a background-position to get the multi-line highlight. A technique posted on this account before 🤙 Added bonuses: – Could use another element for the author initials of a highlight and animate that in too. Here the pseudoelement is being used. But another accessible span would do the trick. – Highlight color is scoped inline via hue. – View transition theme switch for a bonus that looks like a triangle. Been messing with Vercel docs so was the easiest thing to go with 😅 CodePen.IO link below! 👇

jhey ʕ•ᴥ•ʔ

257,631 Aufrufe • vor 2 Jahren

CSS Trick 🤙 You can use scroll-driven animations on the inline axis to create list animations like in these cards 🫶 article { animation: vibe; animation-timeline: view(inline); animation-range: cover 40% cover 60%; } @keyframes vibe { 50% { scale: 1; filter: grayscale(0); }} Here you use a view() timeline with the inline axis set inside the function. This means you can hook into the horizontal scroll position of an element inside its scroller 🙌 In this demo, you set a default smaller scale and make each card grayscale 🤏 article { scale: 0.8; filter: grayscale(1); } Then the animation happens as each card enters from the right at 0% and leaves to the left at 100% 🎞️ 50% is the halfway point and in your keyframes you make each card grow and saturate at that point before returning to its original state ✨ scroll-snap provides a nice look-and-feel here and on mobile 🫰 It's really as straightforward as that but made so much easier with a few lines of CSS 💙 For the parallax effect, you can animate a background-position on the card or the object-position on an img depending on what you go with 🤙 Lastly, you can use this today with progressive enhancement by wrapping your scroll-driven animation code in @supports and @media ⚡️ Users without support still get a decent experience! CodePen.IO link below! 👇

CSS Trick 🤙 You can use scroll-driven animations on the inline axis to create list animations like in these cards 🫶 article { animation: vibe; animation-timeline: view(inline); animation-range: cover 40% cover 60%; } @keyframes vibe { 50% { scale: 1; filter: grayscale(0); }} Here you use a view() timeline with the inline axis set inside the function. This means you can hook into the horizontal scroll position of an element inside its scroller 🙌 In this demo, you set a default smaller scale and make each card grayscale 🤏 article { scale: 0.8; filter: grayscale(1); } Then the animation happens as each card enters from the right at 0% and leaves to the left at 100% 🎞️ 50% is the halfway point and in your keyframes you make each card grow and saturate at that point before returning to its original state ✨ scroll-snap provides a nice look-and-feel here and on mobile 🫰 It's really as straightforward as that but made so much easier with a few lines of CSS 💙 For the parallax effect, you can animate a background-position on the card or the object-position on an img depending on what you go with 🤙 Lastly, you can use this today with progressive enhancement by wrapping your scroll-driven animation code in @supports and @media ⚡️ Users without support still get a decent experience! CodePen.IO link below! 👇

jhey ʕ•ᴥ•ʔ

465,403 Aufrufe • vor 2 Jahren

We are seeing lots of examples of FSD doing really well in the Netherlands, and that’s great. But from my own and my friends’ experience, I know that despite it doing great most of the time, it makes mistakes every now and then. I’d love for these to be shared too so we get a realistic view of EU FSD. Out of the 4 instances I experienced, I was only recording during one - and it was the most serious. The car turned left onto Wibautstraat, a big through-traffic street in Adam East. It then did something really weird: in the flow of traffic after a green light, it suddenly stopped in the middle of a crossing on the right side of the right lane (but blocking traffic from behind), despite the navigation directing it to continue on Wibautstraat. 🤷‍♂️

We are seeing lots of examples of FSD doing really well in the Netherlands, and that’s great. But from my own and my friends’ experience, I know that despite it doing great most of the time, it makes mistakes every now and then. I’d love for these to be shared too so we get a realistic view of EU FSD. Out of the 4 instances I experienced, I was only recording during one - and it was the most serious. The car turned left onto Wibautstraat, a big through-traffic street in Adam East. It then did something really weird: in the flow of traffic after a green light, it suddenly stopped in the middle of a crossing on the right side of the right lane (but blocking traffic from behind), despite the navigation directing it to continue on Wibautstraat. 🤷‍♂️

Thijs van Schadewijk

30,791 Aufrufe • vor 4 Monaten

CSS in 2024 🤯 You can create a range slider with updating value tooltip and color changing track without using any JavaScript 🤯 ::-webkit-slider-thumb{ view-timeline: --thumb inline; } Scroll animation on the slider thumb that animates a number between the "min" and "max" of the range 😅 @property --value { syntax: ' '; } @keyframes sync { to { --value: 100; }} Tie that up to the contain animation-range ⚡️ .control { animation: sync both linear reverse; animation-timeline: --thumb; animation-range: contain; } Hoist the view timeline so the tooltip can use the value too! :root { timeline-scope: --thumb; } Then use it in the counter which goes in the tooltip 😇 .tooltip { counter-reset: val var(--value); } .tooltip::after { content: counter(val); } Then the accent color is based on the value too 🎨 [type=range] { accent-color: hsl(var(--value) 90% 65%); } The magic from the quoted post is using anchor positioning on the range thumb to position that tooltip 👏 Never thought of that when working on the spec for this API. This API lets you tether elements to other elements. Using the pseudo is a clever move! ::-webkit-slider-thumb { anchor-name: --thumb; } .tooltip { position: absolute; anchor-default: --thumb; left: anchor(50%); bottom: calc(anchor(top) + 25%); } The last piece is the little bounce transition... OK. I used a line or two of JavaScript for that 🙏😬 const updateDelta = ({ movementX }) => { document.documentElement.style.setProperty('--delta-x', movementX) } document.body.addEventListener('pointermove', updateDelta) But only so you can pass the movement delta to CSS and then reset the position with linear() to get that bouncy transition 😎 .hint { rotate: calc(clamp(-60, var(--delta-x) * -1, 60) * 1deg); transition: rotate 1s linear( 0, 0.2178 2.1%, 1.1144 8.49%, ... ); } Should probably do a video on this one. Lots of little tricks to break down with it for sure! 💯 As always, any questions, let me know! Also, this one only works in Chrome Canary with the Experimental Web Platform Features flag enabled ✅ This one almost feels like rocket science ha 🚀 CodePen.IO link below! 👇

CSS in 2024 🤯 You can create a range slider with updating value tooltip and color changing track without using any JavaScript 🤯 ::-webkit-slider-thumb{ view-timeline: --thumb inline; } Scroll animation on the slider thumb that animates a number between the "min" and "max" of the range 😅 @property --value { syntax: ' '; } @keyframes sync { to { --value: 100; }} Tie that up to the contain animation-range ⚡️ .control { animation: sync both linear reverse; animation-timeline: --thumb; animation-range: contain; } Hoist the view timeline so the tooltip can use the value too! :root { timeline-scope: --thumb; } Then use it in the counter which goes in the tooltip 😇 .tooltip { counter-reset: val var(--value); } .tooltip::after { content: counter(val); } Then the accent color is based on the value too 🎨 [type=range] { accent-color: hsl(var(--value) 90% 65%); } The magic from the quoted post is using anchor positioning on the range thumb to position that tooltip 👏 Never thought of that when working on the spec for this API. This API lets you tether elements to other elements. Using the pseudo is a clever move! ::-webkit-slider-thumb { anchor-name: --thumb; } .tooltip { position: absolute; anchor-default: --thumb; left: anchor(50%); bottom: calc(anchor(top) + 25%); } The last piece is the little bounce transition... OK. I used a line or two of JavaScript for that 🙏😬 const updateDelta = ({ movementX }) => { document.documentElement.style.setProperty('--delta-x', movementX) } document.body.addEventListener('pointermove', updateDelta) But only so you can pass the movement delta to CSS and then reset the position with linear() to get that bouncy transition 😎 .hint { rotate: calc(clamp(-60, var(--delta-x) * -1, 60) * 1deg); transition: rotate 1s linear( 0, 0.2178 2.1%, 1.1144 8.49%, ... ); } Should probably do a video on this one. Lots of little tricks to break down with it for sure! 💯 As always, any questions, let me know! Also, this one only works in Chrome Canary with the Experimental Web Platform Features flag enabled ✅ This one almost feels like rocket science ha 🚀 CodePen.IO link below! 👇

jhey ʕ•ᴥ•ʔ

251,867 Aufrufe • vor 2 Jahren

$Future CSS Tip! 🍏 You could create those Apple-style dynamic CTA reveals with container style queries and scroll-driven animations with zero JavaScript 👀 (Sticking to the #AppleEvent theme) .cta { animation: activate both, activate reverse; animation-timeline: --section, view(); animation-range: entry, cover 50%; } keyframes activate { 0% { --active: 0; } 100% { --active: 1; } } @ container style(--active: 1) { .cta__bloom { scale: 0.99; transition: scale 0.5s var(--back); /* 👈 linear() */ } .cta a { scale: 1; grid-template-columns: var(--content-size, auto) 36px; transition: scale 0.2s 0s, grid-template-columns 0.5s 0.6s var(--elastic); } } There's a fair bit of code here 🤯 But, the idea is this... 1. Use a scroll-driven animation scoped to each section for each CTA to change a custom property value (--activate) between 1 and 0. 2. Use a container style query to dictate the transition sequence for each moving part making use of transition-delay. 3. Make use of linear() easing to get the right effect ⚡️ It's wild to put all these APIs together and see what's possible. There are likely some spots to tidy this up 💯 These are powerful combinations for sure though! 💪 CodePen.IO link below! 👇$

Future CSS Tip! 🍏 You could create those Apple-style dynamic CTA reveals with container style queries and scroll-driven animations with zero JavaScript 👀 (Sticking to the #AppleEvent theme) .cta { animation: activate both, activate reverse; animation-timeline: --section, view(); animation-range: entry, cover 50%; } keyframes activate { 0% { --active: 0; } 100% { --active: 1; } } @ container style(--active: 1) { .cta__bloom { scale: 0.99; transition: scale 0.5s var(--back); /* 👈 linear() */ } .cta a { scale: 1; grid-template-columns: var(--content-size, auto) 36px; transition: scale 0.2s 0s, grid-template-columns 0.5s 0.6s var(--elastic); } } There's a fair bit of code here 🤯 But, the idea is this... 1. Use a scroll-driven animation scoped to each section for each CTA to change a custom property value (--activate) between 1 and 0. 2. Use a container style query to dictate the transition sequence for each moving part making use of transition-delay. 3. Make use of linear() easing to get the right effect ⚡️ It's wild to put all these APIs together and see what's possible. There are likely some spots to tidy this up 💯 These are powerful combinations for sure though! 💪 CodePen.IO link below! 👇

jhey ʕ•ᴥ•ʔ

180,875 Aufrufe • vor 3 Jahren

Future CSS Tip! 🍏 You can create this Apple-style photo scroller by combining CSS scroll-driven animations and CSS scroll-snap 😍 Peep those changing captions 👀 No JS! img { animation: highlight both linear; animation-timeline: view(inline); 👈 Horizontal animation-range: cover 0% cover 50%; 👈 Finish } @ keyframes highlight { 50% { translate: 0 0; scale: var(--starting-scale); 👈 props opacity: var(--starting-opacity); 👈 } 100% { translate: 0 0; scale: 1; opacity: 1; } } Without the animation support, you get a standard unordered list containing some s 🤙 How do we swap the captions though? The "trick" is to use position: absolute on the figcaption and animate their opacity based on the ViewTimeline of their parent list item 😎 figcaption { animation: show both linear; animation-timeline: --list-item; } @ keyframes show { 0%, 45%, 55%, 100% { opacity: 0; } 50% { opacity: 1; } } li { view-timeline-name: --list-item; view-timeline-axis: inline; 👈 important! } The parent of the scroll track uses position: relative so all the captions sit in the middle even though they are in the right place for the markup 🙌 The last bit is the scroll-snap 🤙 Not much to it at all. Wrap the list and make it scrollable. Then add scroll-snap-type .wrapper { scroll-snap-type: x mandatory; overflow-x: scroll; } Then make sure each list item has scroll-snap-align set on it li { scroll-snap-align: center; } That's it! Pretty cool demo to put together and see how to do this stuff with these APIs 🤓 A lot of cool little tricks to pick up for writing your CSS! ⭐️ CodePen.IO link below! 👇

Future CSS Tip! 🍏 You can create this Apple-style photo scroller by combining CSS scroll-driven animations and CSS scroll-snap 😍 Peep those changing captions 👀 No JS! img { animation: highlight both linear; animation-timeline: view(inline); 👈 Horizontal animation-range: cover 0% cover 50%; 👈 Finish } @ keyframes highlight { 50% { translate: 0 0; scale: var(--starting-scale); 👈 props opacity: var(--starting-opacity); 👈 } 100% { translate: 0 0; scale: 1; opacity: 1; } } Without the animation support, you get a standard unordered list containing some s 🤙 How do we swap the captions though? The "trick" is to use position: absolute on the figcaption and animate their opacity based on the ViewTimeline of their parent list item 😎 figcaption { animation: show both linear; animation-timeline: --list-item; } @ keyframes show { 0%, 45%, 55%, 100% { opacity: 0; } 50% { opacity: 1; } } li { view-timeline-name: --list-item; view-timeline-axis: inline; 👈 important! } The parent of the scroll track uses position: relative so all the captions sit in the middle even though they are in the right place for the markup 🙌 The last bit is the scroll-snap 🤙 Not much to it at all. Wrap the list and make it scrollable. Then add scroll-snap-type .wrapper { scroll-snap-type: x mandatory; overflow-x: scroll; } Then make sure each list item has scroll-snap-align set on it li { scroll-snap-align: center; } That's it! Pretty cool demo to put together and see how to do this stuff with these APIs 🤓 A lot of cool little tricks to pick up for writing your CSS! ⭐️ CodePen.IO link below! 👇

jhey ʕ•ᴥ•ʔ

234,583 Aufrufe • vor 2 Jahren

🚨 S&P 500 IS ON THE VERGE OF A CRASH 🚨 The pattern is at Wave 5 - peak of fakeout Next stop: Wave 6 ($6,100) - bottom But the structure isn't the only problem The entire S&P right now is held up by 5-6 stocks Apple. Nvidia. Amazon. Microsoft. Meta Remove them - and the index is already in a downtrend That's not a healthy market. That's a house of cards with a nice facade When those names start to crack - and they always do eventually - there's nothing underneath to catch the fall GET READY!

🚨 S&P 500 IS ON THE VERGE OF A CRASH 🚨 The pattern is at Wave 5 - peak of fakeout Next stop: Wave 6 ($6,100) - bottom But the structure isn't the only problem The entire S&P right now is held up by 5-6 stocks Apple. Nvidia. Amazon. Microsoft. Meta Remove them - and the index is already in a downtrend That's not a healthy market. That's a house of cards with a nice facade When those names start to crack - and they always do eventually - there's nothing underneath to catch the fall GET READY!

NoName

90,506 Aufrufe • vor 4 Monaten

The Lion and Sun flag dominated the stadium tonight. So FIFA went into overdrive trying to censor it. At the Iran vs. New Zealand World Cup match, the stadium was flooded with Lion and Sun flags and shirts. Not the flag of the Islamic Republic, but the real flag of Iran. It was everywhere. Yet if you watched on TV, you wouldn’t see any of it. The cameras avoided the stands. Crowd shots in the background were blurred. And compared to virtually every other World Cup match so far, there was remarkably little focus on the crowd. Of course, intentional. They can ban the Lion and Sun from stadiums. They can crop it out of broadcasts. They can try to erase it from the world’s view. But they cannot erase the reality that thousands upon thousands of Iranians showed up carrying the symbol of a free Iran. You can censor a flag from a broadcast. You cannot censor an entire nation.

The Lion and Sun flag dominated the stadium tonight. So FIFA went into overdrive trying to censor it. At the Iran vs. New Zealand World Cup match, the stadium was flooded with Lion and Sun flags and shirts. Not the flag of the Islamic Republic, but the real flag of Iran. It was everywhere. Yet if you watched on TV, you wouldn’t see any of it. The cameras avoided the stands. Crowd shots in the background were blurred. And compared to virtually every other World Cup match so far, there was remarkably little focus on the crowd. Of course, intentional. They can ban the Lion and Sun from stadiums. They can crop it out of broadcasts. They can try to erase it from the world’s view. But they cannot erase the reality that thousands upon thousands of Iranians showed up carrying the symbol of a free Iran. You can censor a flag from a broadcast. You cannot censor an entire nation.

Donya

119,255 Aufrufe • vor 2 Monaten

CSS Trick 🧲 You can create magnetic links with the power of custom properties and some JavaScript 💪 a { translate: calc(clamp(-1, var(--x), 1) * var(--pad-x)) ...; transition: translate var(--s, 1s) var(--ease, var(--elastic)); } a:hover { --s: 0s; } The trick here is to pad out the list items wrapping your links and use that as a translation limit 🛑 Start by using some JavaScript to calculate a value between -1 and 1 for both the x/y axis on pointermove for each list item, not the link! 🔗 If your pointer was at the center of the item, you'd get [0,0]. If it was in the top right, you'd get [1,-1] ☝️ It's worth checking out the JavaScript snippet to see how the mapping function works. Essentially, you create a function that when given a value between two bounds, will give you a mapped value back 🤙 const mapX = mapRange( item.offsetWidth * -0.5, item.offsetWidth * 0.5, 1, -1 ) Then, on pointermove, you plug the pointer position in to get the value back out and pass that into your CSS const x = mapX(item.centerX - event.x) document.documentElement.style.setProperty(--x, x) When the pointer leaves the list item, you make sure to reset these values back to 0 ✨ Once CSS has your values, it's the trick of updating the translation of each part You know that in each axis, you only want to translate the link by the padding amount li a { translate: calc(clamp(-1, var(--x), 1) * var(--pad-x)) calc(clamp(-1, var(--y), 1) * var(--pad-y)); transition: translate var(--speed, 1s) var(--ease, var(--elastic)); } This will translate the link within the list item by the desired amount. The cool part here is that you can set an offset for the text inside the link and have that move at a different rate ⭐️ By only updating the --pad-x/y custom properties for the inside the link, you can control how much it moves nav a span { --pad-x: 0.25rem; --pad-y: 0.25rem; } And the last piece, how do you update the behavior for transition speeds? And so it springs back like that? Again, use custom properties ✨ a:hover { --s: 0s; } a { transition: translate var(--s, 1s) var(--ease, var(--elastic)); } By default, a link will use --elastic easing via linear() and have a transition-duration of 1s. When a link is hovered that speed becomes 0s because you want the link to magnetise to your pointer. How about that little gap between when your pointer enters the item but hasn't hovered the link? Set a different transition so it transitions to being hovered 🫶 nav li:hover a { --ease: ease-out; --speed: 0.1s; } That's kinda it! 🙌 Use JavaScript (~40 loc) to get the information and then let CSS do all the lifting for you 💪 Any questions or suggestions, let me know 🙏 If you want a walkthrough video, also let me know please 🙏 CodePen.IO link below 👇

CSS Trick 🧲 You can create magnetic links with the power of custom properties and some JavaScript 💪 a { translate: calc(clamp(-1, var(--x), 1) * var(--pad-x)) ...; transition: translate var(--s, 1s) var(--ease, var(--elastic)); } a:hover { --s: 0s; } The trick here is to pad out the list items wrapping your links and use that as a translation limit 🛑 Start by using some JavaScript to calculate a value between -1 and 1 for both the x/y axis on pointermove for each list item, not the link! 🔗 If your pointer was at the center of the item, you'd get [0,0]. If it was in the top right, you'd get [1,-1] ☝️ It's worth checking out the JavaScript snippet to see how the mapping function works. Essentially, you create a function that when given a value between two bounds, will give you a mapped value back 🤙 const mapX = mapRange( item.offsetWidth * -0.5, item.offsetWidth * 0.5, 1, -1 ) Then, on pointermove, you plug the pointer position in to get the value back out and pass that into your CSS const x = mapX(item.centerX - event.x) document.documentElement.style.setProperty(--x, x) When the pointer leaves the list item, you make sure to reset these values back to 0 ✨ Once CSS has your values, it's the trick of updating the translation of each part You know that in each axis, you only want to translate the link by the padding amount li a { translate: calc(clamp(-1, var(--x), 1) * var(--pad-x)) calc(clamp(-1, var(--y), 1) * var(--pad-y)); transition: translate var(--speed, 1s) var(--ease, var(--elastic)); } This will translate the link within the list item by the desired amount. The cool part here is that you can set an offset for the text inside the link and have that move at a different rate ⭐️ By only updating the --pad-x/y custom properties for the inside the link, you can control how much it moves nav a span { --pad-x: 0.25rem; --pad-y: 0.25rem; } And the last piece, how do you update the behavior for transition speeds? And so it springs back like that? Again, use custom properties ✨ a:hover { --s: 0s; } a { transition: translate var(--s, 1s) var(--ease, var(--elastic)); } By default, a link will use --elastic easing via linear() and have a transition-duration of 1s. When a link is hovered that speed becomes 0s because you want the link to magnetise to your pointer. How about that little gap between when your pointer enters the item but hasn't hovered the link? Set a different transition so it transitions to being hovered 🫶 nav li:hover a { --ease: ease-out; --speed: 0.1s; } That's kinda it! 🙌 Use JavaScript (~40 loc) to get the information and then let CSS do all the lifting for you 💪 Any questions or suggestions, let me know 🙏 If you want a walkthrough video, also let me know please 🙏 CodePen.IO link below 👇

jhey ʕ•ᴥ•ʔ

164,863 Aufrufe • vor 2 Jahren

Some camera work moments from Japan D2 that gave me a headache TDKBU - switching to 5 different angles trying to show Jimin Fake love - something that happened in D1 but the camera seems to love Jimin's back even though they have a good front view Merry go round - during this part they always show Jimin and Jungkook harmonizing but this time they switched to Jin, realized it's not him singing then switched to Jimin who just finished his part and left the camera on him (not the only time that happened) Not today - not showing Jimin's part twice should be punished by law Body to body - in the traditional part of the song they do a close up of each member but this time they show Jimin on the stage screens and only some members after, it's a nice moment showing the crowd singing but has to be done right Butter - you have cameras all around the stage, how could you not know where a member is?! And then show him just walking Into the sun - idk what's worse, being able to see Jimin only on fancams doing the adlib or the live camera ignoring him until the end We had 5 shows already, this shouldn't be happening please fix it!

Some camera work moments from Japan D2 that gave me a headache TDKBU - switching to 5 different angles trying to show Jimin Fake love - something that happened in D1 but the camera seems to love Jimin's back even though they have a good front view Merry go round - during this part they always show Jimin and Jungkook harmonizing but this time they switched to Jin, realized it's not him singing then switched to Jimin who just finished his part and left the camera on him (not the only time that happened) Not today - not showing Jimin's part twice should be punished by law Body to body - in the traditional part of the song they do a close up of each member but this time they show Jimin on the stage screens and only some members after, it's a nice moment showing the crowd singing but has to be done right Butter - you have cameras all around the stage, how could you not know where a member is?! And then show him just walking Into the sun - idk what's worse, being able to see Jimin only on fancams doing the adlib or the live camera ignoring him until the end We had 5 shows already, this shouldn't be happening please fix it!

Seren

24,973 Aufrufe • vor 4 Monaten

Anthropic switched Fable 5 back on 24 hours ago, and it took me 1 hour to prototype a GTA 6 trailer. Not a mockup or a storyboard a rendered trailer with camera cuts, Vice City neon, and a chase over the causeway at dusk. The run looked like this: Minute 0 — dropped 6 reference frames and the leaked trailer script into Fable 5 Minute 9 — it wrote a full shot list of 22 shots timed to 0.1 seconds Minute 24 — generated every scene, with 19 of 22 usable on the first pass Minute 41 — cut the sequence itself, matching pacing to the trailer's audio waveform Minute 58 — export, 1080p, 91 seconds I typed 4 prompts total while Fable ran the other 200 steps on its own planning, generating, reviewing its own frames and regenerating the bad ones. The old pipeline for this was a VFX team, 3 weeks and $15,000 minimum, when 1 fake trailer shot from an Upwork freelancer already costs $2,000. Rockstar spent 12 years and a reported $2B making the real thing with 6,000 people. My version doesn't compete with theirs but the gap between a studio and 1 guy with a laptop just shrank to 60 minutes and 4 prompts.

Anthropic switched Fable 5 back on 24 hours ago, and it took me 1 hour to prototype a GTA 6 trailer. Not a mockup or a storyboard a rendered trailer with camera cuts, Vice City neon, and a chase over the causeway at dusk. The run looked like this: Minute 0 — dropped 6 reference frames and the leaked trailer script into Fable 5 Minute 9 — it wrote a full shot list of 22 shots timed to 0.1 seconds Minute 24 — generated every scene, with 19 of 22 usable on the first pass Minute 41 — cut the sequence itself, matching pacing to the trailer's audio waveform Minute 58 — export, 1080p, 91 seconds I typed 4 prompts total while Fable ran the other 200 steps on its own planning, generating, reviewing its own frames and regenerating the bad ones. The old pipeline for this was a VFX team, 3 weeks and $15,000 minimum, when 1 fake trailer shot from an Upwork freelancer already costs $2,000. Rockstar spent 12 years and a reported $2B making the real thing with 6,000 people. My version doesn't compete with theirs but the gap between a studio and 1 guy with a laptop just shrank to 60 minutes and 4 prompts.

Veltrx

244,639 Aufrufe • vor 2 Monaten

Scottie Scheffler played with Bryson DeChambeau yesterday and he reacted to the rules dispute at The Open: “I was out practising. I was playing with him yesterday. I don't really have a ton to say on it. Actually, I do have a ton to say. I haven't decided exactly what I want to say publicly yet. “I do have some thoughts. I just -- I don't really feel like now is the time or place for me to comment. We're in the middle of a tournament, and I'm focused on what I need to do. I need to go out tomorrow and shoot a low round. I'm not really going to expand on it too much.” He was then asked if he will speak publicly in a few weeks: “I don't know. It's just a tough situation, I think. Like I said, I have a decent amount of thoughts, but probably nothing that I'm concerned with right now. “Yeah, just feel like it's not a road I want to go down today. I have a tournament to focus on, and I'm going to go hit a few balls and hit a few putts. It's my job to go out there and shoot a low round tomorrow. Anything outside of that is outside my control.” The Open

Scottie Scheffler played with Bryson DeChambeau yesterday and he reacted to the rules dispute at The Open: “I was out practising. I was playing with him yesterday. I don't really have a ton to say on it. Actually, I do have a ton to say. I haven't decided exactly what I want to say publicly yet. “I do have some thoughts. I just -- I don't really feel like now is the time or place for me to comment. We're in the middle of a tournament, and I'm focused on what I need to do. I need to go out tomorrow and shoot a low round. I'm not really going to expand on it too much.” He was then asked if he will speak publicly in a few weeks: “I don't know. It's just a tough situation, I think. Like I said, I have a decent amount of thoughts, but probably nothing that I'm concerned with right now. “Yeah, just feel like it's not a road I want to go down today. I have a tournament to focus on, and I'm going to go hit a few balls and hit a few putts. It's my job to go out there and shoot a low round tomorrow. Anything outside of that is outside my control.” The Open

Flushing It

3,870,022 Aufrufe • vor 1 Monat

Qullamaggie’s Episodic Pivot Concepts and Setups “Those are the best ones. The EPs that break a multi-month range or multi-quarter range. Focus on those. LCEP last earnings season. That was a five star. Came out of a four, five month consolidation on high volume. Start with earnings EPs. Those are easiest. Those are the brain dead ones. These biotech ones are very hard, especially micro nano caps. Forget about them. It's a waste of time. Yeah, exactly. Biotech and micro nano cap EPs are just excuses to dilute the company. They rarely work out. The fail rate is just so high. Yeah, guys, especially if you have a full-time job, the one thing you should be focusing on is EPs. You'll have probably half a dozen to a dozen perfect opportunities per earning season. 4 or 5 star opportunities. Not all of them are gonna work out, but the ones that will work out will go up hundreds and hundreds of percent. Yeah, well, EPs, yes. I mean, if it's a really good one, you can buy it, even if your stop is gonna be like, say, 1.5x the average true range, or ADR. Sometimes you kind of have to not chase it, but have a little bit of a wider stop, just because these things can make very big moves. You can still get, you know, 20, 30, 40, 50 times your risk reward out of them, out of the best ones. You don’t have to buy everything on the 1 minute opening range highs. You can buy stuff on the 5-minute breakout or a 60-minute breakout, as long as it hasn't gone up like enormous amounts since the first 1 and 5-minute breakouts. But most of the time you don't need to be the first one in. Let the stocks prove themselves.”

Qullamaggie’s Episodic Pivot Concepts and Setups “Those are the best ones. The EPs that break a multi-month range or multi-quarter range. Focus on those. LCEP last earnings season. That was a five star. Came out of a four, five month consolidation on high volume. Start with earnings EPs. Those are easiest. Those are the brain dead ones. These biotech ones are very hard, especially micro nano caps. Forget about them. It's a waste of time. Yeah, exactly. Biotech and micro nano cap EPs are just excuses to dilute the company. They rarely work out. The fail rate is just so high. Yeah, guys, especially if you have a full-time job, the one thing you should be focusing on is EPs. You'll have probably half a dozen to a dozen perfect opportunities per earning season. 4 or 5 star opportunities. Not all of them are gonna work out, but the ones that will work out will go up hundreds and hundreds of percent. Yeah, well, EPs, yes. I mean, if it's a really good one, you can buy it, even if your stop is gonna be like, say, 1.5x the average true range, or ADR. Sometimes you kind of have to not chase it, but have a little bit of a wider stop, just because these things can make very big moves. You can still get, you know, 20, 30, 40, 50 times your risk reward out of them, out of the best ones. You don’t have to buy everything on the 1 minute opening range highs. You can buy stuff on the 5-minute breakout or a 60-minute breakout, as long as it hasn't gone up like enormous amounts since the first 1 and 5-minute breakouts. But most of the time you don't need to be the first one in. Let the stocks prove themselves.”

Lone

18,012 Aufrufe • vor 1 Jahr