Загрузка видео...

Не удалось загрузить видео

Возникла проблема при загрузке этого видео. Это может быть связано с временными проблемами сети или видео может быть недоступно.

На главную

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! 👇show more

jhey ʕ•ᴥ•ʔ

146,382 subscribers

99,168 просмотров • 2 лет назад •via X (Twitter)

Anya Rossi• Live Now

Private livecam show

Комментарии: 9

Фото профиля jhey ▲🐻🎈

jhey ▲🐻🎈2 лет назад

Here's that @CodePen link 🚀 Trying to get some of these demos off the backlog! 😁

Фото профиля Alexander Von Matterhorn

Alexander Von Matterhorn2 лет назад

The only man safe from AI 👆

Фото профиля Simon Vrachliotis

Simon Vrachliotis2 лет назад

OMG amazing use case for scroll() instead of view() — and once again something I never thought about but always wondered how to achieve elegantly. Dude your brain is on another frequency altogether 🌌🧠

Фото профиля Jonny Bergdahl 🇸🇪

Jonny Bergdahl 🇸🇪2 лет назад

Because hiding the scrollbar is SO useful in the first place? Just SHOW IT and stop fucking around.

Фото профиля LegiN 🔴⚫️

LegiN 🔴⚫️2 лет назад

Wow I have done stuff like this only using ResizeObserver or onScroll Very nice

Фото профиля Juan Morales

Juan Morales2 лет назад

Hellooo, I want to launch my project, what is the tool you use to record those videos?

Фото профиля Jef Aerts

Jef Aerts2 лет назад

This is great stuff!

Фото профиля 🤜Nan🌟Em🌟All🤛

🤜Nan🌟Em🌟All🤛2 лет назад

Amazing stuff man 👏

Фото профиля Jeff Jones

Jeff Jones2 лет назад

This would be applicable to horizontal scroll too I'm assuming? I'm looking for something like this for horizontal tabs on smaller screens.

Похожие видео

CSS Tip! 📜 You can create scroll-driven micro-interactions with animation-timeline and custom properties 🔥 .search { animation: shrink; animation-timeline: scroll(); animation-range: 0 calc(var(--header-height) * 0.5); } @keyframes shrink { to { width: calc(100% - var(--button-size); } } The --header-height is being used to dictate the container height for the header. You can use that for the animation-range used across different scroll animations 🤙 For another example, you can animate the box-shadow reveal on the header once the search has stuck 🍡 header { animation: shadow; animation-timeline: scroll(); animation-range: var(--header-height) calc(var(--header-height) * 1.5); } @keyframes shadow { to { box-shadow: 0 5px 10px hsl(0 0% 0%); } } Then you have the little extras! 🧸🎈 Everything powered by the scroll() animation-timeline which hooks into the page scroll. And then using the --header-height in the different animation-range ✨ Give it a try! ⭐️ CodePen.IO link below! 👇

CSS Tip! 📜 You can create scroll-driven micro-interactions with animation-timeline and custom properties 🔥 .search { animation: shrink; animation-timeline: scroll(); animation-range: 0 calc(var(--header-height) * 0.5); } @keyframes shrink { to { width: calc(100% - var(--button-size); } } The --header-height is being used to dictate the container height for the header. You can use that for the animation-range used across different scroll animations 🤙 For another example, you can animate the box-shadow reveal on the header once the search has stuck 🍡 header { animation: shadow; animation-timeline: scroll(); animation-range: var(--header-height) calc(var(--header-height) * 1.5); } @keyframes shadow { to { box-shadow: 0 5px 10px hsl(0 0% 0%); } } Then you have the little extras! 🧸🎈 Everything powered by the scroll() animation-timeline which hooks into the page scroll. And then using the --header-height in the different animation-range ✨ Give it a try! ⭐️ CodePen.IO link below! 👇

jhey ʕ•ᴥ•ʔ

495,956 просмотров • 2 лет назад

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 просмотров • 1 год назад

Responsive inverted reveal scroller with CSS 🤙 img { position: fixed; animation: clip; animation-timeline: --section; animation-range: exit; } @keyframes clip { to { clip-path: inset(100% 0 0 0); } Fix the image, animate clip on parent scroll position (--section) ✨

Responsive inverted reveal scroller with CSS 🤙 img { position: fixed; animation: clip; animation-timeline: --section; animation-range: exit; } @keyframes clip { to { clip-path: inset(100% 0 0 0); } Fix the image, animate clip on parent scroll position (--section) ✨

jhey ʕ•ᴥ•ʔ

90,716 просмотров • 2 лет назад

CSS Tip! 🐳 You can add little details like this scale down on scroll effect with scroll-driven animations and some sticky positioning 🤙 section { animation: scale-down; animation-timeline: view(); animation-range: exit; } @keyframes scale-down { to { scale 0.8; } ] In this smaller example, you can lean into using the position to drive an animation that scales itself down as it leaves the viewport (Seen on the Apple Vision Pro site 🍏) The nice thing here is that if you don't have scroll-driven animations, the user still gets a good experience ✨ So how do you do it? There isn't much to it header { transform-origin: 50% 0%; animation: scale-down both ease-in; animation-timeline: view(); animation-range: exit; view-timeline: --header; } @keyframes scale-down { to { scale: 0.8 0.8; } } That's it. The layout makes use of position: sticky so that the element stays in the shot whilst you scroll the page. As it leaves the page, it scales down inside the 🫶 The other smol animation here is fading the overlay on the video out 😎 Real easy. You may notice the view-timeline you defined above for the 👀 header { view-timeline: --header; } You have a pseudoelement on the text content of the header that lives inside a header > section::before { background: hsl(0 0% 0% / 0.75); opacity: 1; animation: fade both linear; animation-timeline: --header; animation-range: exit-crossing 0% exit 0%; } @keyframes fade { to { opacity: 0; } } You use a slightly smaller range on this with exit-crossing to fade it out before you start the scale down animation 🤏 That's it! Thought this smaller example would be easier to grok for people 🙏 It's also covered with JavaScript if you really want it for your sites 🤙 CodePen.IO link below 👇

CSS Tip! 🐳 You can add little details like this scale down on scroll effect with scroll-driven animations and some sticky positioning 🤙 section { animation: scale-down; animation-timeline: view(); animation-range: exit; } @keyframes scale-down { to { scale 0.8; } ] In this smaller example, you can lean into using the position to drive an animation that scales itself down as it leaves the viewport (Seen on the Apple Vision Pro site 🍏) The nice thing here is that if you don't have scroll-driven animations, the user still gets a good experience ✨ So how do you do it? There isn't much to it header { transform-origin: 50% 0%; animation: scale-down both ease-in; animation-timeline: view(); animation-range: exit; view-timeline: --header; } @keyframes scale-down { to { scale: 0.8 0.8; } } That's it. The layout makes use of position: sticky so that the element stays in the shot whilst you scroll the page. As it leaves the page, it scales down inside the 🫶 The other smol animation here is fading the overlay on the video out 😎 Real easy. You may notice the view-timeline you defined above for the 👀 header { view-timeline: --header; } You have a pseudoelement on the text content of the header that lives inside a header > section::before { background: hsl(0 0% 0% / 0.75); opacity: 1; animation: fade both linear; animation-timeline: --header; animation-range: exit-crossing 0% exit 0%; } @keyframes fade { to { opacity: 0; } } You use a slightly smaller range on this with exit-crossing to fade it out before you start the scale down animation 🤏 That's it! Thought this smaller example would be easier to grok for people 🙏 It's also covered with JavaScript if you really want it for your sites 🤙 CodePen.IO link below 👇

jhey ʕ•ᴥ•ʔ

146,270 просмотров • 2 лет назад

CSS Tip! 🚥 You can create these trending expanding scroll indicators with scroll-driven animations and flex 🤙 .indicator { animation: grow; animation-range: contain calc(50% - var(--size)...; animation-timeline: var(--card); } @keyframes grow { 50% { flex: 3; }} What's the trick? Put the indicators in a container using flex layout and set a width larger than the number of indicators 😉 .indicators { aspect-ratio: 7 / 1; display: flex; } Importantly, set no gap 🤏 To mimic the gap set a transparent border on each indicator and set the background using padding-box .indicator { background: linear-gradient(#fff, #fff) padding-box; border-radius: 50px; border: 4px solid transparent; } Now for the animation. You want to create a view-timeline for each card that moves across 🤙 li:nth-of-type(1) { view-timeline: --one inline; } li:nth-of-type(2) { view-timeline: --two inline; } Make sure they use the inline axis too! The trick is hoisting these view-timeline so the indicators can use them with timeline-scope 👀 .track { timeline-scope: --one, --two, ...; } All that's left is for you to create the animation piece using some calc with the card size ⚡️ .indicator { --size: calc(var(--card-width) * 0.9); animation: grow both linear; animation-range: contain calc(50% - var(--size)) contain calc(50% + var(--size)); } .indicator:nth-of-type(1) { animation-timeline: --one; } .indicator:nth-of-type(2) { animation-timeline: --two; } @keyframes grow { 50% { flex: 3; }} And there you have it, responsive scroll indicators using CSS scroll-driven animations 😎 Sprinkle a little JavaScript to make them clickable and scroll the the right card ✨ const shift = (event) => { if (event.target.tagName === "BUTTON") { const index = [...event.target.parentNode.children].indexOf(event.target); const item = document.querySelector(`li:nth-of-type(${index + 1})`); item.scrollIntoView({ behavior: "smooth", inline: "center" }); } }; As always, any questions or suggestions, let me know. I've put a JavaScript fallback in to use GSAP in browsers that don't have scroll-driven animations 🫶 CodePen.IO link below! 👇

CSS Tip! 🚥 You can create these trending expanding scroll indicators with scroll-driven animations and flex 🤙 .indicator { animation: grow; animation-range: contain calc(50% - var(--size)...; animation-timeline: var(--card); } @keyframes grow { 50% { flex: 3; }} What's the trick? Put the indicators in a container using flex layout and set a width larger than the number of indicators 😉 .indicators { aspect-ratio: 7 / 1; display: flex; } Importantly, set no gap 🤏 To mimic the gap set a transparent border on each indicator and set the background using padding-box .indicator { background: linear-gradient(#fff, #fff) padding-box; border-radius: 50px; border: 4px solid transparent; } Now for the animation. You want to create a view-timeline for each card that moves across 🤙 li:nth-of-type(1) { view-timeline: --one inline; } li:nth-of-type(2) { view-timeline: --two inline; } Make sure they use the inline axis too! The trick is hoisting these view-timeline so the indicators can use them with timeline-scope 👀 .track { timeline-scope: --one, --two, ...; } All that's left is for you to create the animation piece using some calc with the card size ⚡️ .indicator { --size: calc(var(--card-width) * 0.9); animation: grow both linear; animation-range: contain calc(50% - var(--size)) contain calc(50% + var(--size)); } .indicator:nth-of-type(1) { animation-timeline: --one; } .indicator:nth-of-type(2) { animation-timeline: --two; } @keyframes grow { 50% { flex: 3; }} And there you have it, responsive scroll indicators using CSS scroll-driven animations 😎 Sprinkle a little JavaScript to make them clickable and scroll the the right card ✨ const shift = (event) => { if (event.target.tagName === "BUTTON") { const index = [...event.target.parentNode.children].indexOf(event.target); const item = document.querySelector(`li:nth-of-type(${index + 1})`); item.scrollIntoView({ behavior: "smooth", inline: "center" }); } }; As always, any questions or suggestions, let me know. I've put a JavaScript fallback in to use GSAP in browsers that don't have scroll-driven animations 🫶 CodePen.IO link below! 👇

jhey ʕ•ᴥ•ʔ

575,728 просмотров • 2 лет назад

$A CSS scroll version of the gooey island 🤙 .island { filter: url(#svg-goo); } .island__avatar { animation: hide; animation-timeline: scroll(); animation-range: 0 var(--header-size); transform-origin: 50% 0; } @keyframes hide { to { translate: -50% -80px; scale: 0.3; } }$

A CSS scroll version of the gooey island 🤙 .island { filter: url(#svg-goo); } .island__avatar { animation: hide; animation-timeline: scroll(); animation-range: 0 var(--header-size); transform-origin: 50% 0; } @keyframes hide { to { translate: -50% -80px; scale: 0.3; } }

jhey ʕ•ᴥ•ʔ

154,954 просмотров • 2 лет назад

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,850 просмотров • 10 месяцев назад

CSS scroll to decrypt 🤖 The trick is translating text on scroll within a clipped element ✨ (Watch 🎞️) .char { animation: t both steps(10); animation-timeline: --heading; animation-range: contain calc(var(--i) * 1%)...; } @keyframes t { to { translate: 0 calc(100% - 1lh);}}

CSS scroll to decrypt 🤖 The trick is translating text on scroll within a clipped element ✨ (Watch 🎞️) .char { animation: t both steps(10); animation-timeline: --heading; animation-range: contain calc(var(--i) * 1%)...; } @keyframes t { to { translate: 0 calc(100% - 1lh);}}

jhey ʕ•ᴥ•ʔ

264,678 просмотров • 2 лет назад

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 просмотров • 2 лет назад

CSS Tip! 📜 You can use scroll-driven animations to progressively enhance collapsing a floating call to action 🤏 .cta { animation: shrink; animation-timeline: scroll(); animation-range: 0 100px; } @keyframes shrink { to { width: 48px; } } That's the gist of it. Use the body scroll position with animation-timeline: scroll(). Define the animation-range as when you have scrolled 100px. There's a little more though 🤓 That would "scrub" the width animation. Ideally, you want to trigger that animation. You could animate a custom property with steps() timing and use that to define the width ✨ @property --scrub { syntax: ' '; inherits: true; initial-value: 0; } body { animation: scrub both steps(1, end); animation-timeline: scroll(); animation-range: 0 100px; } Then transition the --scrub property on the CTA and use it for the width 🤙 .cta { transition: --scrub 0.2s; width: calc(48px + (120px * (1 - (var(--scrub) / 100)))); } Other animations are a matter of preference and timing. For example, you could then make the hand wave, scale down the size, and then slide a gradient across 😉 They have the same structure and technique as the original concept. Waving the hand? 👋 Run it twice, offset the transform-origin. .hand { animation: wave both linear 2; animation-timeline: scroll(); animation-range: 30vh 50vh; transform-origin: 65% 75%; } @keyframes wave { 50% { rotate: 20deg; } } How's it progressively enhanced? Wrap everything in a @supports query and a @media query. If there isn't support, users still get a good experience. It's a floating action button that's circular and already collapsed 🤙 @supports(animation-timeline: scroll()) { @media(prefers-reduced-motion: no-preference) {...} } Definitely have a play with the code. Amazing what we're going to be able to do with CSS alone! 🔥 CodePen.IO link below! 👇

CSS Tip! 📜 You can use scroll-driven animations to progressively enhance collapsing a floating call to action 🤏 .cta { animation: shrink; animation-timeline: scroll(); animation-range: 0 100px; } @keyframes shrink { to { width: 48px; } } That's the gist of it. Use the body scroll position with animation-timeline: scroll(). Define the animation-range as when you have scrolled 100px. There's a little more though 🤓 That would "scrub" the width animation. Ideally, you want to trigger that animation. You could animate a custom property with steps() timing and use that to define the width ✨ @property --scrub { syntax: ' '; inherits: true; initial-value: 0; } body { animation: scrub both steps(1, end); animation-timeline: scroll(); animation-range: 0 100px; } Then transition the --scrub property on the CTA and use it for the width 🤙 .cta { transition: --scrub 0.2s; width: calc(48px + (120px * (1 - (var(--scrub) / 100)))); } Other animations are a matter of preference and timing. For example, you could then make the hand wave, scale down the size, and then slide a gradient across 😉 They have the same structure and technique as the original concept. Waving the hand? 👋 Run it twice, offset the transform-origin. .hand { animation: wave both linear 2; animation-timeline: scroll(); animation-range: 30vh 50vh; transform-origin: 65% 75%; } @keyframes wave { 50% { rotate: 20deg; } } How's it progressively enhanced? Wrap everything in a @supports query and a @media query. If there isn't support, users still get a good experience. It's a floating action button that's circular and already collapsed 🤙 @supports(animation-timeline: scroll()) { @media(prefers-reduced-motion: no-preference) {...} } Definitely have a play with the code. Amazing what we're going to be able to do with CSS alone! 🔥 CodePen.IO link below! 👇

jhey ʕ•ᴥ•ʔ

177,952 просмотров • 2 лет назад

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 просмотров • 2 лет назад

CSS Tip! ✨ You can create these parallax effects and image cross-fades with scroll-driven animations 🤙 img { animation: fade; animation-timeline: view(); mix-blend-mode: plus-lighter } img:last-of-type { animation-direction: reverse; } @keyframes fade { to { opacity: 0; }} This one's fun! 😁 The trick with the cross-fading image is to make use of one animation that runs at the same time on two images inside a container. You use the same animation, animation-timeline, and animation-range. But, you use animation-direction: reverse on one of the images so they go in the opposite direction 🫶 The use of mix-blend-mode: plus-lighter; produces a better cross-fade result 💯 A viewTimeline (view()) works because you know that both images are the same height. The range you can use is img { animation-timeline: view(); animation-range: cover 45% cover 55%; } That means when the image has covered 45% of the scrollport (In this case, the window), start the animation. And finish when it has covered 55% 🎬 How about the slight parallax? This is a trick with calc(). You know the top of the small image and the big image line up. And you can do this by absolutely placing the caption outside of the small image. The trick is to translate the small image by a distance so it lines up with the bottom of the big image. You can do that like this :root { --catch-up: calc( var(--big-height) - var(--small-height) ); } @keyframes move { to { translate: 0 var(--catch-up); }} Then drive that animation with a scroll-driven animation using the container of both images as the driver 🤙 /* section contains both images */ section { view-timeline: --container; } .img-fader { animation: catch-up both linear; animation-timeline: --container; animation-range: 50vh calc(100vh + (var(--big-height) * 0.25)); } That's it! Scroll-driven image cross-fading and parallax effects without any JavaScript. This demo will work in all browsers as there is some JavaScript in place where the API isn't supported 🤙 To do that, it uses GSAP ScrollTrigger 🏆 As always, any questions, requests, etc. hit me up! 🤙 CodePen.IO link below 👇

CSS Tip! ✨ You can create these parallax effects and image cross-fades with scroll-driven animations 🤙 img { animation: fade; animation-timeline: view(); mix-blend-mode: plus-lighter } img:last-of-type { animation-direction: reverse; } @keyframes fade { to { opacity: 0; }} This one's fun! 😁 The trick with the cross-fading image is to make use of one animation that runs at the same time on two images inside a container. You use the same animation, animation-timeline, and animation-range. But, you use animation-direction: reverse on one of the images so they go in the opposite direction 🫶 The use of mix-blend-mode: plus-lighter; produces a better cross-fade result 💯 A viewTimeline (view()) works because you know that both images are the same height. The range you can use is img { animation-timeline: view(); animation-range: cover 45% cover 55%; } That means when the image has covered 45% of the scrollport (In this case, the window), start the animation. And finish when it has covered 55% 🎬 How about the slight parallax? This is a trick with calc(). You know the top of the small image and the big image line up. And you can do this by absolutely placing the caption outside of the small image. The trick is to translate the small image by a distance so it lines up with the bottom of the big image. You can do that like this :root { --catch-up: calc( var(--big-height) - var(--small-height) ); } @keyframes move { to { translate: 0 var(--catch-up); }} Then drive that animation with a scroll-driven animation using the container of both images as the driver 🤙 /* section contains both images / section { view-timeline: --container; } .img-fader { animation: catch-up both linear; animation-timeline: --container; animation-range: 50vh calc(100vh + (var(--big-height) 0.25)); } That's it! Scroll-driven image cross-fading and parallax effects without any JavaScript. This demo will work in all browsers as there is some JavaScript in place where the API isn't supported 🤙 To do that, it uses GSAP ScrollTrigger 🏆 As always, any questions, requests, etc. hit me up! 🤙 CodePen.IO link below 👇

jhey ʕ•ᴥ•ʔ

242,205 просмотров • 2 лет назад

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 просмотров • 2 лет назад

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 просмотров • 3 лет назад

Future CSS Tip! 🍏 You can combine scroll-driven animations with background-clip to create gradient text reveals 😍 p { animation-name: move-bg, fade-in; animation-fill-mode: both; animation-timing-function: linear; animation-timeline: scroll(root); animation-range: 0 100vh, 40vh 100vh; } /* Multiple animations with shared timeline and different ranges 👀 */ keyframes move-bg { to { background-position: 50% 100%; } } keyframes fade-in { 0% { opacity: 0; } } The trick here is creating a large background with a radial gradient and using background-clip: text on the element with color: transparent ✨ p { background: radial-gradient(50% 100% at 50% 100%, hsl(var(--accent, 10) 90% 95%), hsl(var(--accent, 10) 90% 50%), transparent 50%); background-size: 400% 600%; -webkit-background-clip: text; background-position: 50% 0; } Then we animate the background-position to reveal the colorful part that reveal the text 😎 Another #AppleEvent related scrolling demo coming tomorrow 😅 CodePen.IO link below! 👇

Future CSS Tip! 🍏 You can combine scroll-driven animations with background-clip to create gradient text reveals 😍 p { animation-name: move-bg, fade-in; animation-fill-mode: both; animation-timing-function: linear; animation-timeline: scroll(root); animation-range: 0 100vh, 40vh 100vh; } /* Multiple animations with shared timeline and different ranges 👀 */ keyframes move-bg { to { background-position: 50% 100%; } } keyframes fade-in { 0% { opacity: 0; } } The trick here is creating a large background with a radial gradient and using background-clip: text on the element with color: transparent ✨ p { background: radial-gradient(50% 100% at 50% 100%, hsl(var(--accent, 10) 90% 95%), hsl(var(--accent, 10) 90% 50%), transparent 50%); background-size: 400% 600%; -webkit-background-clip: text; background-position: 50% 0; } Then we animate the background-position to reveal the colorful part that reveal the text 😎 Another #AppleEvent related scrolling demo coming tomorrow 😅 CodePen.IO link below! 👇

jhey ʕ•ᴥ•ʔ

180,292 просмотров • 3 лет назад

Extra CSS Trick! 🚀 Use scroll-padding-inline with some calc on the track to make the indicator click JS free 🤙 (See video 🎬) ul { scroll-behavior: smooth; scroll-padding-inline: calc( 50vw - (var(--card-width) * 0.5 ); } You could color those indicators as requested by 🚨 abelardoit 🚨 .indicator::after { background: hsl(var(--hue) 90% 70%); } @keyframes show { 50% { opacity: 1; }} Combined with the same animation properties from the original demo ⭐️ Rad! 😎

Extra CSS Trick! 🚀 Use scroll-padding-inline with some calc on the track to make the indicator click JS free 🤙 (See video 🎬) ul { scroll-behavior: smooth; scroll-padding-inline: calc( 50vw - (var(--card-width) * 0.5 ); } You could color those indicators as requested by 🚨 abelardoit 🚨 .indicator::after { background: hsl(var(--hue) 90% 70%); } @keyframes show { 50% { opacity: 1; }} Combined with the same animation properties from the original demo ⭐️ Rad! 😎

jhey ʕ•ᴥ•ʔ

94,855 просмотров • 2 лет назад

CSS Trick 🍏 You can create that Apple-style blowout text effect with CSS scroll animations and fixed positioning ⚡️ .word { animation: blowout; animation-timeline: --section; } @keyframes blowout { 0%, 95% { background: transparent; } to { transform: translateZ(99vh); background: #000; } } The trick here is to fix the position of some things in your layout and then animate them based on their non-fixed containers ⭐️ The .word is position: fixed within a that has a height of 200vh section { view-timeline: --section; } section:first-of-type { height: 200vh; } Every section has a view-timeline: --section that creates a scoped ViewTimeline for each section's children 🤙 As that first section scrolls out of view, you increase its opacity and move it on the z-axis towards you. That gives it the impression of scaling up 🆙 .word { animation: blowout, fade-in; animation-timing-function: ease-in; animation-fill-mode: both; animation-timeline: --section; animation-range: exit-crossing 10% exit 0%; } You can use the exit-crossing range combined with the exit range to get a timing you like ✨ Definitely experiment with these ranges to see how they play. The timing function creates interesting effects too! At the same time as the text scales up, you need to fade in the video and the text that goes with it. Again, you can use the parent container's ViewTimeline --section p, video { animation: fade-in, fade-out; animation-timing-function: ease-in; animation-fill-mode: both; animation-timeline: --section; } p { animation-range: entry 10% entry 35%, exit 0% exit 25%; } video { animation-range: entry 0% entry 25%, exit 10% exit 35%; } The timings are slightly different here. Again, you can play with them to get something that feels right for you! @keyframes fade-in { to { opacity: 1; }} @keyframes fade-out { to { opacity: 0; }} Theoretically, you should be able to do something with animation-direction: reverse/alternate like yesterday's demo video { animation: fade 2 both linear alternate-reverse; } The trick with this effect is all about timing and creating containers that are bigger than the content and using them to drive the animations 🏎️ The scroll-driven signature is a bonus! ✍️ Perhaps a follow-up on that one 🤙 As always, any questions, requests, etc. Hit me up! With this demo, the GreenSock ScrollTrigger code is included where the CSS scroll-driven animations API is not supported 🙌 That means you could use this demo today! CodePen.IO link below! 👇

CSS Trick 🍏 You can create that Apple-style blowout text effect with CSS scroll animations and fixed positioning ⚡️ .word { animation: blowout; animation-timeline: --section; } @keyframes blowout { 0%, 95% { background: transparent; } to { transform: translateZ(99vh); background: #000; } } The trick here is to fix the position of some things in your layout and then animate them based on their non-fixed containers ⭐️ The .word is position: fixed within a that has a height of 200vh section { view-timeline: --section; } section:first-of-type { height: 200vh; } Every section has a view-timeline: --section that creates a scoped ViewTimeline for each section's children 🤙 As that first section scrolls out of view, you increase its opacity and move it on the z-axis towards you. That gives it the impression of scaling up 🆙 .word { animation: blowout, fade-in; animation-timing-function: ease-in; animation-fill-mode: both; animation-timeline: --section; animation-range: exit-crossing 10% exit 0%; } You can use the exit-crossing range combined with the exit range to get a timing you like ✨ Definitely experiment with these ranges to see how they play. The timing function creates interesting effects too! At the same time as the text scales up, you need to fade in the video and the text that goes with it. Again, you can use the parent container's ViewTimeline --section p, video { animation: fade-in, fade-out; animation-timing-function: ease-in; animation-fill-mode: both; animation-timeline: --section; } p { animation-range: entry 10% entry 35%, exit 0% exit 25%; } video { animation-range: entry 0% entry 25%, exit 10% exit 35%; } The timings are slightly different here. Again, you can play with them to get something that feels right for you! @keyframes fade-in { to { opacity: 1; }} @keyframes fade-out { to { opacity: 0; }} Theoretically, you should be able to do something with animation-direction: reverse/alternate like yesterday's demo video { animation: fade 2 both linear alternate-reverse; } The trick with this effect is all about timing and creating containers that are bigger than the content and using them to drive the animations 🏎️ The scroll-driven signature is a bonus! ✍️ Perhaps a follow-up on that one 🤙 As always, any questions, requests, etc. Hit me up! With this demo, the GreenSock ScrollTrigger code is included where the CSS scroll-driven animations API is not supported 🙌 That means you could use this demo today! CodePen.IO link below! 👇

jhey ʕ•ᴥ•ʔ

270,144 просмотров • 2 лет назад

Future CSS Tip! 🔮 You can create sweet scroll-driven micro-interactions using CSS scroll-driven animations 😎 .avatar { animation: scale-down; animation-timeline: scroll(); animation-range: var(--header-range); } @ keyframes scale-down { to { scale: 0.3; } } What's happening in this one? 👀 1. Avatar moves and scales down as the header sticks 2. Name changes color and slides over 3. Header darkens to give the text contrast 4. Header gets a shadow 5. Notice the avatar scrub too! 👀 It's scroll-driving the sprite animation technique we went over earlier in the week ✨ So much fun! ✨ Could even tie in the new easings from earlier too! CodePen.IO link below! 👇

jhey ʕ•ᴥ•ʔ

685,661 просмотров • 3 лет назад

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 просмотров • 2 лет назад