Loading video...

Video Failed to Load

There was a problem loading this video. This could be due to a temporary network issue or the video might be unavailable.

This kinda sums up better what CSS offset-path gives you 🏎️ A responsive way to animate an element along the perimeter of another 🎬 Use the rect() value to control the inset of that path ✨ And the great thing is, it's responsive 🤙

jhey ʕ•ᴥ•ʔ

135,356 subscribers

71,497 views • 2 years ago •via X (Twitter)

Arts Science & Technology Education

Anya Rossi• Live Now

Private livecam show

9 Comments

Andy Hawkes2 years ago

Going to rename bookmarks to Jheymarks

jhey ▲🐻🎈2 years ago

Haha – Saving that one 😅

Florin Pop 👨🏻‍💻2 years ago

Could you make the track be an 8 shape? 👀

jhey ▲🐻🎈2 years ago

Did one of them already 😉

Mandy Michael2 years ago

What! This is awesome!’!

Javaid Shah2 years ago

That's cool 😎

Daniel Cranney 🇬🇧2 years ago

Amazing as always my man 👏

Matt2 years ago

Speed/length of animation should really depend on the track too, that’s an issue with “responsive animations” for lack of a better term. I guess we’d just set it with js based on vp size

jhey ▲🐻🎈2 years ago

Can jus' use a container query. @container (width < 300px) { .car { animation-duration: 2s; } } Didn't add this in because wasn't really what the demo was getting at 🤙

Related Videos

CSS Tip! ✨ It's 2024 and you have a new way to make animated borders 🚀 .glow::after { offset-path: rect(0 100% 100% 0 round var(--radius)); animation: loop; } @keyframes loop { to { offset-distance: 100%; }} Using the offset-* properties you can animate elements along the perimeter of others 😍 The rect() value gained support in Safari 17.2 🙌 To start, you create an element and put it inside your main element. For example, you put a span inside the button 🤙 Click me! Make the element fill its parent with absolute positioning and inset [data-glow] { position: absolute; inset: 0; } Now the good part, you use a pseudoelement on that element and define an offset-path [data-glow]::after { content: ""; offset-path: rect(0 auto auto 0 round var(--radius)); animation: loop 2.6s infinite linear; } With the rect value, you are saying the path fills the parent container: top: 0 right: auto || 100% bottom: auto || 100% left: 0 Then you can use round to make sure the path uses the same radius as whatever the parent has The @keyframes animation merely animates the offset-distance of that pseudoelement to 100% @keyframes loop { to { offset-distance: 100%; }} You can see this more clearly in the video 🫶 The offset-* properties also include an offset-anchor property. This allows you to dictate which point of the element follows the path. For example: anchor-offset: 100% 50%; This means that the "right, center" of the element will follow the perimeter of the parent element 🤙 Lastly, the visuals 🎨 For color, you can use a gradient such as a linear gradient to fill the pseudo-element. [data-glow]::after { background: radial-gradient( circle at right, hsl(320 90% 100%), transparent 50% ); } Then clip away everything so you only have the border and can still have translucent backgrounds, etc. Use a mask with mask-composite ✨ A little transparent border trick: [data-glow] { border: 2px solid transparent; mask: linear-gradient(transparent, transparent), linear-gradient(white, white); mask-clip: padding-box, border-box; mask-composite: intersect; } Bit of a long one. Hope you find it useful 🙏 CodePen.IO link below 👇

CSS Tip! ✨ It's 2024 and you have a new way to make animated borders 🚀 .glow::after { offset-path: rect(0 100% 100% 0 round var(--radius)); animation: loop; } @keyframes loop { to { offset-distance: 100%; }} Using the offset-* properties you can animate elements along the perimeter of others 😍 The rect() value gained support in Safari 17.2 🙌 To start, you create an element and put it inside your main element. For example, you put a span inside the button 🤙 Click me! Make the element fill its parent with absolute positioning and inset [data-glow] { position: absolute; inset: 0; } Now the good part, you use a pseudoelement on that element and define an offset-path [data-glow]::after { content: ""; offset-path: rect(0 auto auto 0 round var(--radius)); animation: loop 2.6s infinite linear; } With the rect value, you are saying the path fills the parent container: top: 0 right: auto || 100% bottom: auto || 100% left: 0 Then you can use round to make sure the path uses the same radius as whatever the parent has The @keyframes animation merely animates the offset-distance of that pseudoelement to 100% @keyframes loop { to { offset-distance: 100%; }} You can see this more clearly in the video 🫶 The offset-* properties also include an offset-anchor property. This allows you to dictate which point of the element follows the path. For example: anchor-offset: 100% 50%; This means that the "right, center" of the element will follow the perimeter of the parent element 🤙 Lastly, the visuals 🎨 For color, you can use a gradient such as a linear gradient to fill the pseudo-element. [data-glow]::after { background: radial-gradient( circle at right, hsl(320 90% 100%), transparent 50% ); } Then clip away everything so you only have the border and can still have translucent backgrounds, etc. Use a mask with mask-composite ✨ A little transparent border trick: [data-glow] { border: 2px solid transparent; mask: linear-gradient(transparent, transparent), linear-gradient(white, white); mask-clip: padding-box, border-box; mask-composite: intersect; } Bit of a long one. Hope you find it useful 🙏 CodePen.IO link below 👇

jhey ʕ•ᴥ•ʔ

283,498 views • 2 years ago

Responsive inverted reveal scroller with CSS 🤙 img { position: fixed; animation: clip; animation-timeline: --section; animation-range: exit; } @keyframes clip { to { clip-path: inset(100% 0 0 0); } Fix the image, animate clip on parent scroll position (--section) ✨

Responsive inverted reveal scroller with CSS 🤙 img { position: fixed; animation: clip; animation-timeline: --section; animation-range: exit; } @keyframes clip { to { clip-path: inset(100% 0 0 0); } Fix the image, animate clip on parent scroll position (--section) ✨

jhey ʕ•ᴥ•ʔ

90,496 views • 2 years ago

So stoked to finally share my new PLUGIN for After Effects: Wave The Path. Waveforms along paths, zero setup. Pick one path to generate the waveform, and use a second path to control where and how the waveform appears. What really surprised me is how responsive it is. GPU accelerated, blazing fast, instant feedback. It’s honestly super fun to use. Alright, a few examples 👇👇👇 (the waveform rotation feature is a treat)

So stoked to finally share my new PLUGIN for After Effects: Wave The Path. Waveforms along paths, zero setup. Pick one path to generate the waveform, and use a second path to control where and how the waveform appears. What really surprised me is how responsive it is. GPU accelerated, blazing fast, instant feedback. It’s honestly super fun to use. Alright, a few examples 👇👇👇 (the waveform rotation feature is a treat)

François Lefebvre

10,275 views • 6 months ago

Updated my SVG-to-CSS converter to support multiple path elements. An easy way to convert complex SVG shapes into CSS. It's a single-element implementation with a single shape() value! You can also have the border-only version using border-shape.

Updated my SVG-to-CSS converter to support multiple path elements. An easy way to convert complex SVG shapes into CSS. It's a single-element implementation with a single shape() value! You can also have the border-only version using border-shape.

CSS by T. Afif

15,196 views • 2 months ago

Is “OG Disillusionment” a thing? Unsure. But what I do know is that our industry is headed down the wrong path. A path of centralization is a path to destruction. It’s a path where this tech loses all its value because it loses the properties that make it valuable. Centralization & bankers lead to doom. We must refocus on decentralization.

Is “OG Disillusionment” a thing? Unsure. But what I do know is that our industry is headed down the wrong path. A path of centralization is a path to destruction. It’s a path where this tech loses all its value because it loses the properties that make it valuable. Centralization & bankers lead to doom. We must refocus on decentralization.

Bruce Fenton

14,202 views • 7 months ago

Future CSS Tip! 📜 You can use scroll-driven animations like JavaScript's IntersectionObserver to animate highlights ✏️ mark { animation-name: highlight; animation-timeline: view(); } @keyframes highlight { to { --light: 1; }} mark span { background-position: calc((1 - var(--light)) * 110%) 0; transition: background 1s; } The "trick" is to animate a custom property with a scroll-driven animation. These will flip in a binary fashion if not using @property. And that's what you want. You can then use that value to set the style on the highlights ( ). What you see is the transition of a background-position to get the multi-line highlight. A technique posted on this account before 🤙 Added bonuses: – Could use another element for the author initials of a highlight and animate that in too. Here the pseudoelement is being used. But another accessible span would do the trick. – Highlight color is scoped inline via hue. – View transition theme switch for a bonus that looks like a triangle. Been messing with Vercel docs so was the easiest thing to go with 😅 CodePen.IO link below! 👇

Future CSS Tip! 📜 You can use scroll-driven animations like JavaScript's IntersectionObserver to animate highlights ✏️ mark { animation-name: highlight; animation-timeline: view(); } @keyframes highlight { to { --light: 1; }} mark span { background-position: calc((1 - var(--light)) * 110%) 0; transition: background 1s; } The "trick" is to animate a custom property with a scroll-driven animation. These will flip in a binary fashion if not using @property. And that's what you want. You can then use that value to set the style on the highlights ( ). What you see is the transition of a background-position to get the multi-line highlight. A technique posted on this account before 🤙 Added bonuses: – Could use another element for the author initials of a highlight and animate that in too. Here the pseudoelement is being used. But another accessible span would do the trick. – Highlight color is scoped inline via hue. – View transition theme switch for a bonus that looks like a triangle. Been messing with Vercel docs so was the easiest thing to go with 😅 CodePen.IO link below! 👇

jhey ʕ•ᴥ•ʔ

257,589 views • 2 years ago

Excited to share that our team Rive has launched Responsive Layouts today! Here is a 🧵 of some the new features and how to use them. Starting off with how to create a responsive menu.

Excited to share that our team Rive has launched Responsive Layouts today! Here is a 🧵 of some the new features and how to use them. Starting off with how to create a responsive menu.

Philip Chung

20,376 views • 1 year ago

CSS shape() landed in Firefox 148. It's similar to path(), but allows the full expressiveness of CSS…

CSS shape() landed in Firefox 148. It's similar to path(), but allows the full expressiveness of CSS…

Firefox for Web Developers

11,375 views • 4 months ago

looks like to get the lowest time in shadow generations its not just about picking the fastest path, but finding the path that gives you chaos control the quickest too this is fun

looks like to get the lowest time in shadow generations its not just about picking the fastest path, but finding the path that gives you chaos control the quickest too this is fun

Aeyga 🌊 アエーガ

75,520 views • 1 year ago

stop duplicating your navigation for mobile 🤙 use the Popover API and some CSS tricks to make it responsive ✅ sidebar on desktop ✅ drawer on mobile ✅ progressively enhance the drag mechanics

stop duplicating your navigation for mobile 🤙 use the Popover API and some CSS tricks to make it responsive ✅ sidebar on desktop ✅ drawer on mobile ✅ progressively enhance the drag mechanics

jhey ʕ•ᴥ•ʔ

256,187 views • 1 year ago

This is not a return to the old skeuomorphism. The future is not dimensional… It's fully 3D and responsive.

This is not a return to the old skeuomorphism. The future is not dimensional… It's fully 3D and responsive.

Andy Allen

80,626 views • 1 year ago

Another day another new thing This is Lailatul what? Yah Allah please guide us to the right path

Another day another new thing This is Lailatul what? Yah Allah please guide us to the right path

Hassan Abdulsalam 🇳🇬

209,857 views • 1 year ago

By simply offsetting the rotation along a path in After Effects, it gives this faux-3D look to the path. 👀👀👀

By simply offsetting the rotation along a path in After Effects, it gives this faux-3D look to the path. 👀👀👀

François Lefebvre

108,741 views • 1 year ago

This is what it’s like to walk on the main tourist path in Long Bech, California All along the walking path that overlooks the Queen Mary, Shoreline Village and the beach are anti-Donald Trump messages spray painted directly into the path Graffiti everywhere, homeless everywhere, trash everywhere, homeless tents all over the beach Another once great city destroyed by Democrats and made to look like a third world trash can Democrats allow this and this they do absolutely nothing to clean it up

This is what it’s like to walk on the main tourist path in Long Bech, California All along the walking path that overlooks the Queen Mary, Shoreline Village and the beach are anti-Donald Trump messages spray painted directly into the path Graffiti everywhere, homeless everywhere, trash everywhere, homeless tents all over the beach Another once great city destroyed by Democrats and made to look like a third world trash can Democrats allow this and this they do absolutely nothing to clean it up

Wall Street Apes

50,857 views • 1 month ago

Handle yourself. Keep yourself in check. Keep yourself on the path. Lead yourself so that you become a person that others will follow. And they will follow you on the path. The path of discipline, of righteousness, and the path that leads to peace and to freedom. 166-3:04:28

Handle yourself. Keep yourself in check. Keep yourself on the path. Lead yourself so that you become a person that others will follow. And they will follow you on the path. The path of discipline, of righteousness, and the path that leads to peace and to freedom. 166-3:04:28

Jocko Quote Database

18,651 views • 5 months ago

Is it possible to spoil your baby by being too responsive? The short answer is no. Somewhere along the way, we developed the notion that letting babies “cry it out” was good for them. In reality, it’s just the opposite. Warm and responsive relationships help infants develop trust, attachment, and a sense of security… which, in turn, lead to self-reliance and the ability to regulate’s one’s own emotions. These abilities have been linked to higher self-esteem, improved stress management, healthier relationships, and even superior academic performance. This lovely video, shared to IG by previvor2survivor states the case beautifully. This is probably an opportune time for a reminder that parenting is not an all or nothing proposition. It’s impractical to think that even the most attentive parent will be able to respond instantly to EVERY cry. And within the context of a warm and responsive relationship, that’s just fine. In finite amounts, opportunities for your baby to self-soothe can be beneficial. But if you’ve been convinced that responding too often to your infant’s expressions of need is the path to spoiling, think again. Infants can’t be spoiled by love. It’s just that simple.

Is it possible to spoil your baby by being too responsive? The short answer is no. Somewhere along the way, we developed the notion that letting babies “cry it out” was good for them. In reality, it’s just the opposite. Warm and responsive relationships help infants develop trust, attachment, and a sense of security… which, in turn, lead to self-reliance and the ability to regulate’s one’s own emotions. These abilities have been linked to higher self-esteem, improved stress management, healthier relationships, and even superior academic performance. This lovely video, shared to IG by previvor2survivor states the case beautifully. This is probably an opportune time for a reminder that parenting is not an all or nothing proposition. It’s impractical to think that even the most attentive parent will be able to respond instantly to EVERY cry. And within the context of a warm and responsive relationship, that’s just fine. In finite amounts, opportunities for your baby to self-soothe can be beneficial. But if you’ve been convinced that responding too often to your infant’s expressions of need is the path to spoiling, think again. Infants can’t be spoiled by love. It’s just that simple.

Dan Wuori

451,123 views • 2 years ago

especially because the majority of edits that made drag path blow up/be so successful in the first place were about speaking against injustice. donating the proceeds of drag path to a charity could be such an easy way to show support and make a difference

especially because the majority of edits that made drag path blow up/be so successful in the first place were about speaking against injustice. donating the proceeds of drag path to a charity could be such an easy way to show support and make a difference

evie Ψ

72,619 views • 4 months ago

in the audience, scratchin an itch: responsive #CSS scroll animation try it!

in the audience, scratchin an itch: responsive #CSS scroll animation try it!

Adam Argyle

39,389 views • 9 months ago

CSS Tip! ⭐️ You can use the lh (line-height) unit on background layers to emphasize multiple lines of text responsively without extra elements! ⚡️ h1 { background: linear-gradient(white, white), grey; background-size: 100% calc(var(--lines) * 1lh), 100% 100%; background-clip: text; color: transparent; } Here you emphasize the first two lines of the heading with white using a sized background-image layer It has a size of 2lh ✨ Then the rest of the element is colored with whatever other colors you want to use as layers. If you watch the video, you can see different colors used for different lines and then fade it out if you wish. You could do whatever you like with it 😎 Neat part is that it's responsive. The font-size is set with a clamp and you can resize the viewport or the element and the number of lines emphasized will remain 🤙 Last but not least, make sure to use background-clip: text and color: transparent so the background shines through 🔥 Also, note that if you're only looking to highlight the first line, you can still use the :first-line pseudo 🫶 Have a play with it and see what you can come up with! CodePen.IO link below! 👇

CSS Tip! ⭐️ You can use the lh (line-height) unit on background layers to emphasize multiple lines of text responsively without extra elements! ⚡️ h1 { background: linear-gradient(white, white), grey; background-size: 100% calc(var(--lines) * 1lh), 100% 100%; background-clip: text; color: transparent; } Here you emphasize the first two lines of the heading with white using a sized background-image layer It has a size of 2lh ✨ Then the rest of the element is colored with whatever other colors you want to use as layers. If you watch the video, you can see different colors used for different lines and then fade it out if you wish. You could do whatever you like with it 😎 Neat part is that it's responsive. The font-size is set with a clamp and you can resize the viewport or the element and the number of lines emphasized will remain 🤙 Last but not least, make sure to use background-clip: text and color: transparent so the background shines through 🔥 Also, note that if you're only looking to highlight the first line, you can still use the :first-line pseudo 🫶 Have a play with it and see what you can come up with! CodePen.IO link below! 👇

jhey ʕ•ᴥ•ʔ

413,657 views • 2 years ago