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

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

162,631 görüntüleme • 20 gün önce •via X (Twitter)

Komedi Hayvanlar

Anya Rossi• Live Now

Private livecam show

0 Yorum

Yorum bulunmuyor

Orijinal gönderinin yorumları burada görünecek

Benzer Videolar

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

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

Copy + Paste is a function

Copy + Paste is a function

kuri 📸🌱 (SideAcc)

566,250 görüntüleme • 1 yıl önce

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 görüntüleme • 7 ay önce

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 görüntüleme • 7 ay önce

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 görüntüleme • 6 ay önce

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

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

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

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 görüntüleme • 1 ay önce

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 görüntüleme • 11 ay önce

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 görüntüleme • 10 ay önce

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

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 görüntüleme • 10 ay ö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 ʕ•ᴥ•ʔ

152,818 görüntüleme • 2 yıl önce

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

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

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

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