Loading video...

Video Failed to Load

Go Home

extra detail: animate a CSS custom property from 0 to 100 on scroll and use that for a counter() label::after { content: counter(complete) '% complete'; } translate the label using container query units ✨ translate: 0 calc(var(--p) * 1cqh);

jh3yy's profile picture

jhey ʕ•ᴥ•ʔ

146,412 subscribers

78,350 views • 1 year ago •via X (Twitter)

EducationScience & TechnologyComedy
LIVE

Anya Rossi• Live Now

Private livecam show

0 Comments

No comments available

Comments from the original post will appear here

Related Videos

don't know the size of a container in CSS? container query units 🤝 translate a:hover .corner:nth-of-type(odd) { translate: 100cqi 0; } /* hover intent */ a:hover .corner { transition: translate 0.26s 0.12s; } adapts to content size 👇
0:16

don't know the size of a container in CSS? container query units 🤝 translate a:hover .corner:nth-of-type(odd) { translate: 100cqi 0; } /* hover intent */ a:hover .corner { transition: translate 0.26s 0.12s; } adapts to content size 👇

jhey ʕ•ᴥ•ʔ

65,006 views • 1 year ago

CSS custom props and scroll animation for staggered effects 🤙 h2 { animation: show; animation-timeline: view(); } .char { translate: 0 calc((1 - var(--s)) * 1lh); transition: translate 0.5s calc(sin(var(--i) / var(--t) * 45deg) * 0.5s); } @​keyframes show { to { --s: 1; }}
0:11

CSS custom props and scroll animation for staggered effects 🤙 h2 { animation: show; animation-timeline: view(); } .char { translate: 0 calc((1 - var(--s)) * 1lh); transition: translate 0.5s calc(sin(var(--i) / var(--t) * 45deg) * 0.5s); } @​keyframes show { to { --s: 1; }}

jhey ʕ•ᴥ•ʔ

32,763 views • 1 year ago

Complex UI: New web APIs in disguise 🥸 These balance sliders are basic input [type=range] with labels and some extra elements The magic comes from using a scroll animation on the range thumb and using it to drive a custom property that updates styles on the visuals ✨
0:17

Complex UI: New web APIs in disguise 🥸 These balance sliders are basic input [type=range] with labels and some extra elements The magic comes from using a scroll animation on the range thumb and using it to drive a custom property that updates styles on the visuals ✨

jhey ʕ•ᴥ•ʔ

113,073 views • 2 years ago

Using a relatively easy glitch in Yoshi's Island, it is possible to underflow the life counter and make it roll over from having 0 lives directly to 999.
0:18

Using a relatively easy glitch in Yoshi's Island, it is possible to underflow the life counter and make it roll over from having 0 lives directly to 999.

Supper Mario Broth

124,936 views • 1 year ago

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. ❤️
0:16

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. ❤️

Ali

10,804 views • 3 months ago

Introducing Citadail OTC A platform for investors to complete P2P Over-the-Counter trades Revenue earned from fees will be used to buy back Citadail Token and invest into upcoming projects powered by Citadail and Griffain!
0:17

Introducing Citadail OTC A platform for investors to complete P2P Over-the-Counter trades Revenue earned from fees will be used to buy back Citadail Token and invest into upcoming projects powered by Citadail and Griffain!

CITADAIL

139,637 views • 1 year ago

This one CSS property will fix your z-index headache. In CSS, a child element with z-index will overlap with any fixed or floating elements outside its container. Instead of stacking higher and higher values to fix it. Use this instead: .card-container { isolation: isolate; } With that, any elements with z-index inside the container will be contained. If you found this useful, follow for more. ❤️
0:19

This one CSS property will fix your z-index headache. In CSS, a child element with z-index will overlap with any fixed or floating elements outside its container. Instead of stacking higher and higher values to fix it. Use this instead: .card-container { isolation: isolate; } With that, any elements with z-index inside the container will be contained. If you found this useful, follow for more. ❤️

Ali

16,738 views • 3 months ago

Turn one idea into a complete storyboard, then animate it in Seedance 2.0 using a reference image. This ComfyUI workflow uses LLMs to build storyboard scenes and prepare them for Seedance, making the jump from concept to animation much easier. Link below 👇
0:12

Turn one idea into a complete storyboard, then animate it in Seedance 2.0 using a reference image. This ComfyUI workflow uses LLMs to build storyboard scenes and prepare them for Seedance, making the jump from concept to animation much easier. Link below 👇

ComfyUI

73,884 views • 2 months ago

3 Car Class 756/0 FLIRT units enter service on the TAM Valley lines. Captured here while using exclusively battery power to pull away from a station and navigate a neutral section in the overhead, under live overhead they are the fastest accelerating mainline units in the UK.
0:16

3 Car Class 756/0 FLIRT units enter service on the TAM Valley lines. Captured here while using exclusively battery power to pull away from a station and navigate a neutral section in the overhead, under live overhead they are the fastest accelerating mainline units in the UK.

South Wales Metro Updates

11,598 views • 1 year ago

This one line of CSS will fix the annoying layout shift that scrollbars cause. This happens when a non-scrollable container becomes scrollable due to its content. This gets rid of that problem: .container { scrollbar-gutter: stable; } With that, space is reserved for the scrollbar before it even appears. So there's no layout shifts when content grows. Use both-edges if your content is centered. It mirrors the reserved space on both sides of the container to keep the layout balanced. If you found this one useful, follow for more. ❤️
0:13

This one line of CSS will fix the annoying layout shift that scrollbars cause. This happens when a non-scrollable container becomes scrollable due to its content. This gets rid of that problem: .container { scrollbar-gutter: stable; } With that, space is reserved for the scrollbar before it even appears. So there's no layout shifts when content grows. Use both-edges if your content is centered. It mirrors the reserved space on both sides of the container to keep the layout balanced. If you found this one useful, follow for more. ❤️

Ali

66,222 views • 3 months ago

Be the detail you want to see in the world Custom hybrid UIKit gestures + SwiftUI for all the actual content - both reading/writing from a central observable variable store (not using vermont but a custom library I wrote that’s based off of simple closures and AsyncStream) for completely synced animations. Will share more publicly soon on how it’s built :-)
0:12

Be the detail you want to see in the world Custom hybrid UIKit gestures + SwiftUI for all the actual content - both reading/writing from a central observable variable store (not using vermont but a custom library I wrote that’s based off of simple closures and AsyncStream) for completely synced animations. Will share more publicly soon on how it’s built :-)

Tyler Angert

16,760 views • 6 months ago

It's easy to counter people who don't know how to use the Smart Pistol effectively Listen to how many shots the first guy fires and how many actually land. That's him spam firing without getting a complete lock. Then look at me waiting for full lock with only 6 rounds left.
0:17

It's easy to counter people who don't know how to use the Smart Pistol effectively Listen to how many shots the first guy fires and how many actually land. That's him spam firing without getting a complete lock. Then look at me waiting for full lock with only 6 rounds left.

Kapt'n Krunch 🛠️⚓

11,984 views • 2 months ago

004/100 Buttons. A bit of the process on building an animation. When looking at a finished animation or in this example a finished button, it can look quite complex inside the CSS. But when building it, it’s more like a lot of simple steps, one after another. Here I had the idea to make some kind of text animation like the footer logo on the Osmo site. I try to add the base animation with no complex easing, for example transition: translate 0.4s ease. Starting with just moving the one text from bottom to top and the other text to top. Adding a stagger, play around with it. Searching for a way to make it more circular. On the research I found the sin() function inside CSS which can build a more smooth non linear curve for the stagger which creates this circular effect. And step by step adding more complexity like, different easing for hover/hover-out, opacity, 3D transform and more. I use also the sin() function to rotate the letters, so the middle ones are getting more rotated than the outer ones. Another thing which helps is to add a small delay on hover, for example 0.05s or 0.1s, you don’t really see the difference, but when you hover pretty fast on and out it doesn’t get that jumpy. I’m using here GSAP’s SplitText to split every char into spans. And then I’m adding a CSS index variable to every span, starting from the center. SplitText can provide CSS index variables, but you cannot tell it from which direction. For the sin() it’s also important to have a max length, so I add another CSS variable with the max char number on it. Crafting 100 Buttons with Osmo ⏳ Total time: 63h
0:17

004/100 Buttons. A bit of the process on building an animation. When looking at a finished animation or in this example a finished button, it can look quite complex inside the CSS. But when building it, it’s more like a lot of simple steps, one after another. Here I had the idea to make some kind of text animation like the footer logo on the Osmo site. I try to add the base animation with no complex easing, for example transition: translate 0.4s ease. Starting with just moving the one text from bottom to top and the other text to top. Adding a stagger, play around with it. Searching for a way to make it more circular. On the research I found the sin() function inside CSS which can build a more smooth non linear curve for the stagger which creates this circular effect. And step by step adding more complexity like, different easing for hover/hover-out, opacity, 3D transform and more. I use also the sin() function to rotate the letters, so the middle ones are getting more rotated than the outer ones. Another thing which helps is to add a small delay on hover, for example 0.05s or 0.1s, you don’t really see the difference, but when you hover pretty fast on and out it doesn’t get that jumpy. I’m using here GSAP’s SplitText to split every char into spans. And then I’m adding a CSS index variable to every span, starting from the center. SplitText can provide CSS index variables, but you cannot tell it from which direction. For the sin() it’s also important to have a max length, so I add another CSS variable with the max char number on it. Crafting 100 Buttons with Osmo ⏳ Total time: 63h

Eduard Bodak

166,023 views • 3 months ago

Whoot! I just learned you can use animatable CSS grid rows to transition an element's height from 0 to auto! Toggle a class and see the magic happen. Thx to Chris Coyier for sharing this little gem. 💯 Video alt: Exampe showing an animated height.
0:12

Whoot! I just learned you can use animatable CSS grid rows to transition an element's height from 0 to auto! Toggle a class and see the magic happen. Thx to Chris Coyier for sharing this little gem. 💯 Video alt: Exampe showing an animated height.

Stefan Judis

238,296 views • 3 years ago

🤩 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! 😎
0:12

🤩 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! 😎

Florin Pop 👨🏻‍💻

29,839 views • 11 months ago

Successful folks at are giving away the most beautiful cards in the world to the quick and ambitious! 🚀 Available in around 160 countries 👠 worldwide! Issuer: a bank incorporated in a U.S. territory. ⚡ Sign Up: • Download the Avalanche Card app • Enter your phone number and follow the prompts • Complete KYC verification 🎯 Once verified, start using your virtual card and order a physical card with free DHL shipping! 📬 Fees: • FX conversion: 1% • Monthly fee: $0 • Virtual card issuance: $0 • Physical card issuance: $0 🔥 • Shipping: $0 🚚 Top up USDT, USDC/AVAX and more and enjoy the glossy design and vibrant colors! ✨ Documentation:
0:16

Successful folks at are giving away the most beautiful cards in the world to the quick and ambitious! 🚀 Available in around 160 countries 👠 worldwide! Issuer: a bank incorporated in a U.S. territory. ⚡ Sign Up: • Download the Avalanche Card app • Enter your phone number and follow the prompts • Complete KYC verification 🎯 Once verified, start using your virtual card and order a physical card with free DHL shipping! 📬 Fees: • FX conversion: 1% • Monthly fee: $0 • Virtual card issuance: $0 • Physical card issuance: $0 🔥 • Shipping: $0 🚚 Top up USDT, USDC/AVAX and more and enjoy the glossy design and vibrant colors! ✨ Documentation:

Breaking Moneyverse 🚨 ᴺᵉʷˢ You Need to Know

100,800 views • 1 year ago

Create premium beverage ads using Fotor Here is a link to the website: Get 50 Credits: prompt: Style: Ultra-realistic, premium commercial, vibrant colors, cinematic food advertising, soft natural sunlight, smooth camera movements, 4K, shallow depth of field, refreshing summer mood, luxury beverage commercial. Duration: 10 seconds Scene 1 (0:00–0:03) – First Impression A stylish young Western woman with long wavy blonde hair walks into a bright modern kitchen flooded with warm morning sunlight. She wears a fashionable strawberry-pink satin crop top paired with a high-waisted white pleated skirt and elegant white sneakers, giving a fresh, youthful premium lifestyle look. She smiles naturally while looking toward the camera, reaching for a chilled strawberry shake sitting on the marble kitchen counter. Dialogue (smiling): "Ready for a berry good day?" Scene 2 (0:03–0:06) – Product Hero Close-up of the condensation-covered strawberry shake bottle. Rich creamy pink shake swirls inside the transparent bottle with fresh strawberry graphics on the label. Floating strawberries, strawberry slices, milk splashes, whipped cream swirls, and tiny mint leaves orbit around the bottle in slow motion. The woman takes a satisfying sip and closes her eyes with delight. Dialogue: "Creamy... fruity... absolutely delicious." Scene 3 (0:06–0:10) – Final Hero Shot She turns toward the camera holding the bottle forward confidently. Dynamic milk splashes, fresh strawberries, sparkling droplets, and soft pink particles burst around the product while the kitchen glows with bright natural light. Camera pushes in on the label before ending on the hero product. Dialogue: "Sip the sweetness. Love every moment."
0:11

Create premium beverage ads using Fotor Here is a link to the website: Get 50 Credits: prompt: Style: Ultra-realistic, premium commercial, vibrant colors, cinematic food advertising, soft natural sunlight, smooth camera movements, 4K, shallow depth of field, refreshing summer mood, luxury beverage commercial. Duration: 10 seconds Scene 1 (0:00–0:03) – First Impression A stylish young Western woman with long wavy blonde hair walks into a bright modern kitchen flooded with warm morning sunlight. She wears a fashionable strawberry-pink satin crop top paired with a high-waisted white pleated skirt and elegant white sneakers, giving a fresh, youthful premium lifestyle look. She smiles naturally while looking toward the camera, reaching for a chilled strawberry shake sitting on the marble kitchen counter. Dialogue (smiling): "Ready for a berry good day?" Scene 2 (0:03–0:06) – Product Hero Close-up of the condensation-covered strawberry shake bottle. Rich creamy pink shake swirls inside the transparent bottle with fresh strawberry graphics on the label. Floating strawberries, strawberry slices, milk splashes, whipped cream swirls, and tiny mint leaves orbit around the bottle in slow motion. The woman takes a satisfying sip and closes her eyes with delight. Dialogue: "Creamy... fruity... absolutely delicious." Scene 3 (0:06–0:10) – Final Hero Shot She turns toward the camera holding the bottle forward confidently. Dynamic milk splashes, fresh strawberries, sparkling droplets, and soft pink particles burst around the product while the kitchen glows with bright natural light. Camera pushes in on the label before ending on the hero product. Dialogue: "Sip the sweetness. Love every moment."

Sharon Riley

21,687 views • 18 days ago