Video yükleniyor...

Video Yüklenemedi

Ana Sayfaya Dön

quick breakdown of how to use `offset-path` css prop to build a fancy marquee/carousel that follows any svg path

nonzeroexitcode's profile picture

daniel petho

8,204 subscribers

92,288 görüntüleme • 2 ay önce •via X (Twitter)

Bilim & TeknolojiEğitim
LIVE

Anya Rossi• Live Now

Private livecam show

0 Yorum

Yorum bulunmuyor

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

Benzer Videolar

alrighty! marquee along path component is live on fancy! w/ a bunch of customizations: - scroll based velocity - draggable - slowdown on hover - custom easing - mapping any CSS prop from start to end - docs on how it's built! source code & link in comments↴
0:15

alrighty! marquee along path component is live on fancy! w/ a bunch of customizations: - scroll based velocity - draggable - slowdown on hover - custom easing - mapping any CSS prop from start to end - docs on how it's built! source code & link in comments↴

daniel petho

16,796 görüntüleme • 1 yıl önce

Want a deep dive into your Wi-Fi? 📶 Use the command netsh wlan show wlanreport to generate a "super fancy" wireless report about your connection. Just copy the file path provided, paste it into your browser, and explore a detailed breakdown of your wireless situation
0:16

Want a deep dive into your Wi-Fi? 📶 Use the command netsh wlan show wlanreport to generate a "super fancy" wireless report about your connection. Just copy the file path provided, paste it into your browser, and explore a detailed breakdown of your wireless situation

NetworkChuck

31,639 görüntüleme • 2 ay önce

Meet the Draw SVG Page Transition Template. It animates an <svg> path with a smooth draw effect, then wipes it away to reveal the next page. Replace the path with your own and experiment freely. Part of the Osmo Page Transition Course 🔗
0:10

Meet the Draw SVG Page Transition Template. It animates an <svg> path with a smooth draw effect, then wipes it away to reveal the next page. Replace the path with your own and experiment freely. Part of the Osmo Page Transition Course 🔗

Osmo

41,484 görüntüleme • 7 ay önce

UI && CSS Tip! 🚀 You can use View Transitions to create that Radix by WorkOS style theme switcher 👀 ::view-transition-new(root) { animation: reveal;} keyframes reveal { 0% { clip-path: polygon(...);} /* Code 👇 */ } Animate clip-path between modes 😍 CodePen.IO link below! 👇
0:18

UI && CSS Tip! 🚀 You can use View Transitions to create that Radix by WorkOS style theme switcher 👀 ::view-transition-new(root) { animation: reveal;} keyframes reveal { 0% { clip-path: polygon(...);} /* Code 👇 */ } Animate clip-path between modes 😍 CodePen.IO link below! 👇

jhey ʕ•ᴥ•ʔ

232,919 görüntüleme • 3 yıl önce

Offset vector paths now available in Figma Draw. You can now take any flattened vector path and offset it to expand or retract it. It even lets you round out those sharp edges.
0:12

Offset vector paths now available in Figma Draw. You can now take any flattened vector path and offset it to expand or retract it. It even lets you round out those sharp edges.

miggi from figgi

55,585 görüntüleme • 1 yıl önce

me when the player I've chosen to show my story to, instead of going down the intended path, follows a forbidden path that was entirely left over from the original game I bulldozed to create my story, with the sole purpose of killing me. (They've wanted a boss fight for years)
0:11

me when the player I've chosen to show my story to, instead of going down the intended path, follows a forbidden path that was entirely left over from the original game I bulldozed to create my story, with the sole purpose of killing me. (They've wanted a boss fight for years)

You Not Gonna Win

23,771 görüntüleme • 1 ay önce

In Firefox DevTools you can use a visual editor to adjust CSS clip-path of an element! Love such small features, just like the visual controls for flexbox and grid in Chrome DevTools 🔥
0:15

In Firefox DevTools you can use a visual editor to adjust CSS clip-path of an element! Love such small features, just like the visual controls for flexbox and grid in Chrome DevTools 🔥

Minko Gechev

14,504 görüntüleme • 3 yıl önce

💡CSS Tip! Create a tooltip that follows an anchor with modern CSS! No JavaScript is used to control the position of the tooltip or its tail. It's 100% CSS magic!
0:16

💡CSS Tip! Create a tooltip that follows an anchor with modern CSS! No JavaScript is used to control the position of the tooltip or its tail. It's 100% CSS magic!

CSS by T. Afif

57,924 görüntüleme • 11 ay önce

🔲♦️ Used path animation + Time displacement to make a reactive deformation and bring an impossible shape to life. breakdown ↓👀
0:20

🔲♦️ Used path animation + Time displacement to make a reactive deformation and bring an impossible shape to life. breakdown ↓👀

AB

63,273 görüntüleme • 3 yıl önce

Jesus Christ showed you how to live your life if you want to reach the Kingdom of God, and believing in Jesus means believing that His path is righteous and choosing to walk that path, not just saying that you believe in Him...
0:10

Jesus Christ showed you how to live your life if you want to reach the Kingdom of God, and believing in Jesus means believing that His path is righteous and choosing to walk that path, not just saying that you believe in Him...

Open Minded Approach

10,920 görüntüleme • 4 ay önce

You really want to enter that kind of path?😏
0:17

You really want to enter that kind of path?😏

nyannie 💀

25,543 görüntüleme • 4 ay önce

How to make a cool avatar that follows your cursor, inspired by Ahmed Dahbi with Framer agent? Full breakdown below 👇
0:10

How to make a cool avatar that follows your cursor, inspired by Ahmed Dahbi with Framer agent? Full breakdown below 👇

Tran Mau Tri Tam ✪

277,985 görüntüleme • 1 ay önce

If you’re feeling lost, build something. Build a business. Build your body. Build a real skill. Build anything that forces you to learn and pulls your focus forward. Don’t waste time trying to pick the perfect thing. Don’t sit around worrying about how tough it’ll be. Just start moving. The right path has a way of finding you once you’re in motion. 💯💖🪄
0:15

If you’re feeling lost, build something. Build a business. Build your body. Build a real skill. Build anything that forces you to learn and pulls your focus forward. Don’t waste time trying to pick the perfect thing. Don’t sit around worrying about how tough it’ll be. Just start moving. The right path has a way of finding you once you’re in motion. 💯💖🪄

Lord of Sugar 💖🪄

38,709 görüntüleme • 5 ay önce

an alternative approach to console animation that doesn't hijack the console 1. inline CSS animation into an SVG 2. style console message with background-image 3. use SVG as the background-image 🚀 console​.info( "%ccome cook", "background-image: url(/animated.svg);" )
0:10

an alternative approach to console animation that doesn't hijack the console 1. inline CSS animation into an SVG 2. style console message with background-image 3. use SVG as the background-image 🚀 console​.info( "%ccome cook", "background-image: url(/animated.svg);" )

jhey ʕ•ᴥ•ʔ

93,420 görüntüleme • 1 yıl önce

Path of a junior employee to senior manager 💀
0:11

Path of a junior employee to senior manager 💀

R I D H I

60,913 görüntüleme • 8 ay önce

hear me out you don’t need js to create a marquee animation just a couple of lines of css and duplicated children with `aria-hidden`
0:11

hear me out you don’t need js to create a marquee animation just a couple of lines of css and duplicated children with `aria-hidden`

dmytro

160,361 görüntüleme • 1 yıl önce

Here is a showcase of two plugins that will be available in our next client update. Tile Packs & Shortest path! Shortest path features a breadcrumb trail that we are sure is familiar to some of you!
0:56

Here is a showcase of two plugins that will be available in our next client update. Tile Packs & Shortest path! Shortest path features a breadcrumb trail that we are sure is familiar to some of you!

HDOS

23,103 görüntüleme • 1 yıl önce