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

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

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

На главную

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 просмотров • 21 дней назад •via X (Twitter)

Юмор Животные

Anya Rossi• Live Now

Private livecam show

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

Нет доступных комментариев

Здесь появятся комментарии из оригинального поста

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

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

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

Copy + Paste is a function

Copy + Paste is a function

kuri 📸🌱 (SideAcc)

566,250 просмотров • 1 год назад

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

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

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

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

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

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

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

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

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,974 просмотров • 10 месяцев назад

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,855 просмотров • 1 год назад

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

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

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

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

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

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