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

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

На главную

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

Наука и технологииОбразование
LIVE

Anya Rossi• Live Now

Private livecam show

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

You really want to enter that kind of path?😏

nyannie 💀

25,543 просмотров • 4 месяцев назад

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

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

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

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

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

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