Video yükleniyor...

Video Yüklenemedi

Ana Sayfaya Dön

curved scrollbar: completed it ✅ CSS + SVG to animate stroke-dashoffset combined with scroll-snap

jh3yy's profile picture

jhey ʕ•ᴥ•ʔ

145,823 subscribers

229,714 görüntüleme • 1 yıl önce •via X (Twitter)

EğitimSanatBilim & Teknoloji
LIVE

Anya Rossi• Live Now

Private livecam show

12 Yorum

jhey ▲🐻🎈 profil fotoğrafı
jhey ▲🐻🎈1 yıl önce

p.s completed it last year 💀 but yesterday's gave it a little polish and some extra configuration options plus, a new trick where you animate the scroll-snap value which works surprisingly well

jhey ▲🐻🎈 profil fotoğrafı
jhey ▲🐻🎈1 yıl önce

p.p.s the curved scrollbar concept isn't a new one first time seeing it was this great piece from @RoberaGeleta 👏

Anima profil fotoğrafı
Anima1 yıl önce

📢It is live! @figma design to @MUI_hq or @AntDesignUI "Whether your design is well organized or a bit chaotic, using standard components or none, Anima takes it all and translates it into high-quality #MUI or #AntDesign code."-->

dru profil fotoğrafı
dru1 yıl önce

Man, I love the twitter community. Looks awesome!

jhey ▲🐻🎈 profil fotoğrafı
jhey ▲🐻🎈1 yıl önce

inspired me to give it a "glow up" ✨🙏

Aleks profil fotoğrafı
Aleks1 yıl önce

insane 🔥

jhey ▲🐻🎈 profil fotoğrafı
jhey ▲🐻🎈1 yıl önce

whether we can find a practical use case or not for it is another matter 💀

Sab profil fotoğrafı
Sab1 yıl önce

Would you please what is this tool you are using!? (The window which has title: config)

jhey ▲🐻🎈 profil fotoğrafı
jhey ▲🐻🎈1 yıl önce

tweakpane v4.0.4

Shahriar Shafin 𝕏 profil fotoğrafı
Shahriar Shafin 𝕏1 yıl önce

Awesome 🌟. is it open source?

Jett profil fotoğrafı
Jett1 yıl önce

haven’t seen you on my TL for a min. Still the goat 🐐

jhey ▲🐻🎈 profil fotoğrafı
jhey ▲🐻🎈1 yıl önce

trying to stay present – working on things in the background 👀

Benzer Videolar

CSS Scroll-driven knockout text using SVG filter 🥊 section { filter: url(#​knockout); } section h1 { animation: shrink; } @​keyframes shrink { 0% { scale: 36; }} Animate text scale on a video overlay ✅ Knock out text using SVG filter ✅ Drive with scroll ✅
0:46

CSS Scroll-driven knockout text using SVG filter 🥊 section { filter: url(#​knockout); } section h1 { animation: shrink; } @​keyframes shrink { 0% { scale: 36; }} Animate text scale on a video overlay ✅ Knock out text using SVG filter ✅ Drive with scroll ✅

jhey ʕ•ᴥ•ʔ

100,075 görüntüleme • 1 yıl önce

extra little details™ animate a CSS custom property to sync scrollbar-color with the active item ✨ html { scrollbar-color: oklch(65% 0.3 var(--p)) #0000; animation: sync; animation-timeline: --ul; animation-range: entry 50% exit 50% } @​keyframes sync { to { --p: 320; } }
0:33

extra little details™ animate a CSS custom property to sync scrollbar-color with the active item ✨ html { scrollbar-color: oklch(65% 0.3 var(--p)) #0000; animation: sync; animation-timeline: --ul; animation-range: entry 50% exit 50% } @​keyframes sync { to { --p: 320; } }

jhey ʕ•ᴥ•ʔ

61,033 görüntüleme • 1 yıl önce

"can I use it for images?" – Yep! ✅ Could even combine it with CSS scroll-driven animation CSS, am I right? 🔥
0:27

"can I use it for images?" – Yep! ✅ Could even combine it with CSS scroll-driven animation CSS, am I right? 🔥

jhey ʕ•ᴥ•ʔ

258,622 görüntüleme • 2 yıl önce

Scroll velocity CSS text-shadow 📜 1. Animate 2 custom properties on scroll 2. Transition one of the property values 3. Use the diff (velocity) for the text-shadow position 🤙 A CSS take on it.
0:25

Scroll velocity CSS text-shadow 📜 1. Animate 2 custom properties on scroll 2. Transition one of the property values 3. Use the diff (velocity) for the text-shadow position 🤙 A CSS take on it.

jhey ʕ•ᴥ•ʔ

111,954 görüntüleme • 1 yıl önce

Can we please stop with the scroll-jacking carousels on websites? CSS Scroll Snap is a much better solution! Re-built the Uniqlo home page with 6 lines of CSS and 4 lines of JS
2:35

Sensitive content

Can we please stop with the scroll-jacking carousels on websites? CSS Scroll Snap is a much better solution! Re-built the Uniqlo home page with 6 lines of CSS and 4 lines of JS

Wes Bos

305,109 görüntüleme • 1 yıl önce

Liquid Glass with CSS and SVG
0:36

Liquid Glass with CSS and SVG

Andreas Storm

71,079 görüntüleme • 6 ay önce

messin' with text using CSS + SVG 🤌
0:26

messin' with text using CSS + SVG 🤌

jhey ʕ•ᴥ•ʔ

85,634 görüntüleme • 1 yıl önce

messin' with CSS + SVG filter sticker effects 🧑‍🍳
0:36

messin' with CSS + SVG filter sticker effects 🧑‍🍳

jhey ʕ•ᴥ•ʔ

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

CSS position: sticky, scroll-snap + progressively enhanced scroll animation 📜 li { animation: bright; animation-range: calc(50% - 1lh) calc(50% + 1lh); animation-timeline: view(); scroll-snap-align: center; } @​keyframes bright { 50% { opacity: 1; }}
0:25

CSS position: sticky, scroll-snap + progressively enhanced scroll animation 📜 li { animation: bright; animation-range: calc(50% - 1lh) calc(50% + 1lh); animation-timeline: view(); scroll-snap-align: center; } @​keyframes bright { 50% { opacity: 1; }}

jhey ʕ•ᴥ•ʔ

366,000 görüntüleme • 1 yıl önce

electric border effect based on a design by Oleg Kulik ⚡️ pulled it off without shaders, only CSS and some animated SVG filters. the trickiest part was getting feTurbulence to animate smoothly. CodePen link below
0:38

electric border effect based on a design by Oleg Kulik ⚡️ pulled it off without shaders, only CSS and some animated SVG filters. the trickiest part was getting feTurbulence to animate smoothly. CodePen link below

balint

1,577,503 görüntüleme • 9 ay önce

CSS + SVG flames iteration 🔥 "iterate to greatness" 🤞
0:39

CSS + SVG flames iteration 🔥 "iterate to greatness" 🤞

jhey ʕ•ᴥ•ʔ

66,297 görüntüleme • 1 yıl önce

Similar technique 🤙 1. Take a scroll-snap list 2. Apply CSS scroll animations ✨ img { animation: flow; animation-timeline: --cover; } keyframes flow { 0% { transform: translate(-80%, 0) rotateY(-33deg); } } Few lines of CSS make it a progressively enhanced animated list 🔥
0:46

Similar technique 🤙 1. Take a scroll-snap list 2. Apply CSS scroll animations ✨ img { animation: flow; animation-timeline: --cover; } keyframes flow { 0% { transform: translate(-80%, 0) rotateY(-33deg); } } Few lines of CSS make it a progressively enhanced animated list 🔥

jhey ʕ•ᴥ•ʔ

114,209 görüntüleme • 2 yıl önce

you can just create fire with CSS + SVG filters ┬┴┬┴┤ʕ•ᴥ├┬┴┬┴
0:35

you can just create fire with CSS + SVG filters ┬┴┬┴┤ʕ•ᴥ├┬┴┬┴

jhey ʕ•ᴥ•ʔ

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

#CSS only with scroll driven animation rad work Stijn Van Minnebruggen try it
0:23

#CSS only with scroll driven animation rad work Stijn Van Minnebruggen try it

Adam Argyle

12,041 görüntüleme • 1 yıl önce

Pinterest moved to native CSS carousels to replace legacy JS platform-wide → Using CSS primitives like scroll markers and snap, they achieved: 📉 90% code reduction (2k JS → 200 CSS) 🚀 15% faster page loads ✨ Smoother, interactive UI
1:00

Pinterest moved to native CSS carousels to replace legacy JS platform-wide → Using CSS primitives like scroll markers and snap, they achieved: 📉 90% code reduction (2k JS → 200 CSS) 🚀 15% faster page loads ✨ Smoother, interactive UI

Chrome for Developers

219,485 görüntüleme • 2 ay önce

A CSS scroll version of the gooey island 🤙 .island { filter: url(#​svg-goo); } .island__avatar { animation: hide; animation-timeline: scroll(); animation-range: 0 var(--header-size); transform-origin: 50% 0; } @​keyframes hide { to { translate: -50% -80px; scale: 0.3; } }
0:24

A CSS scroll version of the gooey island 🤙 .island { filter: url(#​svg-goo); } .island__avatar { animation: hide; animation-timeline: scroll(); animation-range: 0 var(--header-size); transform-origin: 50% 0; } @​keyframes hide { to { translate: -50% -80px; scale: 0.3; } }

jhey ʕ•ᴥ•ʔ

154,664 görüntüleme • 1 yıl önce

i wasn't aware of `animation-timeline` css property if I be honest. with it you can use css `scroll()` function to tie an animation with the scroll progress of a scrollable element. here im animating a `mask-image`s size based on the scroll progress with `2rem` of threshold.
0:34

i wasn't aware of `animation-timeline` css property if I be honest. with it you can use css `scroll()` function to tie an animation with the scroll progress of a scrollable element. here im animating a `mask-image`s size based on the scroll progress with `2rem` of threshold.

Soren

183,803 görüntüleme • 7 ay önce

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.
0:34

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,155 görüntüleme • 2 ay önce

This CSS Backlight Effect is sooooo damn cool! I've taken it a step further with SVG Filters Makes it work with any element - including video!
3:17

This CSS Backlight Effect is sooooo damn cool! I've taken it a step further with SVG Filters Makes it work with any element - including video!

Wes Bos

231,838 görüntüleme • 1 yıl önce

riffin' on forms is fun 3D CSS transforms + SVG filtering with feDisplacementMap 🤙
0:32

riffin' on forms is fun 3D CSS transforms + SVG filtering with feDisplacementMap 🤙

jhey ʕ•ᴥ•ʔ

27,241 görüntüleme • 1 yıl önce