Video wird geladen...

Video konnte nicht geladen werden

Zur Startseite

curved scrollbar 👨‍🍳 powered by GSAP + CSS scroll-snap + SVG

jh3yy's profile picture

jhey ʕ•ᴥ•ʔ

146,350 subscribers

97,915 Aufrufe • vor 1 Jahr •via X (Twitter)

Wissenschaft & TechnologieBildung
LIVE

Anya Rossi• Live Now

Private livecam show

11 Kommentare

Profilbild von Josh Miller
Josh Millervor 1 Jahr

Anyway to do this with the current web APIs and no GSAP?

Profilbild von jhey ▲🐻🎈
jhey ▲🐻🎈vor 1 Jahr

yes – the demo is a Chromium first scroll-driven animations piece with GSAP as a fallback but you can do it this way: - on scroll trigger a requestAnimationFrame loop - update values within the loop, mapped to scroll - if loop captures the same scroll for say 10 frames, cancel

Profilbild von Safari Web Extensions
Safari Web Extensionsvor 1 Jahr

Discover the top Safari web extensions to boost productivity, enhance workflow, and customize your browsing experience on Mac, iOS, and iPadOS.

Profilbild von 𝐙𝐨𝐡𝐚𝐢𝐛 𝐀.
𝐙𝐨𝐡𝐚𝐢𝐛 𝐀.vor 1 Jahr

Legendary implementation as always! Curious: how do we solve for the manual scrollbar interaction for desktop with mouse? Specially when mouse enables all ugly scrollbars by default.

Profilbild von Indra
Indravor 1 Jahr

so good!

Profilbild von Soumyadip Dutta
Soumyadip Duttavor 1 Jahr

Source code:

Profilbild von shrijan
shrijanvor 1 Jahr

dang, this is fire! 🔥

Profilbild von Dennis H. A. van Leeuwen 🕹
Dennis H. A. van Leeuwen 🕹vor 1 Jahr

That mint, shiny and I want that!

Profilbild von Igor bedesqui
Igor bedesquivor 1 Jahr

love this so much

Profilbild von Today's bread
Today's breadvor 1 Jahr

Wow

Profilbild von carendel
carendelvor 1 Jahr

Nice one

Ähnliche Videos

Scroll-powered text transitions + scroll-reactive infinite marquee. #gsap
0:28

Scroll-powered text transitions + scroll-reactive infinite marquee. #gsap

Codegrid

16,419 Aufrufe • vor 7 Monaten

I used my holiday break to develop my new portfolio; depending on your browser it's 95% powered by the newest css techniques like scroll driven animations and view transitions! 💪 If you see the 🦖, it's (at least partly) powered by GSAP backup animations 😅
0:58

I used my holiday break to develop my new portfolio; depending on your browser it's 95% powered by the newest css techniques like scroll driven animations and view transitions! 💪 If you see the 🦖, it's (at least partly) powered by GSAP backup animations 😅

Cyd Stumpel

10,167 Aufrufe • vor 1 Jahr

built some 3D css books in the past with scroll interaction and demo links might make a css cookbook 👨‍🍳
1:14

built some 3D css books in the past with scroll interaction and demo links might make a css cookbook 👨‍🍳

jhey ʕ•ᴥ•ʔ

59,139 Aufrufe • vor 7 Monaten

you can do this one with css grid, position: sticky, and some scroll animation 👨‍🍳
0:32

you can do this one with css grid, position: sticky, and some scroll animation 👨‍🍳

jhey ʕ•ᴥ•ʔ

207,007 Aufrufe • vor 6 Monaten

when the tool is missing, make it 👨‍🍳 motion path visualizer w/ SVG for accumulated cubic-bezier timed CSS animations ⚡
0:24

when the tool is missing, make it 👨‍🍳 motion path visualizer w/ SVG for accumulated cubic-bezier timed CSS animations ⚡

jhey ʕ•ᴥ•ʔ

213,126 Aufrufe • vor 7 Monaten

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

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

iOS alarm barrel input w/ 3D CSS ⏰ drag gestures + scroll animation mapped to an <input type=time> 👨‍🍳
0:27

iOS alarm barrel input w/ 3D CSS ⏰ drag gestures + scroll animation mapped to an <input type=time> 👨‍🍳

jhey ʕ•ᴥ•ʔ

109,997 Aufrufe • vor 8 Monaten

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

CSS Scroll-Snapping + GSAP ScrollTrigger 🙀 What a lovely combo! I didn't know anything about #css scroll-snapping until studying a recent demo from Julio Rodriguez (linked below). I wanted to build my own simplified version from scratch to understand it better. Notice how the animated list of headers always snap perfectly to "hello" when scrolling stops. Be sure to check out his Craft of UI newsletter if you want to ramp up your CSS! demos and links below 👇
0:29

CSS Scroll-Snapping + GSAP ScrollTrigger 🙀 What a lovely combo! I didn't know anything about #css scroll-snapping until studying a recent demo from Julio Rodriguez (linked below). I wanted to build my own simplified version from scratch to understand it better. Notice how the animated list of headers always snap perfectly to "hello" when scrolling stops. Be sure to check out his Craft of UI newsletter if you want to ramp up your CSS! demos and links below 👇

Carl 💥 Creative Coding Club

29,409 Aufrufe • vor 1 Jahr

Liquid Glass with CSS and SVG
0:36

Liquid Glass with CSS and SVG

Andreas Storm

71,132 Aufrufe • vor 7 Monaten

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

messin' with text using CSS + SVG 🤌

jhey ʕ•ᴥ•ʔ

85,634 Aufrufe • vor 1 Jahr

What if the scrollbar went around the corner? 👀 CSS could do that ✨
0:23

What if the scrollbar went around the corner? 👀 CSS could do that ✨

jhey ʕ•ᴥ•ʔ

846,918 Aufrufe • vor 2 Jahren

New website is live! 🛫 Made With Gsap Made With Gsap — Enhance your animation skills with a collection of 50 unique JavaScript effects. Designed by Florent Roux-Durraffourt and powered by GSAP & darkroom.engineering Lenis 💚 ↳
0:21

New website is live! 🛫 Made With Gsap Made With Gsap — Enhance your animation skills with a collection of 50 unique JavaScript effects. Designed by Florent Roux-Durraffourt and powered by GSAP & darkroom.engineering Lenis 💚 ↳

Michaël Garcia

17,751 Aufrufe • vor 1 Jahr

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

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

jhey ʕ•ᴥ•ʔ

160,723 Aufrufe • vor 1 Jahr

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

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

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

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

jhey ʕ•ᴥ•ʔ

66,297 Aufrufe • vor 1 Jahr

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

negative position: sticky + line height units + background-attachment 👨‍🍳 you can achieve a lot with a good grasp of CSS fundamentals bonus: progressively enhance with scroll-driven animation ✨
0:38

negative position: sticky + line height units + background-attachment 👨‍🍳 you can achieve a lot with a good grasp of CSS fundamentals bonus: progressively enhance with scroll-driven animation ✨

jhey ʕ•ᴥ•ʔ

134,905 Aufrufe • vor 1 Jahr