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,346 subscribers

168,832 views • 22 days 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

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

244,040 views • 3 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

Copy + Paste is a function

Copy + Paste is a function

kuri 📸🌱 (SideAcc)

566,250 views • 1 year 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 ʕ•ᴥ•ʔ

270,277 views • 7 months ago

when the tool is missing, make it 👨‍🍳 motion path visualizer w/ SVG for accumulated cubic-bezier timed CSS animations ⚡

when the tool is missing, make it 👨‍🍳 motion path visualizer w/ SVG for accumulated cubic-bezier timed CSS animations ⚡

jhey ʕ•ᴥ•ʔ

202,912 views • 7 months ago

figured out how to do motion blurs in the browser using svg filters and css

figured out how to do motion blurs in the browser using svg filters and css

ravarcheon

24,707 views • 6 months 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,528 views • 1 year 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,822 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,909 views • 1 year ago

It's still kinda wild to me how much tweaking the easing function changes the feel of what kind of materials and tools you're working with. This video demonstrates "quintic" vs. "elastic" vs. none. The easing function controls the scale of the SDF subtraction.

It's still kinda wild to me how much tweaking the easing function changes the feel of what kind of materials and tools you're working with. This video demonstrates "quintic" vs. "elastic" vs. none. The easing function controls the scale of the SDF subtraction.

Mike Turitzin

10,506 views • 2 months ago

That satisfying seconds-hand tween. Just a fast tween using elastic easing function

That satisfying seconds-hand tween. Just a fast tween using elastic easing function

sleitnick

20,358 views • 1 year ago

Motion study for the first half of 2025, Little Plains Want to do more of this — animation, prototyping, motion, AI? Use AE, Jitter, Lottie, Rive, Spline? Live for clean timing, easing? Exploring C4D, Framer Motion, JS/CSS, & AI-driven interfaces? 📩 hello@littleplains.co

Motion study for the first half of 2025, Little Plains Want to do more of this — animation, prototyping, motion, AI? Use AE, Jitter, Lottie, Rive, Spline? Live for clean timing, easing? Exploring C4D, Framer Motion, JS/CSS, & AI-driven interfaces? 📩 [email protected]

Emmett

25,982 views • 10 months ago

RFK JR: Trust the experts is not a function of science or democracy, it is a function of totalitarianism and religion

RFK JR: Trust the experts is not a function of science or democracy, it is a function of totalitarianism and religion

Acyn

2,513,857 views • 1 year ago

I...i didnt know I pressed the slow motion function until I saved it

I...i didnt know I pressed the slow motion function until I saved it

den⁷ ᴬᵗᵉᵉᶻ ✨️

318,603 views • 10 months 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,818 views • 2 years ago

it's all about easing curves ⏱️ translation powered via CSS custom properties

it's all about easing curves ⏱️ translation powered via CSS custom properties

jhey ʕ•ᴥ•ʔ

64,029 views • 1 year 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,511 views • 1 year ago

adding the little details™ progressively enhance the overdrag bounce with a sprinkle of JavaScript and some CSS linear() ✨

adding the little details™ progressively enhance the overdrag bounce with a sprinkle of JavaScript and some CSS linear() ✨

jhey ʕ•ᴥ•ʔ

90,151 views • 2 years ago

This is how the tendons in your arm function to move your fingers

This is how the tendons in your arm function to move your fingers

Interesting AF

382,604 views • 1 year ago