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

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

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

На главную

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... show more

jhey ʕ•ᴥ•ʔ

146,442 subscribers

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

Наука и технологии Образование

Anya Rossi• Live Now

Private livecam show

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

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

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

Here's that @CodePen link! 🚀 Remember. This will only work in Chromium at the moment 🤓

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

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

And here's the @ChromiumDev issue that got raised from making this demo 🤙 (Fix rolling out into Chrome) Another example of why making random demos can help the <web platform/> 💯 Make things. Raise bugs. Share stuff! 🤓

Фото профиля Terry

Terry2 лет назад

Safari be like

Фото профиля Matt

Matt2 лет назад

Just made exactly this, this afternoon 🔥

Фото профиля Abd Mcs

Abd Mcs2 лет назад

This is nice. I used to do this in js. I’m always inclined to css solution before get to javascript. Bookmarked

Фото профиля Luke Haines

Luke Haines2 лет назад

It doesn't render properly on my version of Chrome. When it slides in, all of the words are too small, and then after a delay they size back up to the correct height!

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

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

Yep – I'm not sure it's quite rolled out to everyone on Chrome yet. It should work as expected in Canary. Look out for that Chrome update 🤙

Фото профиля Ronak Bokaria

Ronak Bokaria2 лет назад

amazing 👏

Фото профиля Mainro Code

Mainro Code2 лет назад

@SaveToNotion

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

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

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

jhey ʕ•ᴥ•ʔ

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

Future UI && CSS Tip! 🔮 You could use View Transitions to animate CSS grid position and create an OSX-style exposé for a portfolio 🔥 It's a grid where things move based on state. Wrapped in a VT 🤙 [data-expose] section{ grid-area:var(--x)/var(--y); } CodePen.IO link below 👇

Future UI && CSS Tip! 🔮 You could use View Transitions to animate CSS grid position and create an OSX-style exposé for a portfolio 🔥 It's a grid where things move based on state. Wrapped in a VT 🤙 [data-expose] section{ grid-area:var(--x)/var(--y); } CodePen.IO link below 👇

jhey ʕ•ᴥ•ʔ

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

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

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

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

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

jhey ʕ•ᴥ•ʔ

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

CSS Tip! 🤙 You can create this magnetic :hover effect with CSS anchor positioning, :has, and zero JS 🔥 article { anchor-name: --develop; } ul:has(li:hover) { --anchor: --develop; } ul::after { inset: anchor(var(--anchor) top) anchor(var(--anchor) right) ... ; } How do you keep it clean when entering/exiting the list? Use transition-delay ⭐️ ul:has(li:hover) { --active: 1; } ul::after { opacity: var(--active, 0); transition: opacity 0.2s, inset 0.2s 0.2s; } ul:hover::after { transition: opacity 0.2s 0.2s, inset 0.2s; } This is a cool trick you can use. Delay the opacity on enter and then delay the position on exit. That way you don't get a weird effect on enter/exit 🙏 This one's a "Future" CSS tip 🔮 But, the demo will work in all browsers in some way. The idea is to progressively enhance it. 1. No JavaScript and no Anchor Positioning? Highlight on hover ✏️ 2. No Anchor Positioning? Use JavaScript with a single event listener to update the inset values using elementFromPoint and .closest 🫶 3. If there is Anchor Positioning support, use that and don't fire the JavaScript. You can check with CSS.supports('anchor-name: --anchor') ✨ That's it! CodePen.IO link below! 👇

CSS Tip! 🤙 You can create this magnetic :hover effect with CSS anchor positioning, :has, and zero JS 🔥 article { anchor-name: --develop; } ul:has(li:hover) { --anchor: --develop; } ul::after { inset: anchor(var(--anchor) top) anchor(var(--anchor) right) ... ; } How do you keep it clean when entering/exiting the list? Use transition-delay ⭐️ ul:has(li:hover) { --active: 1; } ul::after { opacity: var(--active, 0); transition: opacity 0.2s, inset 0.2s 0.2s; } ul:hover::after { transition: opacity 0.2s 0.2s, inset 0.2s; } This is a cool trick you can use. Delay the opacity on enter and then delay the position on exit. That way you don't get a weird effect on enter/exit 🙏 This one's a "Future" CSS tip 🔮 But, the demo will work in all browsers in some way. The idea is to progressively enhance it. 1. No JavaScript and no Anchor Positioning? Highlight on hover ✏️ 2. No Anchor Positioning? Use JavaScript with a single event listener to update the inset values using elementFromPoint and .closest 🫶 3. If there is Anchor Positioning support, use that and don't fire the JavaScript. You can check with CSS.supports('anchor-name: --anchor') ✨ That's it! CodePen.IO link below! 👇

jhey ʕ•ᴥ•ʔ

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

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

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

jhey ʕ•ᴥ•ʔ

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

Future CSS Tip! 🔮 You can create this scrolling image pop-out effect with CSS scroll-driven animations and zero JS! 🔥 .pop { view-timeline-name: --pop; } img { animation: slide both; animation-timeline: --pop; animation-range: entry 100% cover 50%; } .skateboarder { --x: 0; --y: -45%; } @ keyframes slide { to { translate: var(--x) var(--y); } } The "trick" is to layer up two image elements and keep one clipped by the container 🤙 Slide them both together and it will look like one pops out of the container 🎈 You can leverage scoped custom properties to translate by different distances too! 😎 You can use macOS's built-in image background removal tool to get the pop-out image ✨ And for added effect, you can animate the brightness on that to make it stand out ⭐️ CodePen.IO link below! 👇

Future CSS Tip! 🔮 You can create this scrolling image pop-out effect with CSS scroll-driven animations and zero JS! 🔥 .pop { view-timeline-name: --pop; } img { animation: slide both; animation-timeline: --pop; animation-range: entry 100% cover 50%; } .skateboarder { --x: 0; --y: -45%; } @ keyframes slide { to { translate: var(--x) var(--y); } } The "trick" is to layer up two image elements and keep one clipped by the container 🤙 Slide them both together and it will look like one pops out of the container 🎈 You can leverage scoped custom properties to translate by different distances too! 😎 You can use macOS's built-in image background removal tool to get the pop-out image ✨ And for added effect, you can animate the brightness on that to make it stand out ⭐️ CodePen.IO link below! 👇

jhey ʕ•ᴥ•ʔ

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

👉 Lemme show you how I abuse the browsers new "view transition" API to get a kind of auto-animate or magic-move situation (like in my laracon slides) It's so unbelievably rad to me. If you've ever tried to manually transition a list item removal or something, you know how flip-dippin hard it is, and this makes it caaaaakeeeeeee 👇

👉 Lemme show you how I abuse the browsers new "view transition" API to get a kind of auto-animate or magic-move situation (like in my laracon slides) It's so unbelievably rad to me. If you've ever tried to manually transition a list item removal or something, you know how flip-dippin hard it is, and this makes it caaaaakeeeeeee 👇

Caleb Porzio ⚡️

33,191 просмотров • 1 год назад

Future CSS Tip! 🔮 You can create responsive animated text reveals with CSS scroll-driven animations 🔥 section { /* The red element in the video */ view-timeline-name: --section; } p { animation: fill both linear; animation-timeline: --section; animation-range: cover; } keyframes fill { to { --fill: 1; } } No JavaScript required with this trick 😎 What's happening there then? Well, we're animating a custom property value using @ property. @ property --fill { initial-value: 0; syntax: ' '; inherits: true; } Then the trick is background clipping the text and filling it with a multiline background by animating the background-position to fill the text 🤓 span { background-position-x: calc(-100vmax + (var(--progress) * 100vmax)); background-clip: text; color: transparent; } CodePen.IO link below 👇

Future CSS Tip! 🔮 You can create responsive animated text reveals with CSS scroll-driven animations 🔥 section { /* The red element in the video / view-timeline-name: --section; } p { animation: fill both linear; animation-timeline: --section; animation-range: cover; } keyframes fill { to { --fill: 1; } } No JavaScript required with this trick 😎 What's happening there then? Well, we're animating a custom property value using @ property. @ property --fill { initial-value: 0; syntax: ' '; inherits: true; } Then the trick is background clipping the text and filling it with a multiline background by animating the background-position to fill the text 🤓 span { background-position-x: calc(-100vmax + (var(--progress) 100vmax)); background-clip: text; color: transparent; } CodePen.IO link below 👇

jhey ʕ•ᴥ•ʔ

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

Rich Barton (Expedia & Zillow CEO) on how to name your company “There’s an easy way and hard way. You can use a literal word (hotels dot-com). You can use an existing word but make a new application of it (Apple). Or you can invent a new word.” As he explains, there are pros and cons to each approach: 1. Use a literal word “The easy way is if you're building a travel site to call it hotels. com…Every category has a literal word dot-com. The advantages to that are it's easy to explain to people what you do. And the disadvantages to that are you don't own any brand equity,” 2. Take a known word and give it a new meaning ”Apple Computer. Amazon. That’s viable, but you have to build a new definition for that word, which those companies obviously did successfully.” 3. Make up a new word “The hard way, and the best way is to make up a word, which is super hard because you have to tell people what the word means,” “You have to define it for them. But once you do, you own that word. The definition of that word is yours and only yours.” Rich chose to invent new words for his companies Zillow and Expedia. Video source: Tim Ferriss (2025)

Startup Archive

14,813 просмотров • 1 год назад

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

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

jhey ʕ•ᴥ•ʔ

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

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

$Future CSS Tip! 🍏 You can create that Apple style blow out text effect with CSS scroll-driven animations ⚡️ No JavaScript! The trick is to animate SVG text along the z-axis using 3D transforms 👀 .word { animation: blow-out both ease-in; animation-timeline: --section; 👈 animation-range: exit-crossing 10% exit 0%; } keyframes blow-out { to { transform: translate3d(0.05ch, 0, 99vh); } } The animation makes the text cover the viewport and blends into the next section which has the same background-color 🤙 The section is set to 200vh. But the wrapper around the SVG text defines perspective and transform-style .section__content { transform-style: preserve-3d; 👈 perspective: 100vh; } We're using an SVG to maintain the crispness of the text as it scales up ✨ Use these attributes on the within the SVG to align things 🤙 Your Name It's the last day of #AppleEvent week but I do have some more of these I'll put together next week 😉 CodePen.IO link below! 👇$

Future CSS Tip! 🍏 You can create that Apple style blow out text effect with CSS scroll-driven animations ⚡️ No JavaScript! The trick is to animate SVG text along the z-axis using 3D transforms 👀 .word { animation: blow-out both ease-in; animation-timeline: --section; 👈 animation-range: exit-crossing 10% exit 0%; } keyframes blow-out { to { transform: translate3d(0.05ch, 0, 99vh); } } The animation makes the text cover the viewport and blends into the next section which has the same background-color 🤙 The section is set to 200vh. But the wrapper around the SVG text defines perspective and transform-style .section__content { transform-style: preserve-3d; 👈 perspective: 100vh; } We're using an SVG to maintain the crispness of the text as it scales up ✨ Use these attributes on the within the SVG to align things 🤙 Your Name It's the last day of #AppleEvent week but I do have some more of these I'll put together next week 😉 CodePen.IO link below! 👇

jhey ʕ•ᴥ•ʔ

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

CSS Tip! ✨ You can lean into form control state and layered backgrounds to create input status strokes 😎 input:valid { --valid: 1; } input { background: var(--bg) padding-box, ..., var(--valid-bg) calc((1 - var(--valid)) * 100cqi) 0 / 100% 100% border-box; } The trick is to layer up backgrounds using background-clip to leave a border space 🤏 Applying a transparent border gives you the space for the layered background to transition in 🎞️ Then you can use custom properties to dictate the background-position of each layer. By default, the valid and invalid layers are positioned outside the bounding box. But when one of those states is active, the background layer transitions in to 0 0. To respect people's animations preferences, we can wrap that transition in a media query 🤙 @media (prefers-reduced-motion: no-preference) { input { transition: background-position: 0.5s; } } Was revisiting techniques around :has and :user-valid and it dawned that you could do it like this too! Hope you find it useful! p.s Don't rely on color to communicate form status. It's a cool trick though for an added touch ✨ CodePen.IO link below! 👇

CSS Tip! ✨ You can lean into form control state and layered backgrounds to create input status strokes 😎 input:valid { --valid: 1; } input { background: var(--bg) padding-box, ..., var(--valid-bg) calc((1 - var(--valid)) * 100cqi) 0 / 100% 100% border-box; } The trick is to layer up backgrounds using background-clip to leave a border space 🤏 Applying a transparent border gives you the space for the layered background to transition in 🎞️ Then you can use custom properties to dictate the background-position of each layer. By default, the valid and invalid layers are positioned outside the bounding box. But when one of those states is active, the background layer transitions in to 0 0. To respect people's animations preferences, we can wrap that transition in a media query 🤙 @media (prefers-reduced-motion: no-preference) { input { transition: background-position: 0.5s; } } Was revisiting techniques around :has and :user-valid and it dawned that you could do it like this too! Hope you find it useful! p.s Don't rely on color to communicate form status. It's a cool trick though for an added touch ✨ CodePen.IO link below! 👇

jhey ʕ•ᴥ•ʔ

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