Loading video...

Video Failed to Load

There was a problem loading this video. This could be due to a temporary network issue or the video might be unavailable.

note to self: revisit pixelated transition effects this is a "similar" experiment but relies only on css mask and a randomly generated sprite 🤙 idea was to extend it to scroll reveals, popover transitions, details/summary, etc.

jhey ʕ•ᴥ•ʔ

146,412 subscribers

17,454 views • 3 months ago •via X (Twitter)

Anya Rossi• Live Now

Private livecam show

0 Comments

No comments available

Comments from the original post will appear here

Related Videos

Future UI Tip ✨ You can create an HTML && CSS only Accordion that only has one section open at a time 🤙 Do this by adding a matching name attribute to sibling details elements ✨ One Two Check this video where the sibling elements have their name attributes toggled 👇 Notice how the behavior changes. This is a pretty sweet addition from the Open UI group 👏 One issue is getting CSS transitions to work with the sections which seems like an age-old problem with many articles around it. Seems like it should work with @ starting-style or View Transitions 🤔 But, no luck on my end 🥲 CodePen.IO link below! 👇

Future UI Tip ✨ You can create an HTML && CSS only Accordion that only has one section open at a time 🤙 Do this by adding a matching name attribute to sibling details elements ✨ One Two Check this video where the sibling elements have their name attributes toggled 👇 Notice how the behavior changes. This is a pretty sweet addition from the Open UI group 👏 One issue is getting CSS transitions to work with the sections which seems like an age-old problem with many articles around it. Seems like it should work with @ starting-style or View Transitions 🤔 But, no luck on my end 🥲 CodePen.IO link below! 👇

jhey ʕ•ᴥ•ʔ

362,458 views • 2 years ago

Future CSS Tip! ⚡️ You can use scroll-driven animations to drive sprite animations 🎞️ No JavaScript, off the main thread 🔥 img { animation: play both steps(var(--frames)) var(--runs); animation-timeline: scroll(); } @ keyframes play { to { object-position: 100% 0; } } The trick is animating a "film strip" with object-position and the steps animation-timing function 🎬 Check out this sprite animation set to a higher play count and how the stepped easing makes a difference to the sprite 🤙 This opens up a bunch of possibilities where the image is animated off the main thread and you can bring in complex things via sprite 👀 Showing the sprite is intended to help you understand how object-position is being animated 🤙 Become the director! 😅 CodePen.IO link below! 👇

Future CSS Tip! ⚡️ You can use scroll-driven animations to drive sprite animations 🎞️ No JavaScript, off the main thread 🔥 img { animation: play both steps(var(--frames)) var(--runs); animation-timeline: scroll(); } @ keyframes play { to { object-position: 100% 0; } } The trick is animating a "film strip" with object-position and the steps animation-timing function 🎬 Check out this sprite animation set to a higher play count and how the stepped easing makes a difference to the sprite 🤙 This opens up a bunch of possibilities where the image is animated off the main thread and you can bring in complex things via sprite 👀 Showing the sprite is intended to help you understand how object-position is being animated 🤙 Become the director! 😅 CodePen.IO link below! 👇

jhey ʕ•ᴥ•ʔ

187,363 views • 3 years ago

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,157 views • 3 years ago

“Hello everyone, I wanted to share my volumetric cloud experiment I was working on in PREFACE. Just to note this is just an experiment and very WIP but I still wanted to share it :)” See this, and more insights from the dev team, over on our discord, linked below…

“Hello everyone, I wanted to share my volumetric cloud experiment I was working on in PREFACE. Just to note this is just an experiment and very WIP but I still wanted to share it :)” See this, and more insights from the dev team, over on our discord, linked below…

PLAYERUNKNOWN

38,757 views • 1 year ago

CSS Tip! 📜 You can create scroll indicators with scroll-driven animations 📍 Reveal a shadow, mask the content, etc. .indicator--top { animation: reveal; animation-timeline: scroll(nearest); animation-range: 0 2rem; } @keyframes reveal { 0% { scale: 1 0; }} The trick here is to hook into the scroll position of the nearest scroll container with .indicator { animation-timeline: scroll(nearest); } Your reveal animation is going to scale the indicator up from 0 on the y-axis @keyframes reveal { 0% { scale: 1 0; }} The timeline is however much you want to scroll by before revealing the indicator. In this example, you're saying to reveal the indicator once the scroller has been scrolled by 2rem .indicator--top { animation-range: 0 2rem; } How do you make this work for the opposite indicator? Use animation direction and a range based on the end of the scroller .indicator--bottom { animation-range: calc(100% - var(--scroll-buffer)) 100%; animation-direction: reverse; } You can use this same concept for the different styles to reveal different indicators. The only one that's different is the mask. The mask one animates the mask size across three mask layers and uses a mask composite to exclude the pieces that don't need to be shown 🤙 As always, any questions or requests, hit me up! 🙏 CodePen.IO link below! 👇

CSS Tip! 📜 You can create scroll indicators with scroll-driven animations 📍 Reveal a shadow, mask the content, etc. .indicator--top { animation: reveal; animation-timeline: scroll(nearest); animation-range: 0 2rem; } @keyframes reveal { 0% { scale: 1 0; }} The trick here is to hook into the scroll position of the nearest scroll container with .indicator { animation-timeline: scroll(nearest); } Your reveal animation is going to scale the indicator up from 0 on the y-axis @keyframes reveal { 0% { scale: 1 0; }} The timeline is however much you want to scroll by before revealing the indicator. In this example, you're saying to reveal the indicator once the scroller has been scrolled by 2rem .indicator--top { animation-range: 0 2rem; } How do you make this work for the opposite indicator? Use animation direction and a range based on the end of the scroller .indicator--bottom { animation-range: calc(100% - var(--scroll-buffer)) 100%; animation-direction: reverse; } You can use this same concept for the different styles to reveal different indicators. The only one that's different is the mask. The mask one animates the mask size across three mask layers and uses a mask composite to exclude the pieces that don't need to be shown 🤙 As always, any questions or requests, hit me up! 🙏 CodePen.IO link below! 👇

jhey ʕ•ᴥ•ʔ

99,168 views • 2 years ago

this year's editions page is a marvel – so many awesome details 👨‍🍳 honored to contribute, team smashed it 👏 beyond the incredible webgl work, there's crafty use of css container queries, counters, transitions/animations, and svg too!

this year's editions page is a marvel – so many awesome details 👨‍🍳 honored to contribute, team smashed it 👏 beyond the incredible webgl work, there's crafty use of css container queries, counters, transitions/animations, and svg too!

jhey ʕ•ᴥ•ʔ

72,045 views • 8 months ago

My testimony was shared in church today so I’d share it here. 😊 This is only a one minute summary but it was a whole lot. Several people came and left me on that job while nothing was happening for me. But God did it. My current job is nothing but a miracle. Glory to God🥳🥳

My testimony was shared in church today so I’d share it here. 😊 This is only a one minute summary but it was a whole lot. Several people came and left me on that job while nothing was happening for me. But God did it. My current job is nothing but a miracle. Glory to God🥳🥳

Ifedolapo💜

46,426 views • 1 year ago

I was tired and pissed off because I had an exhausting day and still went to the gym after midnight. BUT this is double my usual max on this machine and I was randomly able to lift it? A win is a win

I was tired and pissed off because I had an exhausting day and still went to the gym after midnight. BUT this is double my usual max on this machine and I was randomly able to lift it? A win is a win

Zaynah Bear 🇹🇹

103,339 views • 1 year ago

CSS Trick 🤙 You can mask other elements with icons in CSS to create this glittery icon hover/interaction effect ✨ canvas { mask: url(/img/icons/next.svg); } Check this example, inspired by the new Vercel homepage treats that are dropping 🖤 (Had to have a go at whipping this up over food break 😅) 1. Create some that animate squares with different hue shades (Using GSAP to only animate on :hover with ticker ⏲️) 2. Mask each canvas with a desired icon 3. On :hover, fade in the animating canvas 🤙 Check out the exploding view! 🤯 CodePen.IO link below 👇

CSS Trick 🤙 You can mask other elements with icons in CSS to create this glittery icon hover/interaction effect ✨ canvas { mask: url(/img/icons/next.svg); } Check this example, inspired by the new Vercel homepage treats that are dropping 🖤 (Had to have a go at whipping this up over food break 😅) 1. Create some that animate squares with different hue shades (Using GSAP to only animate on :hover with ticker ⏲️) 2. Mask each canvas with a desired icon 3. On :hover, fade in the animating canvas 🤙 Check out the exploding view! 🤯 CodePen.IO link below 👇

jhey ʕ•ᴥ•ʔ

210,485 views • 2 years ago

Self-ID and social transition add up to a very dangerous ideology that can have terrible effects on young LGB children, who are being put on a medical pathway to irreversible physical changes. We are not going to run away from this issue. We will sort it.

Self-ID and social transition add up to a very dangerous ideology that can have terrible effects on young LGB children, who are being put on a medical pathway to irreversible physical changes. We are not going to run away from this issue. We will sort it.

Kemi Badenoch

1,892,590 views • 2 years ago

MUSK: “The goal of SpaceX is to establish a self-sustaining city on Mars” Billions and billions in taxpayer dollars to this man’s company — yet we’re told there was no money to extend food assistance to those who need it here on Earth 🌎 🤷🏼

MUSK: “The goal of SpaceX is to establish a self-sustaining city on Mars” Billions and billions in taxpayer dollars to this man’s company — yet we’re told there was no money to extend food assistance to those who need it here on Earth 🌎 🤷🏼

The Tennessee Holler

31,158 views • 9 months ago

CSS Tip! ✨ You can create icon sprite animations using the steps() animation-timing function 🤙 You could use this to create little icon button animations, etc. 😎 But how do you do it? Like this 👇 button img { object-fit: cover; object-position: 0 0; } The image is a sprite strip of the frames in the animation. To animate the frames, you do something like this: [aria-pressed=true] img { animation: play 0.5s steps(20) forwards; } @ keyframes play { to { object-position: 100% 0; } } We are toggling aria-pressed in our scripts to show a pressed state and we can then fire the animation to play our sprite 🎉 Check out the video that breaks things down a little bit CodePen.IO link blow! 👇

CSS Tip! ✨ You can create icon sprite animations using the steps() animation-timing function 🤙 You could use this to create little icon button animations, etc. 😎 But how do you do it? Like this 👇 button img { object-fit: cover; object-position: 0 0; } The image is a sprite strip of the frames in the animation. To animate the frames, you do something like this: [aria-pressed=true] img { animation: play 0.5s steps(20) forwards; } @ keyframes play { to { object-position: 100% 0; } } We are toggling aria-pressed in our scripts to show a pressed state and we can then fire the animation to play our sprite 🎉 Check out the video that breaks things down a little bit CodePen.IO link blow! 👇

jhey ʕ•ᴥ•ʔ

559,645 views • 3 years ago

CSS Tip! 🍬 You can create a CSS-only sticky CTA using position: sticky or scroll-driven animations 🤙 .cta { position: sticky; margin-top: 110vh; bottom: 2rem; /* 👈 Stick! */ } This is one way 👀 This first way relies on you setting a layout on the body and putting the CTA in a zero-space part of the layout body { display: grid; grid-template-columns: auto 0; } The children of the body are an element with your content and then the CTA. You could also use display:flex too. .content { flex: 1 0 100%; } .cta { place-self: end; } As you scroll the body, the CTA comes into view and sticks in position 🙌 That's one way. If you want to take it further and do something like flip between showing or not, maybe scale it up, or add some special easing, etc. an animation is another way 📜 First, change the styles for your CTA. Note the translate property that's powered by a custom property .cta { position: fixed; bottom: 2rem; right: 2rem; translate: 0 calc(20vh - (var(--show) * 20vh)); transition: translate 0.875s var(--elastic); } Next you need a custom property that you're going to animate @property --show { inherits: true; initial-value: 0; syntax: ' '; } Lastly, you animate this value on the body. As the property value changes, the value will trickle down to the CTA @supports (animation-timeline: scroll()) { body { animation: show-cta both steps(1); animation-timeline: scroll(root); animation-range: 0 10vh; } @keyframes show-cta { to { --show: 1; } } } Using @supports you can use this as a progressive enhancement. If scroll-driven animations are supported, use them. Otherwise fallback to using position: sticky 🤙 That's it! As always, any questions or requests, hit me up! 🙏 CodePen.IO link below! 👇

CSS Tip! 🍬 You can create a CSS-only sticky CTA using position: sticky or scroll-driven animations 🤙 .cta { position: sticky; margin-top: 110vh; bottom: 2rem; /* 👈 Stick! / } This is one way 👀 This first way relies on you setting a layout on the body and putting the CTA in a zero-space part of the layout body { display: grid; grid-template-columns: auto 0; } The children of the body are an element with your content and then the CTA. You could also use display:flex too. .content { flex: 1 0 100%; } .cta { place-self: end; } As you scroll the body, the CTA comes into view and sticks in position 🙌 That's one way. If you want to take it further and do something like flip between showing or not, maybe scale it up, or add some special easing, etc. an animation is another way 📜 First, change the styles for your CTA. Note the translate property that's powered by a custom property .cta { position: fixed; bottom: 2rem; right: 2rem; translate: 0 calc(20vh - (var(--show) 20vh)); transition: translate 0.875s var(--elastic); } Next you need a custom property that you're going to animate @property --show { inherits: true; initial-value: 0; syntax: ' '; } Lastly, you animate this value on the body. As the property value changes, the value will trickle down to the CTA @supports (animation-timeline: scroll()) { body { animation: show-cta both steps(1); animation-timeline: scroll(root); animation-range: 0 10vh; } @keyframes show-cta { to { --show: 1; } } } Using @supports you can use this as a progressive enhancement. If scroll-driven animations are supported, use them. Otherwise fallback to using position: sticky 🤙 That's it! As always, any questions or requests, hit me up! 🙏 CodePen.IO link below! 👇

jhey ʕ•ᴥ•ʔ

133,020 views • 2 years ago

I've noticed this happening a few times randomly lately but I can't find anything in the wiki and I can't explain/recreate it either. Why does the turret decide to extend it's range randomly vs a stationary target?

I've noticed this happening a few times randomly lately but I can't find anything in the wiki and I can't explain/recreate it either. Why does the turret decide to extend it's range randomly vs a stationary target?

LS

126,108 views • 10 months ago

On 4th and 2, Auburn had three players in motion at the snap which is against the rules. But the only penalty called was offsides on Alabama. Auburn was able to get a field goal out of it to extend its lead to 4 👀

On 4th and 2, Auburn had three players in motion at the snap which is against the rules. But the only penalty called was offsides on Alabama. Auburn was able to get a field goal out of it to extend its lead to 4 👀

247Sports

1,234,255 views • 2 years ago

The moment Davrel was streaming and randomly met a lady who didn’t want to be on stream at first, but now suddenly wants to be on it… this life 🤦🏽‍♂️

The moment Davrel was streaming and randomly met a lady who didn’t want to be on stream at first, but now suddenly wants to be on it… this life 🤦🏽‍♂️

Cleverly 💐

48,977 views • 4 months ago

Awe damn bruh Dick was so pissed he actually dropped Batman and threw his mask at him … I never realized it got this bad man wtf. Happy the episode ended on a good note but damn this scene was hard to watch

Awe damn bruh Dick was so pissed he actually dropped Batman and threw his mask at him … I never realized it got this bad man wtf. Happy the episode ended on a good note but damn this scene was hard to watch

Bam²⁵

23,341 views • 1 year ago

Ngl Drake having a daughter might be legit but they can’t say more cause of the after effects of it This is what Kendrick’s friend Euro Luxxk said While it is a bit weird for dot to address it but not expand on it. It makes sense as to why it would be risky to give details

Ngl Drake having a daughter might be legit but they can’t say more cause of the after effects of it This is what Kendrick’s friend Euro Luxxk said While it is a bit weird for dot to address it but not expand on it. It makes sense as to why it would be risky to give details

SiinWop

2,330,956 views • 2 years ago

There’s only one perfectly optimal way to notate a musical idea, and this is it:

There’s only one perfectly optimal way to notate a musical idea, and this is it:

score follower

238,331 views • 3 years ago