Video yükleniyor...

Video Yüklenemedi

Bu video yüklenirken bir sorun oluştu. Bu geçici bir ağ sorunundan kaynaklanıyor olabilir veya video kullanılamıyor olabilir.

Ana Sayfaya Dön

View Transitions with CSS linear() to create a light flicker effect on theme change 💡 [data-theme='light']::view-transition-group(root) { animation-timing-function: var(--flicker); } jus' set a custom timing function on the default animation 👨‍🍳 bonus: drag switch ✨

jhey ʕ•ᴥ•ʔ

147,485 subscribers

113,597 görüntüleme • 11 ay önce •via X (Twitter)

Anya Rossi• Live Now

Private livecam show

26 Yorum

'); DROP Ţ̸͓̠̼͖̖̆ͫ̑̒̿ͪ͞A̐͏̠̫͔̰̖ͅͅB̉͌͒̈LE name; -- profil fotoğrafı

'); DROP Ţ̸͓̠̼͖̖̆ͫ̑̒̿ͪ͞A̐͏̠̫͔̰̖ͅͅB̉͌͒̈LE name; --11 ay önce

when my kids ask me what a wizard is I’m going to send them to you

jhey ʕ•ᴥ•ʔ profil fotoğrafı

jhey ʕ•ᴥ•ʔ11 ay önce

we've still got plenty of candy tonight too for "Trick or Treat" 🍬😅

紫苏子ACG profil fotoğrafı

紫苏子ACG11 ay önce

Taking yours as a reference, I have now created my own version.

Josh profil fotoğrafı

Josh11 ay önce

lit! is this on a public GitHub somewhere?

Rajesh profil fotoğrafı

Rajesh11 ay önce

Jhey is so back

Timileyin Olaifa UX 🦄 profil fotoğrafı

Timileyin Olaifa UX 🦄11 ay önce

This is fun! 😂 Drop a link, I wanna play

Evert Junior profil fotoğrafı

Evert Junior11 ay önce

@nicolettiFPS

Yashjit profil fotoğrafı

Yashjit11 ay önce

I wish you shared the code for it lol I'm obsessed with it

Jacbita.eth🟠 profil fotoğrafı

Jacbita.eth🟠11 ay önce

細節控狂喜

0xMira.ETH profil fotoğrafı

0xMira.ETH11 ay önce

gerçek sahne gibi

Slavi profil fotoğrafı

Slavi11 ay önce

This is some grand master level of css here 🔥

hazim profil fotoğrafı

hazim11 ay önce

King of css

Stephen Way profil fotoğrafı

Stephen Way11 ay önce

My monitor flickered just reading this 🔆

Davies profil fotoğrafı

Davies11 ay önce

What's the code for the wiggly pull string

Unbiased Dev profil fotoğrafı

Unbiased Dev11 ay önce

Small "umm actually" for a lightbulb to flicker it would need to be a fluorescent bulb, the light in your demo is incandescent :)

jhey ʕ•ᴥ•ʔ profil fotoğrafı

jhey ʕ•ᴥ•ʔ11 ay önce

ummm akshually, how do you know? it's my bulb 😉

jhey ʕ•ᴥ•ʔ profil fotoğrafı

jhey ʕ•ᴥ•ʔ11 ay önce

p.s incandescent flicker can also be a thing, i've been through this on here before

Unbiased Dev profil fotoğrafı

Unbiased Dev11 ay önce

Fair enough, I guess, in theory, yes but it's more of an electrical issue than a bulb one. It's just usually known for the gas ones to flicker because of the starter.

jhey ʕ•ᴥ•ʔ profil fotoğrafı

jhey ʕ•ᴥ•ʔ11 ay önce

yeah 💯 thing is, designing this as a fluorescent loses the charm and leaves it a little "dead" looking 😅 incandescent flicker often occurs with power mismatch or a bulb that's on the way out/loose. good proof, plug into a dimmer switch where it's incompatible 😅

Unbiased Dev profil fotoğrafı

Unbiased Dev11 ay önce

Oh yeah I agree. When I think of a light bulb I think of an incadescent one flicker be damned 👌

Hussain Poonawala profil fotoğrafı

Hussain Poonawala11 ay önce

wow pretry sick!

Pochi profil fotoğrafı

Pochi11 ay önce

This is a really clever use of linear(). I love how it adds a bit of analog realism to the theme switch. Curious if you've experimented with combining this with other view transition types, like for individual elements, to create even more complex effects?

Aimann Shaik profil fotoğrafı

Aimann Shaik11 ay önce

This is so cool. Love it 💡

Chintan N profil fotoğrafı

Chintan N11 ay önce

Skeuomorphism goes hard!

Jacob profil fotoğrafı

Jacob11 ay önce

Source?

Justin profil fotoğrafı

Justin11 ay önce

Love the flicker effect, simple but elegant!

Benzer Videolar

View Transitions with CSS linear() to create a light flicker effect 💡

View Transitions with CSS linear() to create a light flicker effect 💡

jhey ʕ•ᴥ•ʔ

271,379 görüntüleme • 2 yıl önce

content wave with CSS scroll animation li { animation: grow both var(--custom-in-out-ease); animation-timeline: view(inline); } @keyframes grow { 50% { width: var(--desired-size); } } bonus javascript for drag to scroll with inertia ✨

content wave with CSS scroll animation li { animation: grow both var(--custom-in-out-ease); animation-timeline: view(inline); } @keyframes grow { 50% { width: var(--desired-size); } } bonus javascript for drag to scroll with inertia ✨

jhey ʕ•ᴥ•ʔ

40,235 görüntüleme • 1 yıl önce

Future CSS Tip! 🔮 You can create this parallax-like image grid effect using scroll-driven animation and the reusable keyframe technique from the other day 🔥 .collage { height: 200vh; view-timeline: --collage; (The blue dashed element) } .photo { animation-name: travel; animation-fill-mode: both; animation-timing-function: linear; animation-timeline: --collage; animation-range: entry 100% exit 0%; } .photo:nth-of-type(7n + 1):nth-of-type(even) { --vertical: -100%; --horizontal: 100%; } keyframes travel { 0% { translate: 0 0; } 50% { translate: 0 var(--vertical); } 100% { translate: var(--horizontal) var(--vertical); } } CodePen.IO link below! 👇

Future CSS Tip! 🔮 You can create this parallax-like image grid effect using scroll-driven animation and the reusable keyframe technique from the other day 🔥 .collage { height: 200vh; view-timeline: --collage; (The blue dashed element) } .photo { animation-name: travel; animation-fill-mode: both; animation-timing-function: linear; animation-timeline: --collage; animation-range: entry 100% exit 0%; } .photo:nth-of-type(7n + 1):nth-of-type(even) { --vertical: -100%; --horizontal: 100%; } keyframes travel { 0% { translate: 0 0; } 50% { translate: 0 var(--vertical); } 100% { translate: var(--horizontal) var(--vertical); } } CodePen.IO link below! 👇

jhey ʕ•ᴥ•ʔ

268,999 görüntüleme • 3 yıl önce

Future CSS && UI Tip! ⚡️ You could use View Transitions to create those word carousel-type effects 😍 span:nth-of-type(2) { view-transition-name: swap; } ::view-transition-old(swap) { animation-name: slide-down; } ::view-transition-new(swap) { animation-name: slide-up; } How To 1. Create a paragraph split into spans 2. Set an interval in JavaScript that swaps out the accent word 3. Set a view-transition-name on the accent word and the last span Then you've got a responsive word carousel with View Transitions 🤙 Words and inspiration from work louder®'s home page. Had to see if this API could do it and it ended up raising a bug for the web platform! 💪 CodePen.IO link below! 👇

Future CSS && UI Tip! ⚡️ You could use View Transitions to create those word carousel-type effects 😍 span:nth-of-type(2) { view-transition-name: swap; } ::view-transition-old(swap) { animation-name: slide-down; } ::view-transition-new(swap) { animation-name: slide-up; } How To 1. Create a paragraph split into spans 2. Set an interval in JavaScript that swaps out the accent word 3. Set a view-transition-name on the accent word and the last span Then you've got a responsive word carousel with View Transitions 🤙 Words and inspiration from work louder®'s home page. Had to see if this API could do it and it ended up raising a bug for the web platform! 💪 CodePen.IO link below! 👇

jhey ʕ•ᴥ•ʔ

230,229 görüntüleme • 3 yıl önce

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 görüntüleme • 3 yıl önce

$Switching word combos on scroll with CSS 🖱️ main { animation: switch both steps(3); animation-timeline: view(); } @keyframes switch { to { --i: 3; }} .words__track { translate: 0 calc(var(--i) * -100%); } Result of a DM request 👇$

Switching word combos on scroll with CSS 🖱️ main { animation: switch both steps(3); animation-timeline: view(); } @keyframes switch { to { --i: 3; }} .words__track { translate: 0 calc(var(--i) * -100%); } Result of a DM request 👇

jhey ʕ•ᴥ•ʔ

93,045 görüntüleme • 2 yıl önce

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 görüntüleme • 2 yıl önce

CSS Tip! ⭐️ You can use mix-blend-mode with scoped custom properties to create this inverted :hover effect 🤙 button > span { left: calc(var(--x, 0) * 1px); top: calc(var(--y, 0) * 1px); mix-blend-mode: difference; 👈 } The cool trick is that using mix-blend-mode acts like a color inverter which works well with monochromatic controls 😍 Saves defining the :hover colors, etc. It works it out for you! As for how to move that spot around? A teeny bit of JavaScript 🤏 const UPDATE = ({target, x, y }) => { const bounds = target.getBoundingClientRect() target.style.setProperty('--x', x - bounds.left) target.style.setProperty('--y', y - bounds.top) } const BTNS = document.querySelectorAll('button') BTNS.forEach(BTN => BTN.addEventListener('pointermove', UPDATE)) On :hover you can use a scoped custom property to change the size of the spot button:is(:hover, :focus-visible) { --active: 1; } button span { transform: translate(-50%, -50%) scale(calc(var(--active, 0) * 3); transition: transform 0.25s; } But, what about the bouncy easy? You can use linear() where supported to create a bouncy transition ✨ @supports (transition-timing-function: linear(0, 1)) { button:is(:hover, :focus-visible) span { transition-duration: 0.5s; transition-timing-function: linear( 0, 0.5007 7.21%, 0.7803 12.29%, ... ); } } That's it! Thanks for the challenge Alohe 🤙 CodePen.IO link below! 👇

CSS Tip! ⭐️ You can use mix-blend-mode with scoped custom properties to create this inverted :hover effect 🤙 button > span { left: calc(var(--x, 0) * 1px); top: calc(var(--y, 0) * 1px); mix-blend-mode: difference; 👈 } The cool trick is that using mix-blend-mode acts like a color inverter which works well with monochromatic controls 😍 Saves defining the :hover colors, etc. It works it out for you! As for how to move that spot around? A teeny bit of JavaScript 🤏 const UPDATE = ({target, x, y }) => { const bounds = target.getBoundingClientRect() target.style.setProperty('--x', x - bounds.left) target.style.setProperty('--y', y - bounds.top) } const BTNS = document.querySelectorAll('button') BTNS.forEach(BTN => BTN.addEventListener('pointermove', UPDATE)) On :hover you can use a scoped custom property to change the size of the spot button:is(:hover, :focus-visible) { --active: 1; } button span { transform: translate(-50%, -50%) scale(calc(var(--active, 0) * 3); transition: transform 0.25s; } But, what about the bouncy easy? You can use linear() where supported to create a bouncy transition ✨ @supports (transition-timing-function: linear(0, 1)) { button:is(:hover, :focus-visible) span { transition-duration: 0.5s; transition-timing-function: linear( 0, 0.5007 7.21%, 0.7803 12.29%, ... ); } } That's it! Thanks for the challenge Alohe 🤙 CodePen.IO link below! 👇

jhey ʕ•ᴥ•ʔ

153,005 görüntüleme • 2 yıl önce

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,444 görüntüleme • 2 yıl önce

$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,875 görüntüleme • 3 yıl önce

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

185,348 görüntüleme • 1 yıl önce

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 görüntüleme • 3 yıl önce

3D, folding map view built with MKMapView and a few well organised _UIPortalViews... Used CATransformLayer and CATransform3D to create the 3D effect. All animatable with UIKit animation APIs too which is a nice bonus - UIViewPropertyAnimator doing the work here.

3D, folding map view built with MKMapView and a few well organised _UIPortalViews... Used CATransformLayer and CATransform3D to create the 3D effect. All animatable with UIKit animation APIs too which is a nice bonus - UIViewPropertyAnimator doing the work here.

Seb Vidal

80,165 görüntüleme • 1 yıl önce

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 görüntüleme • 3 yıl önce

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 görüntüleme • 2 yıl önce

$CSS Tip! 🤯 You can create a CSS-only version of this balance slider using a scroll animation on the underlying input[type=range] 🚀 ::-webkit-slider-thumb { view-timeline: --thumb inline; } Scroll animation driven by the slider thumb animates a number between the "min" and "max" of the range 😅 @property --value { inherits: true; initial-value: 0; 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 all the parts of the control can use it! .control { timeline-scope: --thumb; } Use that value in a counter which is used for the labels. Create a low and a high for each side 😇 .control__label { counter-reset: low var(--value) high calc(100 - var(--value)); } .control__label::before { content: "COFFEE " counter(low) "%"; } .control__label::after { content: counter(high) "% MILK"; } That's the magic of updating the label values ✨ For the big track, it's a fake track. You can make use of the same --value property and do some calc() to work out the width of each part. .control__track::before { width: calc(var(--value) * 1% - 0.5rem); background: var(--coffee); border-radius: 4px; transition: width 0.1s; } The width leaves a little gap for the indicator piece 🤙 The color calculation for --coffee isn't too wild but again you can use the same --value .control__track { --coffee: hsl(24 74% calc( 24% + (30% * ((100 - var(--value, 0)) / 100)) / 1 ) / 0.4); } Now for the last piece. Making the track change height. You could set up another custom property and animate its value using the --thumb timeline too 🔥 @property --shift { initial-value: 0; inherits: true; syntax: ' '; } @keyframes shift { 0%, 31%, 61%, 100% { --shift: 0; } 32%, 60% { --shift: 1; } } Then use that --shift to update the translation of the label and height of the track 🤓 .label { transform: translateY(calc(var(--shift) * 50%)); transition: transform var(--speed) var(--timing); } Cool part here is that you can use the control to work out the @keyframes percentages 😅 Oh. And the timing for that little bounce? Use the linear() function 😎 :root { --timing: linear( 0, 0.5007 7.21%, 0.7803 12.29%, 0.8883 14.93%, 0.9724 17.63%, 1.0343 20.44%, 1.0754 23.44%, 1.0898 25.22%, 1.0984 27.11%, 1.1014 29.15%, 1.0989 31.4%, 1.0854 35.23%, 1.0196 48.86%, 1.0043 54.06%, 0.9956 59.6%, 0.9925 68.11%, 1 ); } Should probably do a video on this one. Lots of little custom property tricks for sure! 💯 It's not too far off the range slider with the tooltip that came up previously As always, any questions, let me know! Also, this one only works in Chrome currently ✅🥲 This one's a bit rocket science ha 🚀 CodePen.IO link below! 👇$

CSS Tip! 🤯 You can create a CSS-only version of this balance slider using a scroll animation on the underlying input[type=range] 🚀 ::-webkit-slider-thumb { view-timeline: --thumb inline; } Scroll animation driven by the slider thumb animates a number between the "min" and "max" of the range 😅 @property --value { inherits: true; initial-value: 0; 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 all the parts of the control can use it! .control { timeline-scope: --thumb; } Use that value in a counter which is used for the labels. Create a low and a high for each side 😇 .controllabel { counter-reset: low var(--value) high calc(100 - var(--value)); } .controllabel::before { content: "COFFEE " counter(low) "%"; } .controllabel::after { content: counter(high) "% MILK"; } That's the magic of updating the label values ✨ For the big track, it's a fake track. You can make use of the same --value property and do some calc() to work out the width of each part. .controltrack::before { width: calc(var(--value) * 1% - 0.5rem); background: var(--coffee); border-radius: 4px; transition: width 0.1s; } The width leaves a little gap for the indicator piece 🤙 The color calculation for --coffee isn't too wild but again you can use the same --value .control__track { --coffee: hsl(24 74% calc( 24% + (30% * ((100 - var(--value, 0)) / 100)) / 1 ) / 0.4); } Now for the last piece. Making the track change height. You could set up another custom property and animate its value using the --thumb timeline too 🔥 @property --shift { initial-value: 0; inherits: true; syntax: ' '; } @keyframes shift { 0%, 31%, 61%, 100% { --shift: 0; } 32%, 60% { --shift: 1; } } Then use that --shift to update the translation of the label and height of the track 🤓 .label { transform: translateY(calc(var(--shift) * 50%)); transition: transform var(--speed) var(--timing); } Cool part here is that you can use the control to work out the @keyframes percentages 😅 Oh. And the timing for that little bounce? Use the linear() function 😎 :root { --timing: linear( 0, 0.5007 7.21%, 0.7803 12.29%, 0.8883 14.93%, 0.9724 17.63%, 1.0343 20.44%, 1.0754 23.44%, 1.0898 25.22%, 1.0984 27.11%, 1.1014 29.15%, 1.0989 31.4%, 1.0854 35.23%, 1.0196 48.86%, 1.0043 54.06%, 0.9956 59.6%, 0.9925 68.11%, 1 ); } Should probably do a video on this one. Lots of little custom property tricks for sure! 💯 It's not too far off the range slider with the tooltip that came up previously As always, any questions, let me know! Also, this one only works in Chrome currently ✅🥲 This one's a bit rocket science ha 🚀 CodePen.IO link below! 👇

jhey ʕ•ᴥ•ʔ

378,005 görüntüleme • 2 yıl önce

Animates <table> ✅ row.remove() ✅ table.insertAdjacentHTML() ❤️‍🔥 special animation like the table is crushing a row out of existence hehe ✅ used devtools in the vid to slowmo the effect viva View Transitions: src on Codepen:

Animates <table> ✅ row.remove() ✅ table.insertAdjacentHTML() ❤️‍🔥 special animation like the table is crushing a row out of existence hehe ✅ used devtools in the vid to slowmo the effect viva View Transitions: src on Codepen:

Adam Argyle

52,445 görüntüleme • 3 yıl önce

Apple might have over-engineered the iPhone Duo folding animation ,and I love it. It apparently uses light-scattering blur + a stencil effect to make the transition feel smoother and keep content visually anchored. A developer even recreated the effect in Three.js and ran perceptual measurements on it. This is why the animation feels different.

Apple might have over-engineered the iPhone Duo folding animation ,and I love it. It apparently uses light-scattering blur + a stencil effect to make the transition feel smoother and keep content visually anchored. A developer even recreated the effect in Three.js and ran perceptual measurements on it. This is why the animation feels different.

Yash

23,625 görüntüleme • 27 gün önce

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,626 görüntüleme • 2 yıl önce