正在加载视频...

视频加载失败

加载此视频时出现问题。这可能是由于临时网络问题，或视频可能不可用。

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

daniel petho

8,199 subscribers

91,505 次观看 • 12 天前 •via X (Twitter)

科学技术教育

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↴

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 年前

It's tutorial time 🚨 A lot of people asked me for a tutorial on the SVG path animation I created in Framer, so I thought I would do a full breakdown of all of the steps I took to get it working. Find out how below 👇🏻

It's tutorial time 🚨 A lot of people asked me for a tutorial on the SVG path animation I created in Framer, so I thought I would do a full breakdown of all of the steps I took to get it working. Find out how below 👇🏻

JJ Gerrish

82,356 次观看 • 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

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,560 次观看 • 1 个月前

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 🔗

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 次观看 • 5 个月前

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! 👇

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.

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

54,779 次观看 • 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 🔥

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!

💡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 次观看 • 10 个月前

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

🔲♦️ 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...

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 次观看 • 2 个月前

You really want to enter that kind of path?😏

You really want to enter that kind of path?😏

nyannie 💀

17,598 次观看 • 2 个月前

I’m creating a playground of CSS easing functions 🌟 Each animation will include an SVG preview, along with a ready-to-copy Tailwind CSS class. Launching next week 🔥

I’m creating a playground of CSS easing functions 🌟 Each animation will include an SVG preview, along with a ready-to-copy Tailwind CSS class. Launching next week 🔥

Pasquale Vitiello

35,479 次观看 • 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. 💯💖🪄

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 次观看 • 3 个月前

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);" )

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 💀

Path of a junior employee to senior manager 💀

R I D H I

60,913 次观看 • 7 个月前

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`

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!

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 次观看 • 11 个月前

Custom app icon chooser in Finma - A live preview mimicking the dock - Preview changes according to the icon variant - Follows a curved animation path

Custom app icon chooser in Finma - A live preview mimicking the dock - Preview changes according to the icon variant - Follows a curved animation path

Tanmay

18,645 次观看 • 1 年前

"The path that leads to truth is littered with the bodies of the ignorant." - Miyamoto Musashi Will you walk the Path, or lie upon it?

"The path that leads to truth is littered with the bodies of the ignorant." - Miyamoto Musashi Will you walk the Path, or lie upon it?

The Path to Kyorikai

13,298 次观看 • 3 年前