Video wird geladen...

Video konnte nicht geladen werden

Beim Laden dieses Videos ist ein Problem aufgetreten. Dies könnte an einem vorübergehenden Netzwerkproblem liegen oder das Video ist möglicherweise nicht verfügbar.

Directional aware CSS button :hover w/ lh, text-shadow, and linear() button:has(span:nth-of-type(2):hover) { --y: -1lh; } button span:first-of-type { translate: 0 var(--y); transition: translate .875s var(--spring); text-shadow: 0 1lh currentColor, 0 -1lh currentColor; }

jhey ʕ•ᴥ•ʔ

146,393 subscribers

40,389 Aufrufe • vor 2 Jahren •via X (Twitter)

Wissenschaft & Technologie Bildung

Anya Rossi• Live Now

Private livecam show

9 Kommentare

Profilbild von Ahmed ALABSI ❁

Ahmed ALABSI ❁vor 2 Jahren

You can generate custom easing functions for css using this tool PSA: the website is not mobile friendly

Profilbild von jhey ▲🐻🎈

jhey ▲🐻🎈vor 2 Jahren

Made my own for CSS conversion 🤙

Profilbild von Charlie Joseph

Charlie Josephvor 2 Jahren

I didn’t realise native CSS had spring animations now! I always thought it was a JS thing

Profilbild von Pablo Stanley

Pablo Stanleyvor 2 Jahren

such a little but awesome detail 😊

Profilbild von Arman Kazi

Arman Kazivor 2 Jahren

Can you make this transition from one direction every time you hover it ?and not reversing when u hover the second time

Profilbild von Cypher

Cyphervor 2 Jahren

So pretty

Profilbild von Enicma

Enicmavor 2 Jahren

Nice trick! What about mobile devices?

Profilbild von Sa-Senpai

Sa-Senpaivor 2 Jahren

aha ! how come I didn't think of this before !

Profilbild von EIO

EIOvor 2 Jahren

Brilliant! 😅

Ähnliche Videos

sliding hover tip effect with CSS :has() and anchor positioning ✨ :root:has(li:nth-of-type(3):hover) { --i: 3; } .track { translate: 0 calc(var(--i) * -1lh); nav { anchor-name: --nav; } .tip { position-anchor: --nav; left: calc(anchor(right) + 1rem); }

sliding hover tip effect with CSS :has() and anchor positioning ✨ :root:has(li:nth-of-type(3):hover) { --i: 3; } .track { translate: 0 calc(var(--i) * -1lh); nav { anchor-name: --nav; } .tip { position-anchor: --nav; left: calc(anchor(right) + 1rem); }

jhey ʕ•ᴥ•ʔ

164,722 Aufrufe • vor 1 Jahr

scroll to type with CSS ✨ p { animation: type steps(124); animation-timeline: --main; background: var(--cursor) calc(var(--pos) * 1ch) 0 / 1ch 1lh no-repeat border-box, var(--txt) 0 0 / calc(var(--pos) * 1ch) 100% no-repeat text; } @keyframes type { to { --pos: 124; }}

scroll to type with CSS ✨ p { animation: type steps(124); animation-timeline: --main; background: var(--cursor) calc(var(--pos) * 1ch) 0 / 1ch 1lh no-repeat border-box, var(--txt) 0 0 / calc(var(--pos) * 1ch) 100% no-repeat text; } @keyframes type { to { --pos: 124; }}

jhey ʕ•ᴥ•ʔ

118,095 Aufrufe • vor 1 Jahr

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 Aufrufe • vor 2 Jahren

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,952 Aufrufe • vor 3 Jahren

The CSS trick here is using custom properties to drive your CSS animation behavior 🤙 Doesn't have to be a scroll animation li:nth-of-type(odd) { --x: -4ch; } li:nth-of-type(even) { --x: 4ch; } @keyframes shift {50% { translate: var(--x) 0; }} Updates at runtime 🚀

The CSS trick here is using custom properties to drive your CSS animation behavior 🤙 Doesn't have to be a scroll animation li:nth-of-type(odd) { --x: -4ch; } li:nth-of-type(even) { --x: 4ch; } @keyframes shift {50% { translate: var(--x) 0; }} Updates at runtime 🚀

jhey ʕ•ᴥ•ʔ

239,989 Aufrufe • vor 2 Jahren

CSS Tip! 💪 You can create these tab controls with CSS :has() + radio buttons ✨ .tabs:has(input:nth-of-type(3)) { --count: 3; } .tabs:has(:checked:nth-of-type(3)) { --active: 2; } .tabs::after { translate: calc(var(--active, 0) * 100%) 0; width: calc(100% / var(--count)); } Two CSS :has() tricks here combined with a rendering trick 🤙 The tab control is a container using display: grid. You can use :has() to count the number of tabs in the container: .tabs:has(input:nth-of-type(3)) { --count: 3; } .tabs:has(input:nth-of-type(4)) { --count: 4; } Using the cascade, the last valid :has() gives you the number of tabs 🫶 Once you know the number of tabs, you know how to size the indicator: .tabs::after { content: ""; position: absolute; height: 100%; width: calc(100% / var(--count)); } It's a pseudoelement that uses --count to determine its size 📏 The next :has() trick is determining which tab is active or :checked as it's an input [type=radio] .tabs:has(:checked:nth-of-type(2)) { --active: 1; } .tabs:has(:checked:nth-of-type(3)) { --active: 2; } You can use a zero-indexed translation here. If the second input is :checked, set --active: 1, then translate the pseudoelement on the tabs to that position 👉 .tabs::after { translate: calc(var(--active, 0) * 100%) 0; } The last rendering trick is using mix-blend-mode 👀 The tabs have a black background-color, the pseudoelement is white, and the label text is white. When you use mix-blend-mode: difference on the pseudoelement it will give this effect that the text transitions from white to black sliding across 😎 .tabs::after { color: hsl(0 0% 100%); mix-blend-mode: difference; } You can totally mix up the colors here though and go with a different effect. The mechanics of how you can use CSS :has() is the main point here 🙏 As always, any questions, suggestions, etc. let me know CodePen.IO link below! 👇 (There's even a Tailwind CSS play for this one too 👀)

CSS Tip! 💪 You can create these tab controls with CSS :has() + radio buttons ✨ .tabs:has(input:nth-of-type(3)) { --count: 3; } .tabs:has(:checked:nth-of-type(3)) { --active: 2; } .tabs::after { translate: calc(var(--active, 0) * 100%) 0; width: calc(100% / var(--count)); } Two CSS :has() tricks here combined with a rendering trick 🤙 The tab control is a container using display: grid. You can use :has() to count the number of tabs in the container: .tabs:has(input:nth-of-type(3)) { --count: 3; } .tabs:has(input:nth-of-type(4)) { --count: 4; } Using the cascade, the last valid :has() gives you the number of tabs 🫶 Once you know the number of tabs, you know how to size the indicator: .tabs::after { content: ""; position: absolute; height: 100%; width: calc(100% / var(--count)); } It's a pseudoelement that uses --count to determine its size 📏 The next :has() trick is determining which tab is active or :checked as it's an input [type=radio] .tabs:has(:checked:nth-of-type(2)) { --active: 1; } .tabs:has(:checked:nth-of-type(3)) { --active: 2; } You can use a zero-indexed translation here. If the second input is :checked, set --active: 1, then translate the pseudoelement on the tabs to that position 👉 .tabs::after { translate: calc(var(--active, 0) * 100%) 0; } The last rendering trick is using mix-blend-mode 👀 The tabs have a black background-color, the pseudoelement is white, and the label text is white. When you use mix-blend-mode: difference on the pseudoelement it will give this effect that the text transitions from white to black sliding across 😎 .tabs::after { color: hsl(0 0% 100%); mix-blend-mode: difference; } You can totally mix up the colors here though and go with a different effect. The mechanics of how you can use CSS :has() is the main point here 🙏 As always, any questions, suggestions, etc. let me know CodePen.IO link below! 👇 (There's even a Tailwind CSS play for this one too 👀)

jhey ʕ•ᴥ•ʔ

437,714 Aufrufe • vor 2 Jahren

CSS Tip! 🎠 You can create a responsive infinite marquee animation with container queries and no duplicate items 🤙 li{ animation: slide; } @keyframes slide { to { translate: 0% calc(var(--i) * -100%);}} The trick is animating the items, not the list 😎 More tricks 👇 To get this one working, you need to animate the items and not the list (Watch the video first?). Each item needs to know its row index (--i) in the list and the parent needs to know how many rows are in the list: ul { --count: 12; } li:nth-of-type(1), li:nth-of-type(2) { --i: 0; } li:nth-of-type(3), li:nth-of-type(4) { --i: 1; } Once you have that, translate each item based on its row index in the list li { translate: 0% calc((var(--count) - var(--i)) * 100%); } Now for the animation. The key here is that each row has an animation-delay calculated from its index (--i). That number is offset to make it negative so the animation start is offset ✨ ul { --duration: 10s; } li { --delay: calc((var(--duration) / var(--count)) * (var(--i) - 8)); animation: slide var(--duration) var(--delay) infinite linear; } Make sure to wrap that animation in: @media (prefers-reduced-motion: no-preference) { ... } Lastly, the fun parts! 🤓 To create the "vignette" mask. Use a layered mask on the container 😷 .scene { --buff: 3rem; height: 100%; width: 100%; mask: linear-gradient(transparent, white var(--buff) calc(100% - var(--buff)), transparent), linear-gradient(90deg, transparent, white var(--buff) calc(100% - var(--buff)), transparent); mask-composite: intersect; } To create the 3D skewed effect, use a chained transform (Try toggling it in the demo ⚡️): .grid { transform: rotateX(20deg) rotateZ(-20deg) skewX(20deg); } As for the responsive part, use container queries! 🔥 article { container-type: inline-size; } When the article (card) is narrower than 400px update the grid and animation settings 🤙 Double the rows means double the duration! @container (width < 400px) { .grid { --count: 12; grid-template-columns: 1fr; } li:nth-of-type(1) { --i: 0; } li:nth-of-type(2) { --i: 1; } li:nth-of-type(3) { --i: 2; } li:nth-of-type(4) { --i: 3; } li { --duration: 20s; } } CSS has the magic to be able to update those animations at runtime based on your custom property values 😎 An added bonus in this demo is that it doesn't require any JavaScript at all, for any of it 🤯 We can use CSS :has() for those toggles that update the styles, even the theme toggle! 🫶 Any questions, let me know! Make sure to check out the video. Will do a walkthrough one to follow-up 🤙 CodePen.IO link below! 👇

CSS Tip! 🎠 You can create a responsive infinite marquee animation with container queries and no duplicate items 🤙 li{ animation: slide; } @keyframes slide { to { translate: 0% calc(var(--i) * -100%);}} The trick is animating the items, not the list 😎 More tricks 👇 To get this one working, you need to animate the items and not the list (Watch the video first?). Each item needs to know its row index (--i) in the list and the parent needs to know how many rows are in the list: ul { --count: 12; } li:nth-of-type(1), li:nth-of-type(2) { --i: 0; } li:nth-of-type(3), li:nth-of-type(4) { --i: 1; } Once you have that, translate each item based on its row index in the list li { translate: 0% calc((var(--count) - var(--i)) * 100%); } Now for the animation. The key here is that each row has an animation-delay calculated from its index (--i). That number is offset to make it negative so the animation start is offset ✨ ul { --duration: 10s; } li { --delay: calc((var(--duration) / var(--count)) * (var(--i) - 8)); animation: slide var(--duration) var(--delay) infinite linear; } Make sure to wrap that animation in: @media (prefers-reduced-motion: no-preference) { ... } Lastly, the fun parts! 🤓 To create the "vignette" mask. Use a layered mask on the container 😷 .scene { --buff: 3rem; height: 100%; width: 100%; mask: linear-gradient(transparent, white var(--buff) calc(100% - var(--buff)), transparent), linear-gradient(90deg, transparent, white var(--buff) calc(100% - var(--buff)), transparent); mask-composite: intersect; } To create the 3D skewed effect, use a chained transform (Try toggling it in the demo ⚡️): .grid { transform: rotateX(20deg) rotateZ(-20deg) skewX(20deg); } As for the responsive part, use container queries! 🔥 article { container-type: inline-size; } When the article (card) is narrower than 400px update the grid and animation settings 🤙 Double the rows means double the duration! @container (width < 400px) { .grid { --count: 12; grid-template-columns: 1fr; } li:nth-of-type(1) { --i: 0; } li:nth-of-type(2) { --i: 1; } li:nth-of-type(3) { --i: 2; } li:nth-of-type(4) { --i: 3; } li { --duration: 20s; } } CSS has the magic to be able to update those animations at runtime based on your custom property values 😎 An added bonus in this demo is that it doesn't require any JavaScript at all, for any of it 🤯 We can use CSS :has() for those toggles that update the styles, even the theme toggle! 🫶 Any questions, let me know! Make sure to check out the video. Will do a walkthrough one to follow-up 🤙 CodePen.IO link below! 👇

jhey ʕ•ᴥ•ʔ

542,573 Aufrufe • vor 2 Jahren

$CSS Tip! 💫 You can create this responsive perspective warp animation with 3D CSS and container queries ✨ (Video reveals trick 👀) .warp { container-type: size; perspective: 100px; transform-style: preserve-3d; resize: both; overflow: hidden; } Couple of tricks in this one 🤓 The main idea is to create a tunnel (an open-ended cube). On each side of the tunnel, use linear-gradient to create the grid lines ✨ .side { background: linear-gradient(#fff 0 1px, transparent 1px 5%) 50% 0 / 5% 5%, linear-gradient(90deg, #fff 0 1px, transparent 1px 5%) 50% 50% / 5% 5%; } To position each side, you rotate on the x-axis by 90deg. Each side would become invisible at this point. So you give the scene perspective 😉 .warp__side--top { width: 100cqi; height: 100cqmax; transform-origin: 50% 0%; transform: rotateX(-90deg); } The cool part here is that you want to make each side the same height. But the container is responsive. So you can use a container query and make sure each side is 100cqmax tall 🫶 Then the "beams". Each side contains "beams". They have different colors, sizes, and positions, and move at different speeds ⚡️ We can control that through scoped custom properties. .beam { width: 5%; position: absolute; top: 0; left: calc(var(--x, 0) * 5%); aspect-ratio: 1 / 2; background: linear-gradient( hsl(var(--hue) 80% 60%), transparent ); translate: 0 100%; animation: warp calc(var(--speed, 0) * 1s) calc(var(--delay, 0) * -1s) infinite linear; } The magic here is though that a beam's animation is as basic as translating it from the top of the side to the bottom. And you can get that distance with a container query again 🔥 @keyframes warp { 0% { translate: -50% 100cqmax; } 100% { translate: -50% -100%; } } And that is pretty much it! A cool warp animation effect using 3D CSS and container queries ⚡️ If you have any questions, let me know ᵔᴥᵔ CodePen.IO link below! 👇$

CSS Tip! 💫 You can create this responsive perspective warp animation with 3D CSS and container queries ✨ (Video reveals trick 👀) .warp { container-type: size; perspective: 100px; transform-style: preserve-3d; resize: both; overflow: hidden; } Couple of tricks in this one 🤓 The main idea is to create a tunnel (an open-ended cube). On each side of the tunnel, use linear-gradient to create the grid lines ✨ .side { background: linear-gradient(#fff 0 1px, transparent 1px 5%) 50% 0 / 5% 5%, linear-gradient(90deg, #fff 0 1px, transparent 1px 5%) 50% 50% / 5% 5%; } To position each side, you rotate on the x-axis by 90deg. Each side would become invisible at this point. So you give the scene perspective 😉 .warp__side--top { width: 100cqi; height: 100cqmax; transform-origin: 50% 0%; transform: rotateX(-90deg); } The cool part here is that you want to make each side the same height. But the container is responsive. So you can use a container query and make sure each side is 100cqmax tall 🫶 Then the "beams". Each side contains "beams". They have different colors, sizes, and positions, and move at different speeds ⚡️ We can control that through scoped custom properties. .beam { width: 5%; position: absolute; top: 0; left: calc(var(--x, 0) * 5%); aspect-ratio: 1 / 2; background: linear-gradient( hsl(var(--hue) 80% 60%), transparent ); translate: 0 100%; animation: warp calc(var(--speed, 0) * 1s) calc(var(--delay, 0) * -1s) infinite linear; } The magic here is though that a beam's animation is as basic as translating it from the top of the side to the bottom. And you can get that distance with a container query again 🔥 @keyframes warp { 0% { translate: -50% 100cqmax; } 100% { translate: -50% -100%; } } And that is pretty much it! A cool warp animation effect using 3D CSS and container queries ⚡️ If you have any questions, let me know ᵔᴥᵔ CodePen.IO link below! 👇

jhey ʕ•ᴥ•ʔ

187,474 Aufrufe • vor 2 Jahren

CSS Trick ⚡️ (˗ˏˋ rogie ˎˊ˗ challenge edition 🤙) You can create this secret code reveal with only CSS using :has() and trig functions 🔥 .digit::hover + .digit, .digit:has(+ .digit:hover) { --active: var(--lerp-1); } :root { --lerp-1: calc(sin(50deg)); } .digit { scale: calc(var(--active) + 0.5); } There are a couple of moving parts. The first thing we can do is set up a scale. :root { --lerp-0: 1; /* === sin(90deg) */ --lerp-1: calc(sin(50deg)); --lerp-2: calc(sin(45deg)); --lerp-3: calc(sin(35deg)); --lerp-4: calc(sin(25deg)); --lerp-5: calc(sin(15deg)); } The digit styles define scale and blur. They also dictate the transition duration .digit { transition: scale calc(((1 - var(--active, 0)) + 0.2) * 1s); } When a digit is hovered, then you can set the --active custom property based on the digit position 🤙 The digit that is hovered. .digit:hover { --active: var(--lerp-0); } And the digit on either side of that hovered digit .digit:is(:hover, :focus-visible) + .digit, .digit:has(+ .digit:is(:hover, :focus-visible)) { --active: var(--lerp-1); } We can select the previous sibling using :has() and the next sibling with the sibling combinator (+) And that's it! ⭐️ That's how you create these hover scale interactions with CSS 🙌 We're jus' waiting on Firefox for :has() support. When that lands, it'll likely break the internet 😅 CodePen.IO link below! 👇

CSS Trick ⚡️ (˗ˏˋ rogie ˎˊ˗ challenge edition 🤙) You can create this secret code reveal with only CSS using :has() and trig functions 🔥 .digit::hover + .digit, .digit:has(+ .digit:hover) { --active: var(--lerp-1); } :root { --lerp-1: calc(sin(50deg)); } .digit { scale: calc(var(--active) + 0.5); } There are a couple of moving parts. The first thing we can do is set up a scale. :root { --lerp-0: 1; /* === sin(90deg) / --lerp-1: calc(sin(50deg)); --lerp-2: calc(sin(45deg)); --lerp-3: calc(sin(35deg)); --lerp-4: calc(sin(25deg)); --lerp-5: calc(sin(15deg)); } The digit styles define scale and blur. They also dictate the transition duration .digit { transition: scale calc(((1 - var(--active, 0)) + 0.2) 1s); } When a digit is hovered, then you can set the --active custom property based on the digit position 🤙 The digit that is hovered. .digit:hover { --active: var(--lerp-0); } And the digit on either side of that hovered digit .digit:is(:hover, :focus-visible) + .digit, .digit:has(+ .digit:is(:hover, :focus-visible)) { --active: var(--lerp-1); } We can select the previous sibling using :has() and the next sibling with the sibling combinator (+) And that's it! ⭐️ That's how you create these hover scale interactions with CSS 🙌 We're jus' waiting on Firefox for :has() support. When that lands, it'll likely break the internet 😅 CodePen.IO link below! 👇

jhey ʕ•ᴥ•ʔ

375,402 Aufrufe • vor 2 Jahren

$CSS Trick ✨ You can create this glitch hover effect by animating pseudoelement content 🎬 button:hover span:after { animation: flip 0.2s calc(var(--i) * 0.05s); } @keyframes flip { 20% { content: '_'; } 40% { content: var(--c1); } 60% { content: var(--c2); } } It's a funky little track that allows you to animate text flipping with CSS 🤙 Leaning into custom properties, you can make each flip animation random with inline styles 🎨 C l Click Me You make use of each character within the keyframes above. And "--i" communicates the index that you can use for the animation-delay 🙌 That's all there is to it! As always, any requests or suggestions, hit me up! 🙏 CodePen.IO link below! 👇$

CSS Trick ✨ You can create this glitch hover effect by animating pseudoelement content 🎬 button:hover span:after { animation: flip 0.2s calc(var(--i) * 0.05s); } @keyframes flip { 20% { content: '_'; } 40% { content: var(--c1); } 60% { content: var(--c2); } } It's a funky little track that allows you to animate text flipping with CSS 🤙 Leaning into custom properties, you can make each flip animation random with inline styles 🎨 C l Click Me You make use of each character within the keyframes above. And "--i" communicates the index that you can use for the animation-delay 🙌 That's all there is to it! As always, any requests or suggestions, hit me up! 🙏 CodePen.IO link below! 👇

jhey ʕ•ᴥ•ʔ

168,444 Aufrufe • vor 2 Jahren

CSS Trick 🤙 You can create these tab bar controls by using :has() to count the number of tabs ⭐️ .tabs:has(input:nth-of-type(3)){--count: 3;} .tabs:has(:checked:nth-of-type(3)){--active: 200%;} .tabs::after{ translate:var(--active) 0;} Let's break it down in this ! 📼 Couple of CSS :has() tricks here combined with custom properties 😎 First things first, lay out the tabs using display: grid. This gives you a way to create equal-width tabs 🙏 .tabs { display: grid; grid-auto-flow: column; } Then you use :has() to count the number of tabs and store that in a custom property 🤓 .tabs:has(input:nth-of-type(3)) { --count: 3; } .tabs:has(input:nth-of-type(4)) { --count: 4; } Using the cascade, the last valid :has() gives you the number of tabs 🫶 Using the tab count, you can size the tab indicator. For the tab indicator, use the tabs pseudoelement: .tabs::after { content: ""; position: absolute; height: 100%; width: calc(100% / var(--count)); } See how you can use --count to determine its size 📏 Next, use :has() to determine which tab is active or :checked with input [type=radio] .tabs:has(:checked:nth-of-type(2)) { --active: 1; } .tabs:has(:checked:nth-of-type(3)) { --active: 2; } You can use a zero-indexed translation here. If the second input is :checked, set --active: 1, then translate the pseudoelement on the tabs to that position 👉 .tabs::after { translate: calc(var(--active, 0) * 100%) 0; } Or you could set active to the translation: .tabs:has(:checked:nth-of-type(2)) { --active: 100%; } Setting the custom property allows you to use the index elsewhere if you need it 🤙 The final piece is using mix-blend-mode 👀 The tabs have a black background-color, the pseudoelement is white, and the label text is white. When you use mix-blend-mode: difference on the pseudoelement it will give this effect that the text transitions from white to black sliding across 😎 .tabs::after { color: hsl(0 0% 100%); mix-blend-mode: difference; } You can totally mix up the colors here though and go with a different effect. The mechanics of how you can use CSS :has() is the main point here 🙏 As always, any questions, suggestions, etc. let me know CodePen.IO link below! 👇 (There's even a Tailwind CSS play for this one too 👀)

CSS Trick 🤙 You can create these tab bar controls by using :has() to count the number of tabs ⭐️ .tabs:has(input:nth-of-type(3)){--count: 3;} .tabs:has(:checked:nth-of-type(3)){--active: 200%;} .tabs::after{ translate:var(--active) 0;} Let's break it down in this ! 📼 Couple of CSS :has() tricks here combined with custom properties 😎 First things first, lay out the tabs using display: grid. This gives you a way to create equal-width tabs 🙏 .tabs { display: grid; grid-auto-flow: column; } Then you use :has() to count the number of tabs and store that in a custom property 🤓 .tabs:has(input:nth-of-type(3)) { --count: 3; } .tabs:has(input:nth-of-type(4)) { --count: 4; } Using the cascade, the last valid :has() gives you the number of tabs 🫶 Using the tab count, you can size the tab indicator. For the tab indicator, use the tabs pseudoelement: .tabs::after { content: ""; position: absolute; height: 100%; width: calc(100% / var(--count)); } See how you can use --count to determine its size 📏 Next, use :has() to determine which tab is active or :checked with input [type=radio] .tabs:has(:checked:nth-of-type(2)) { --active: 1; } .tabs:has(:checked:nth-of-type(3)) { --active: 2; } You can use a zero-indexed translation here. If the second input is :checked, set --active: 1, then translate the pseudoelement on the tabs to that position 👉 .tabs::after { translate: calc(var(--active, 0) * 100%) 0; } Or you could set active to the translation: .tabs:has(:checked:nth-of-type(2)) { --active: 100%; } Setting the custom property allows you to use the index elsewhere if you need it 🤙 The final piece is using mix-blend-mode 👀 The tabs have a black background-color, the pseudoelement is white, and the label text is white. When you use mix-blend-mode: difference on the pseudoelement it will give this effect that the text transitions from white to black sliding across 😎 .tabs::after { color: hsl(0 0% 100%); mix-blend-mode: difference; } You can totally mix up the colors here though and go with a different effect. The mechanics of how you can use CSS :has() is the main point here 🙏 As always, any questions, suggestions, etc. let me know CodePen.IO link below! 👇 (There's even a Tailwind CSS play for this one too 👀)

jhey ʕ•ᴥ•ʔ

70,730 Aufrufe • vor 2 Jahren

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 Aufrufe • vor 2 Jahren

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 Aufrufe • vor 2 Jahren

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 Aufrufe • vor 2 Jahren

$CSS Tip! 🤙 You can create custom easings for your animations and transitions with linear() 🔥 :root { --bounce: linear(0, 0.39, 0.57, 0.52, ..., 1); } .digit { transition: translate 1s var(--bounce); } Perfect for adding character to animations like this MRR widget! 🫶 Some of the easing code is obfuscated in the snippet there 👆 You would likely write these custom eases once and then reuse them in your projects 🎬 For example, here's the CSS for an elastic ease 🎾 :root { --elastic: linear( 0, 0.0009 8.51%, -0.0047 19.22%, 0.0016 22.39%, 0.023 27.81%, 0.0237 30.08%, 0.0144 31.81%, -0.0051 33.48%, -0.1116 39.25%, -0.1181 40.59%, -0.1058 41.79%, -0.0455, 0.0701 45.34%, 0.9702 55.19%, 1.0696 56.97%, 1.0987 57.88%, 1.1146 58.82%, 1.1181 59.83%, 1.1092 60.95%, 1.0057 66.48%, 0.986 68.14%, 0.9765 69.84%, 0.9769 72.16%, 0.9984 77.61%, 1.0047 80.79%, 0.9991 91.48%, 1 ); } The idea is that you map a set of points between [0, 0] and [1, 1]. This is cool because you can convert something like an SVG path to these coordinates. Link below for a gist with some eases in 🤙 As for the MRR widget, the trick is to set out some number tracks and translate them to show the correct number 🧮 You can translate by line-height based on the value. And the original value you can convert to a currency string like $1,000,000.00 using JavaScript's Intl.NumberFormat() const formatter = new Intl.NumberFormat('en-US', { style: 'currency', currency: 'USD', }) formatter.format(1_000_000) Check out the exploding view and the video to see how it all works! 👀 CodePen.IO link below! 👇$

CSS Tip! 🤙 You can create custom easings for your animations and transitions with linear() 🔥 :root { --bounce: linear(0, 0.39, 0.57, 0.52, ..., 1); } .digit { transition: translate 1s var(--bounce); } Perfect for adding character to animations like this MRR widget! 🫶 Some of the easing code is obfuscated in the snippet there 👆 You would likely write these custom eases once and then reuse them in your projects 🎬 For example, here's the CSS for an elastic ease 🎾 :root { --elastic: linear( 0, 0.0009 8.51%, -0.0047 19.22%, 0.0016 22.39%, 0.023 27.81%, 0.0237 30.08%, 0.0144 31.81%, -0.0051 33.48%, -0.1116 39.25%, -0.1181 40.59%, -0.1058 41.79%, -0.0455, 0.0701 45.34%, 0.9702 55.19%, 1.0696 56.97%, 1.0987 57.88%, 1.1146 58.82%, 1.1181 59.83%, 1.1092 60.95%, 1.0057 66.48%, 0.986 68.14%, 0.9765 69.84%, 0.9769 72.16%, 0.9984 77.61%, 1.0047 80.79%, 0.9991 91.48%, 1 ); } The idea is that you map a set of points between [0, 0] and [1, 1]. This is cool because you can convert something like an SVG path to these coordinates. Link below for a gist with some eases in 🤙 As for the MRR widget, the trick is to set out some number tracks and translate them to show the correct number 🧮 You can translate by line-height based on the value. And the original value you can convert to a currency string like $1,000,000.00 using JavaScript's Intl.NumberFormat() const formatter = new Intl.NumberFormat('en-US', { style: 'currency', currency: 'USD', }) formatter.format(1_000_000) Check out the exploding view and the video to see how it all works! 👀 CodePen.IO link below! 👇

jhey ʕ•ᴥ•ʔ

574,787 Aufrufe • vor 2 Jahren

$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 Aufrufe • vor 3 Jahren

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,822 Aufrufe • vor 2 Jahren

CSS Tip! ⭐️ You can use the lh (line-height) unit on background layers to emphasize multiple lines of text responsively without extra elements! ⚡️ h1 { background: linear-gradient(white, white), grey; background-size: 100% calc(var(--lines) * 1lh), 100% 100%; background-clip: text; color: transparent; } Here you emphasize the first two lines of the heading with white using a sized background-image layer It has a size of 2lh ✨ Then the rest of the element is colored with whatever other colors you want to use as layers. If you watch the video, you can see different colors used for different lines and then fade it out if you wish. You could do whatever you like with it 😎 Neat part is that it's responsive. The font-size is set with a clamp and you can resize the viewport or the element and the number of lines emphasized will remain 🤙 Last but not least, make sure to use background-clip: text and color: transparent so the background shines through 🔥 Also, note that if you're only looking to highlight the first line, you can still use the :first-line pseudo 🫶 Have a play with it and see what you can come up with! CodePen.IO link below! 👇

CSS Tip! ⭐️ You can use the lh (line-height) unit on background layers to emphasize multiple lines of text responsively without extra elements! ⚡️ h1 { background: linear-gradient(white, white), grey; background-size: 100% calc(var(--lines) * 1lh), 100% 100%; background-clip: text; color: transparent; } Here you emphasize the first two lines of the heading with white using a sized background-image layer It has a size of 2lh ✨ Then the rest of the element is colored with whatever other colors you want to use as layers. If you watch the video, you can see different colors used for different lines and then fade it out if you wish. You could do whatever you like with it 😎 Neat part is that it's responsive. The font-size is set with a clamp and you can resize the viewport or the element and the number of lines emphasized will remain 🤙 Last but not least, make sure to use background-clip: text and color: transparent so the background shines through 🔥 Also, note that if you're only looking to highlight the first line, you can still use the :first-line pseudo 🫶 Have a play with it and see what you can come up with! CodePen.IO link below! 👇

jhey ʕ•ᴥ•ʔ

413,745 Aufrufe • vor 2 Jahren

CSS Trick 🎞️ You can create an infinite marquee/carousel animation without duplicate items 🤙 li { --destination: calc(var(--idx) * -100%); } @keyframes slide { to { translate: var(--destination) 0;}} Animate the items, not the list 😎 Here's the next ! 👇 The main trick here is animating the items and not the list. You can lean into custom properties to work out the origin and destination of an item. Inline some custom properties on the list and the items. Then use these to calculate the origin and the destination for each item in the list ⭐️ li { --origin: calc((var(--count) - var(--index)) * 100%); --destination: calc((var(--index) + 1) * -100%); } The last piece is hooking up the animation li { --duration: calc(var(--speed) * 1s); --delay: calc( (var(--duration) / var(--count)) * var(--index, 0) ); animation: slide var(--duration) calc(var(--delay) - (var(--count) * 0.5s)) infinite linear; } The important part here is using those custom properties to define and calculate the animation properties for the items in the list 🤙 It's hard to cover everyone's use case in one demo 😅 But we try 🙏 As always, any requests, suggestions, questions, etc. Hit me up! 🤙 CodePen.IO link below 👇 p.s Can anyone recommend a decent lavalier microphone so I can record these better on the road 😭

CSS Trick 🎞️ You can create an infinite marquee/carousel animation without duplicate items 🤙 li { --destination: calc(var(--idx) * -100%); } @keyframes slide { to { translate: var(--destination) 0;}} Animate the items, not the list 😎 Here's the next ! 👇 The main trick here is animating the items and not the list. You can lean into custom properties to work out the origin and destination of an item. Inline some custom properties on the list and the items. Then use these to calculate the origin and the destination for each item in the list ⭐️ li { --origin: calc((var(--count) - var(--index)) * 100%); --destination: calc((var(--index) + 1) * -100%); } The last piece is hooking up the animation li { --duration: calc(var(--speed) * 1s); --delay: calc( (var(--duration) / var(--count)) * var(--index, 0) ); animation: slide var(--duration) calc(var(--delay) - (var(--count) * 0.5s)) infinite linear; } The important part here is using those custom properties to define and calculate the animation properties for the items in the list 🤙 It's hard to cover everyone's use case in one demo 😅 But we try 🙏 As always, any requests, suggestions, questions, etc. Hit me up! 🤙 CodePen.IO link below 👇 p.s Can anyone recommend a decent lavalier microphone so I can record these better on the road 😭

jhey ʕ•ᴥ•ʔ

233,315 Aufrufe • vor 2 Jahren

Gemini 3 is the best model at creating animations. It's not even close. Here are the prompts I used for creating these UI animations. You don't need animations everywhere, but there are key places where it can enhance your design: the hero intro, hover interactions, slow content reveal, background effects and navigation transitions. Gemini 3 relies heavily on good prompting, ideally with image or code. Intro + animation on scroll: "Animate when in view: fade in, slide in, blur in, element by element. Use 'both' instead of 'forwards'. Don't use opacity 0. Add a clip animation to the background, column by column using clip-path." Buttons: "Add a 1px border beam animation around the pill-shaped button on hover. " Text animation: "Add a vertical text clip slide down animation letter by letter" Logos looping: "Add a marquis infinite loop slow animation to the logos using alpha mask" Content switching: "Animate the big card to rotate between 3 cards in a loop. Add prev/next arrows to switch between cards." Flashlight on hover: "Add a subtle flashlight effect on hover/mouse position to both background and border of the cards." Testimonials looping: "Make the cards animate marquis in an infinite loop with alpha mask slowly."

Gemini 3 is the best model at creating animations. It's not even close. Here are the prompts I used for creating these UI animations. You don't need animations everywhere, but there are key places where it can enhance your design: the hero intro, hover interactions, slow content reveal, background effects and navigation transitions. Gemini 3 relies heavily on good prompting, ideally with image or code. Intro + animation on scroll: "Animate when in view: fade in, slide in, blur in, element by element. Use 'both' instead of 'forwards'. Don't use opacity 0. Add a clip animation to the background, column by column using clip-path." Buttons: "Add a 1px border beam animation around the pill-shaped button on hover. " Text animation: "Add a vertical text clip slide down animation letter by letter" Logos looping: "Add a marquis infinite loop slow animation to the logos using alpha mask" Content switching: "Animate the big card to rotate between 3 cards in a loop. Add prev/next arrows to switch between cards." Flashlight on hover: "Add a subtle flashlight effect on hover/mouse position to both background and border of the cards." Testimonials looping: "Make the cards animate marquis in an infinite loop with alpha mask slowly."

Meng To

200,148 Aufrufe • vor 9 Monaten