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.

you can do this one with css grid, position: sticky, and some scroll animation 👨‍🍳

jhey ʕ•ᴥ•ʔ

146,413 subscribers

207,140 views • 7 months ago •via X (Twitter)

Education Science & Technology

Anya Rossi• Live Now

Private livecam show

0 Comments

No comments available

Comments from the original post will appear here

Related Videos

you can stack elements with css grid/subgrid by giving them the same grid position 🧑‍🍳 this scroll track window is a great use case for css grid + position: sticky catch the 3D breakdown 👇

you can stack elements with css grid/subgrid by giving them the same grid position 🧑‍🍳 this scroll track window is a great use case for css grid + position: sticky catch the 3D breakdown 👇

jhey ʕ•ᴥ•ʔ

128,603 views • 7 months ago

negative position: sticky + line height units + background-attachment 👨‍🍳 you can achieve a lot with a good grasp of CSS fundamentals bonus: progressively enhance with scroll-driven animation ✨

negative position: sticky + line height units + background-attachment 👨‍🍳 you can achieve a lot with a good grasp of CSS fundamentals bonus: progressively enhance with scroll-driven animation ✨

jhey ʕ•ᴥ•ʔ

134,905 views • 1 year ago

CSS position: sticky, scroll-snap + progressively enhanced scroll animation 📜 li { animation: bright; animation-range: calc(50% - 1lh) calc(50% + 1lh); animation-timeline: view(); scroll-snap-align: center; } @keyframes bright { 50% { opacity: 1; }}

CSS position: sticky, scroll-snap + progressively enhanced scroll animation 📜 li { animation: bright; animation-range: calc(50% - 1lh) calc(50% + 1lh); animation-timeline: view(); scroll-snap-align: center; } @keyframes bright { 50% { opacity: 1; }}

jhey ʕ•ᴥ•ʔ

366,000 views • 1 year ago

built some 3D css books in the past with scroll interaction and demo links might make a css cookbook 👨‍🍳

built some 3D css books in the past with scroll interaction and demo links might make a css cookbook 👨‍🍳

jhey ʕ•ᴥ•ʔ

59,139 views • 8 months ago

you can create this dynamic mask using a progressive CSS scroll-driven animation 🧑‍🍳 the gist 👇 input { animation: in; animation-timeline: scroll(self inline); animation-range: 0 6ch; mask-position: 0 0; } @keyframes in { 0% { mask-position: -6ch 0; }}

you can create this dynamic mask using a progressive CSS scroll-driven animation 🧑‍🍳 the gist 👇 input { animation: in; animation-timeline: scroll(self inline); animation-range: 0 6ch; mask-position: 0 0; } @keyframes in { 0% { mask-position: -6ch 0; }}

jhey ʕ•ᴥ•ʔ

126,068 views • 1 year ago

progressively enhanced css scroll-driven parallax animation 👨‍🍳 3 columns use the same @keyframes driven by container position + calc() to keep things responsive

progressively enhanced css scroll-driven parallax animation 👨‍🍳 3 columns use the same @keyframes driven by container position + calc() to keep things responsive

jhey ʕ•ᴥ•ʔ

14,442 views • 1 month ago

$CSS container query for when an element is stuck with position: sticky 🔥 nav { container-type: scroll-state; } @container scroll-state(stuck: top) { .nav__content { --expand: 1; } } use custom property to morph CTA into a nav bar with transitioned grid-template-columns 😎$

CSS container query for when an element is stuck with position: sticky 🔥 nav { container-type: scroll-state; } @container scroll-state(stuck: top) { .nav__content { --expand: 1; } } use custom property to morph CTA into a nav bar with transitioned grid-template-columns 😎

jhey ʕ•ᴥ•ʔ

88,665 views • 1 year 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

One of Apple's tricks is to swap images on scroll 📜 You could do it with CSS scroll animation. Translate a track of images with steps ease! ⭐️ .track { animation: play steps(63); animation-timeline: --head; } @keyframes play { to { translate: 0 -6300%; }} Watch this 👇

One of Apple's tricks is to swap images on scroll 📜 You could do it with CSS scroll animation. Translate a track of images with steps ease! ⭐️ .track { animation: play steps(63); animation-timeline: --head; } @keyframes play { to { translate: 0 -6300%; }} Watch this 👇

jhey ʕ•ᴥ•ʔ

217,513 views • 2 years ago

Pretty fun seeing how you can combine different CSS tricks with scroll 😁 The basic combination of overflow: hidden and steps() animation timing makes this happen ⭐️

Pretty fun seeing how you can combine different CSS tricks with scroll 😁 The basic combination of overflow: hidden and steps() animation timing makes this happen ⭐️

jhey ʕ•ᴥ•ʔ

136,480 views • 1 year ago

CSS Tip! 📜 You could create a sticky popout bento effect with position: sticky and scroll-driven animation 🤩 The trick is to use position: sticky with bottom instead of top like we would usually 🤙 Then we can use scroll-driven animation as a progressive enhancement to fade things and move the phone around ✨ section { view-timeline-name: --section; } .phone { scale: 1.5; translate: 30% 0; animation-name: slip, slide; 👈 2 scroll animations animation-timing-function: linear; animation-fill-mode: both; animation-range: 👈 2 ranges entry 50% entry 60%, exit 10% exit 25%; animation-timeline: --section; } keyframes slip { to { translate: -5% 0; scale: 1 } } keyframes slide { to { translate: -5% 30%; } } If scroll-driven animations aren't supported, we still provide a neat effect using position: sticky alone 😎 The trick to that is having an absolutely positioned card that comes up from beneath the phone image and gives the illusion that they're joined. But, they aren't! CodePen.IO link below! 👇 cc Aaron Stezycki

CSS Tip! 📜 You could create a sticky popout bento effect with position: sticky and scroll-driven animation 🤩 The trick is to use position: sticky with bottom instead of top like we would usually 🤙 Then we can use scroll-driven animation as a progressive enhancement to fade things and move the phone around ✨ section { view-timeline-name: --section; } .phone { scale: 1.5; translate: 30% 0; animation-name: slip, slide; 👈 2 scroll animations animation-timing-function: linear; animation-fill-mode: both; animation-range: 👈 2 ranges entry 50% entry 60%, exit 10% exit 25%; animation-timeline: --section; } keyframes slip { to { translate: -5% 0; scale: 1 } } keyframes slide { to { translate: -5% 30%; } } If scroll-driven animations aren't supported, we still provide a neat effect using position: sticky alone 😎 The trick to that is having an absolutely positioned card that comes up from beneath the phone image and gives the illusion that they're joined. But, they aren't! CodePen.IO link below! 👇 cc Aaron Stezycki

jhey ʕ•ᴥ•ʔ

341,765 views • 2 years ago

🖱 Scrub through a CSS @‍keyframe with an element's scroll position. What do you think of this effect? Is it OK when very subtle?

🖱 Scrub through a CSS @‍keyframe with an element's scroll position. What do you think of this effect? Is it OK when very subtle?

Wes Bos

44,261 views • 1 year ago

Future CSS Tip! 🔮 You can power list animations like you would using IntersectionObserver with CSS scroll-driven animations and zero JS 🤯 el { animation: show; animation-timeline: view(); animation-range: entry; } keyframes show {0%{translate:0 50%;}} CodePen.IO link below! 👇

Future CSS Tip! 🔮 You can power list animations like you would using IntersectionObserver with CSS scroll-driven animations and zero JS 🤯 el { animation: show; animation-timeline: view(); animation-range: entry; } keyframes show {0%{translate:0 50%;}} CodePen.IO link below! 👇

jhey ʕ•ᴥ•ʔ

433,827 views • 3 years ago

i wasn't aware of `animation-timeline` css property if I be honest. with it you can use css `scroll()` function to tie an animation with the scroll progress of a scrollable element. here im animating a `mask-image`s size based on the scroll progress with `2rem` of threshold.

i wasn't aware of `animation-timeline` css property if I be honest. with it you can use css `scroll()` function to tie an animation with the scroll progress of a scrollable element. here im animating a `mask-image`s size based on the scroll progress with `2rem` of threshold.

Soren

184,261 views • 9 months ago

the trick: CSS position: sticky + mix-blend-mode: difference the bonus trick: add an extra layer and chain the blend to block content out 👨‍🍳

the trick: CSS position: sticky + mix-blend-mode: difference the bonus trick: add an extra layer and chain the blend to block content out 👨‍🍳

jhey ʕ•ᴥ•ʔ

159,951 views • 10 months ago

iOS alarm barrel input w/ 3D CSS ⏰ drag gestures + scroll animation mapped to an <input type=time> 👨‍🍳

iOS alarm barrel input w/ 3D CSS ⏰ drag gestures + scroll animation mapped to an <input type=time> 👨‍🍳

jhey ʕ•ᴥ•ʔ

110,070 views • 9 months ago

"can I use it for images?" – Yep! ✅ Could even combine it with CSS scroll-driven animation CSS, am I right? 🔥

"can I use it for images?" – Yep! ✅ Could even combine it with CSS scroll-driven animation CSS, am I right? 🔥

jhey ʕ•ᴥ•ʔ

258,794 views • 2 years ago

Recreate Github's homepage smooth scroll animation in pure CSS with animation-timeline:

Recreate Github's homepage smooth scroll animation in pure CSS with animation-timeline:

Builder.io

12,078 views • 1 year ago

Future CSS Tip! 🔮 You can power micro-interactions with scroll driven animations 😎 Define a range with custom props and hook up to body scroll 📜 .avatar{ animation:shrink; animation-timeline:scroll(root); animation-range:calc(var(--head)*0.9) ...; } CodePen.IO link below! 👇

jhey ʕ•ᴥ•ʔ

147,001 views • 3 years ago

responsive stacked tabs w/ CSS grid 👨‍🍳 + works with keyboard navigation + drag gestures + container queries for orientation

responsive stacked tabs w/ CSS grid 👨‍🍳 + works with keyboard navigation + drag gestures + container queries for orientation

jhey ʕ•ᴥ•ʔ

71,182 views • 10 months ago