RSS FeedTwitterMastodonBlueskyShare IconHeart IconGithub IconArrow IconClock IconGUI Challenges IconHome IconNote IconBlog IconCSS IconJS IconHTML IconShows IconOpen Source Software IconSpeaking IconTools IconShuffle IconNext IconPrevious IconCalendar IconCalendar Edit IconNotebook IconObservable Notebooks IconSlash IconGoogle G Icon
A cartoon skull with a hotpink hat on.
atom@argyleink
notecss

Scroll Snap + Scroll Driven Animation carousel

💡 in the mobile size it looks a lot like the iOS app switcher eh?

try it!?

11 mentions #

105likes
11reposts
  • Kai Klostermann
  • Alex Russell
  • Morten
  • Ian Sudderth
  • Toby Evans
  • Richard
  • ????️ Jim Schofield ????
  • Andy Bell
  • Samuel ????
  • Iarlenzito ツ

Join the conversation on

@argyleink

Ironically, doesn’t work on iOS. :-)

Now, for extra credit… how can you detect a click on one of the edges of the cards in the back of the stack and have it scroll-snap to that card in the foreground position?

Morgan DavisMorgan Davis
✅ keyboard ✅ touch ✅ responsive ✅ animation as enhancement ????️ only #HTML #CSS try codepen.io/argyleink/fu... ⤷ nerdy.dev/container-qu...
Adam ArgyleAdam Argyle
Nice work!
Loving the demos you’re crunching out atm man
Andy BellAndy Bell
Pure wizardry! I was pretty stoked about SDAs thanks to you and Una, but these demos really help visualize the possibilities.
Mikaël SévignyMikaël Sévigny
doesn't seem carousel-ey in safari?
alice (@__justplaying)alice (@__justplaying)
❌ works in other browsers only chrome supported from the looks of it :(
TanzaTanza
Indeed, they are actively working on CSS scroll driven animations. Chrome was first
Adam ArgyleAdam Argyle
For now yep, but eventually, it'll work. No big deal the 3d animations only work if the browser supports it.
Adam ArgyleAdam Argyle
Show your Safari support here! bugs.webkit.org/show_bug.cgi... nerdy.dev/container-qu...
Adam ArgyleAdam Argyle
Love seeing activity here! nerdy.dev/container-qu...
Adam ArgyleAdam Argyle