Video wird geladen...

Video konnte nicht geladen werden

Zur Startseite

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 Aufrufe • vor 20 Tagen •via X (Twitter)

Wissenschaft & TechnologieBildung
LIVE

Anya Rossi• Live Now

Private livecam show

0 Kommentare

Keine Kommentare verfügbar

Kommentare vom Original-Post werden hier angezeigt

Ähnliche Videos

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 Aufrufe • vor 1 Jahr

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 👇🏻
0:10

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 Aufrufe • vor 1 Jahr

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 Aufrufe • vor 1 Monat

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 Aufrufe • vor 5 Monaten

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 Aufrufe • vor 3 Jahren

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 Aufrufe • vor 1 Jahr

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 Aufrufe • vor 3 Jahren

💡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 Aufrufe • vor 10 Monaten

🔲♦️ 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 Aufrufe • vor 3 Jahren

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 Aufrufe • vor 3 Monaten

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

You really want to enter that kind of path?😏

nyannie 💀

17,598 Aufrufe • vor 3 Monaten

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 Aufrufe • vor 3 Monaten

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 Aufrufe • vor 1 Jahr

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 Aufrufe • vor 7 Monaten

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 Aufrufe • vor 1 Jahr

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 Aufrufe • vor 1 Jahr

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

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 Aufrufe • vor 1 Jahr

"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?
0:14

"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 Aufrufe • vor 3 Jahren