Loading video...

Video Failed to Load

There was a problem loading this video. This could be due to a temporary network issue or the video might be unavailable.

your signature is a custom easing function™ ✒️ draw it map the motion to css linear() timing function package as portable SVG paste anywhere 👇

jhey ʕ•ᴥ•ʔ

146,397 subscribers

170,790 views • 3 months ago •via X (Twitter)

Anya Rossi• Live Now

Private livecam show

0 Comments

No comments available

Comments from the original post will appear here

Related Videos

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 ✨

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 ʕ•ᴥ•ʔ

113,536 views • 10 months ago

Hand-drawn signature, built with Motion ⊙ SVG paths w/ sequential timing + custom easing ⊙ Each stroke drawn using 𝚙𝚊𝚝𝚑𝙻𝚎𝚗𝚐𝚝𝚑 animation ⊙ Ghost layer underneath gives an ink-indent effect A personal touch that elevates your portfolio. Source code below. ⤵️

Hand-drawn signature, built with Motion ⊙ SVG paths w/ sequential timing + custom easing ⊙ Each stroke drawn using 𝚙𝚊𝚝𝚑𝙻𝚎𝚗𝚐𝚝𝚑 animation ⊙ Ghost layer underneath gives an ink-indent effect A personal touch that elevates your portfolio. Source code below. ⤵️

kian bazza

246,103 views • 6 months ago

Excited to announce Easing Wizard is now live! 🎉 The ultimate CSS easing editor with support for Bézier, spring, bounce, wiggle, and overshoot! 🚀 🔗 Some key features are: ⚡ Uses linear timing function instead of keyframes 🎢 Multiple curve types ⏸️ Pause between animation previews 🎥 10 preview modes 📚 Large collection of presets 📝 CSS and Tailwind CSS code generation 📊 Linear comparison 🎯 Multiple accuracy levels ➕ Optional extra space for Bézier curves And can you find the hidden easter egg?

Excited to announce Easing Wizard is now live! 🎉 The ultimate CSS easing editor with support for Bézier, spring, bounce, wiggle, and overshoot! 🚀 🔗 Some key features are: ⚡ Uses linear timing function instead of keyframes 🎢 Multiple curve types ⏸️ Pause between animation previews 🎥 10 preview modes 📚 Large collection of presets 📝 CSS and Tailwind CSS code generation 📊 Linear comparison 🎯 Multiple accuracy levels ➕ Optional extra space for Bézier curves And can you find the hidden easter egg?

Matthias Martin

13,307 views • 1 year ago

make it pop™ 🎈 CSS linear() is one of my favorite sleeper additions to the platform 💯

make it pop™ 🎈 CSS linear() is one of my favorite sleeper additions to the platform 💯

jhey ʕ•ᴥ•ʔ

124,142 views • 2 years ago

easing is everything use different CSS timing functions per axis for custom motion paths 👨‍🍳 .p { animation: x .8s var(--x-time), y .8s var(--y-time); animation-composition: accumulate; } @keyframes x { to { translate: var(--x) 0 } @keyframes y { to { translate: 0 var(--y) }

easing is everything use different CSS timing functions per axis for custom motion paths 👨‍🍳 .p { animation: x .8s var(--x-time), y .8s var(--y-time); animation-composition: accumulate; } @keyframes x { to { translate: var(--x) 0 } @keyframes y { to { translate: 0 var(--y) }

jhey ʕ•ᴥ•ʔ

271,665 views • 10 months ago

It is your destiny to function in the supernatural! Do you believe?

It is your destiny to function in the supernatural! Do you believe?

Apostle Emmanuel Iren

26,844 views • 1 year ago

with a tiny bit of JavaScript enhancement take that CSS driven slider and give it "that little bounce™" - use pointer-events to calculate an overdrag - map that overdrag to a CSS custom property --stretch - apply style - profit 💀

with a tiny bit of JavaScript enhancement take that CSS driven slider and give it "that little bounce™" - use pointer-events to calculate an overdrag - map that overdrag to a CSS custom property --stretch - apply style - profit 💀

jhey ʕ•ᴥ•ʔ

196,882 views • 1 year ago

Now available in the #rstats {mapgl} package: the `compare()` function allows you to swipe between layers on your map! Compare demographic changes, development scenarios, alternative color palettes (shown here) and much more Learn how:

Now available in the #rstats {mapgl} package: the `compare()` function allows you to swipe between layers on your map! Compare demographic changes, development scenarios, alternative color palettes (shown here) and much more Learn how:

Kyle Walker

22,915 views • 2 years ago

2. LAMBDA Use a LAMBDA function to create custom, reusable functions and call them by a friendly name. This is a powerful function to create your own calculations. In our case, we wanted to calculate the income after deducting tax. The formula: = LAMBDA(x,y,x*(1-y))

2. LAMBDA Use a LAMBDA function to create custom, reusable functions and call them by a friendly name. This is a powerful function to create your own calculations. In our case, we wanted to calculate the income after deducting tax. The formula: = LAMBDA(x,y,x*(1-y))

Kofi Ntim🇬🇭

11,082 views • 1 year ago

I did it! 100 Unique CSS Patterns 🤩 👉 👈 One of the biggest collection of CSS patterns ever! ✅ One-click to copy/paste ✅ One value to control the size ✅ Optimized with CSS variables Which one is your favorite? Tell me in the comments 👇 #CSS

I did it! 100 Unique CSS Patterns 🤩 👉 👈 One of the biggest collection of CSS patterns ever! ✅ One-click to copy/paste ✅ One value to control the size ✅ Optimized with CSS variables Which one is your favorite? Tell me in the comments 👇 #CSS

CSS by T. Afif

29,170 views • 3 years ago

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 ʕ•ᴥ•ʔ

152,923 views • 2 years ago

#WATCH | On Ram Temple Pran Pratishtha ceremony, Congress MP Rahul Gandhi says, "The RSS and the BJP have made the 22nd January function a completely political Narendra Modi function. It's a RSS BJP function and I think that is why the Congress President said that he would not go to the function. We are open to all religions, all practices. Even the authorities of the Hindu religion, the biggest authorities of the Hindu religion have made their view public about what they think about the 22nd January function that it is a political function. So it is difficult for us to go to a political function which is designed around the Prime Minister of India and designed around the RSS..."

#WATCH | On Ram Temple Pran Pratishtha ceremony, Congress MP Rahul Gandhi says, "The RSS and the BJP have made the 22nd January function a completely political Narendra Modi function. It's a RSS BJP function and I think that is why the Congress President said that he would not go to the function. We are open to all religions, all practices. Even the authorities of the Hindu religion, the biggest authorities of the Hindu religion have made their view public about what they think about the 22nd January function that it is a political function. So it is difficult for us to go to a political function which is designed around the Prime Minister of India and designed around the RSS..."

ANI

349,872 views • 2 years ago

Always have an SVG goo filter ready to go in your UI toolkit 🎯 .container { filter: url(#goo); } One line of CSS on the container + the SVG filter 🤙 Throw a border on for "Fake 3D" 👀 SVG filter code below 👇

Always have an SVG goo filter ready to go in your UI toolkit 🎯 .container { filter: url(#goo); } One line of CSS on the container + the SVG filter 🤙 Throw a border on for "Fake 3D" 👀 SVG filter code below 👇

jhey ʕ•ᴥ•ʔ

189,799 views • 2 years ago

🚨RFK JR: "Your whole industry told the public for years to 'trust the experts.' 'Trust the experts' is not a function of science or democracy, it's a function of totalitarianism and religion."

🚨RFK JR: "Your whole industry told the public for years to 'trust the experts.' 'Trust the experts' is not a function of science or democracy, it's a function of totalitarianism and religion."

Autism Capital 🧩

181,117 views • 1 year ago

Live2D tips: Mirror paste features! Do you use the mirror paste function? With this function, you can immediately copy and flip the blendshape parameters for the eyes! Many people think flipping blendshapes is difficult, but I will solve that problem! First, select both eye deformers and copy the eye deformations using [Ctrl+Shift+C]. Select "Paste Form Special" in the Parameters palette. Select the "Warp Deformer" tab and check "Invert coordinates". Next, move the keyframe to the opposite side and paste it using [Ctrl+Shift+Z]. The mirror paste is now complete!!! It's so easy! Voice video🔽🔽🔽 #Live2D

Live2D tips: Mirror paste features! Do you use the mirror paste function? With this function, you can immediately copy and flip the blendshape parameters for the eyes! Many people think flipping blendshapes is difficult, but I will solve that problem! First, select both eye deformers and copy the eye deformations using [Ctrl+Shift+C]. Select "Paste Form Special" in the Parameters palette. Select the "Warp Deformer" tab and check "Invert coordinates". Next, move the keyframe to the opposite side and paste it using [Ctrl+Shift+Z]. The mirror paste is now complete!!! It's so easy! Voice video🔽🔽🔽 #Live2D

Ninta(ニンタ) Art&Live2D (Vgen comm)

12,452 views • 9 months ago

Your iPhone has a dictation button now. Map the Action Button to Monologue, press the side of your phone, and start talking. No app to open. Your transcript is ready to paste when you’re done. Naveen Naidu shows how it works 👇

Your iPhone has a dictation button now. Map the Action Button to Monologue, press the side of your phone, and start talking. No app to open. Your transcript is ready to paste when you’re done. Naveen Naidu shows how it works 👇

Every 🧱

37,774 views • 2 months ago

The 10x programmer/designer is created largely as a function of motivation. The will to see your creation exist. An impatience with turning nothing into something.

The 10x programmer/designer is created largely as a function of motivation. The will to see your creation exist. An impatience with turning nothing into something.

DHH

78,872 views • 1 year ago

A New Function of Samsung Galaxy Z Fold7: Smart Collection In fact, it applies to all One UI 8 devices. But this feature is limited to the China version.Because this is a function developed by the China team.But I think it will gradually spread to the global market.

A New Function of Samsung Galaxy Z Fold7: Smart Collection In fact, it applies to all One UI 8 devices. But this feature is limited to the China version.Because this is a function developed by the China team.But I think it will gradually spread to the global market.

Ice Universe

83,947 views • 1 year ago

TMC is claiming BJP is using CID to terrorize its MLAs now 🍀 > TMC MLA Nayna Bandyopadhyay, Chowrangee AC, was visiting an Eid function when CID went to her home > It is being alleged that her signature during the oath ceremony was forged as it looked crooked

TMC is claiming BJP is using CID to terrorize its MLAs now 🍀 > TMC MLA Nayna Bandyopadhyay, Chowrangee AC, was visiting an Eid function when CID went to her home > It is being alleged that her signature during the oath ceremony was forged as it looked crooked

do'o kappa

12,890 views • 3 months ago