Web-Slinger.css: Across the Swiper-Verse

My previous post highlighted the irreversible consequences of horizontal swiping on Tinder. I'll delve into that frustration another time, but at first glance, swipe navigation seems perfect for Web-Slinger.css – my experimental, pure CSS alternative to Wow.js for one-way scroll-triggered animations. (Still working on the theme song!)

Can Web-Slinger.css handle a Tinder-style swipe interaction for liking/disliking elements using only CSS? And more importantly, will this justify using a Spider-Pig image, as per popular demand? Introducing the Spider-Pig swiper – my proposed captcha replacement (because who doesn't love Spider-Pig?). Swipe left or right below (Chrome/Edge only, for now) to register your opinion.

Expanding the Horizons

Web-Slinger.css, apparently, wasn't designed for horizontal scrolling. The fix? A simple CSS override:

[class^="scroll-trigger-"] {
  view-timeline-axis: x;
}

This alters Web-Slinger's default behavior for elements with scroll-trigger-n classes, making scroll triggers react to horizontal, not vertical, scrolling. Otherwise, triggers would activate immediately, despite being visually hidden due to container width, as they'd be above the vertical fold in our swiper.

My initial steps involved forking Nikolay Talanov's excellent JavaScript Tinder swipe demo, removing the JavaScript and all but one card, then importing Web-Slinger.css and applying the horizontal patch. The card container became position: fixed, with three side-by-side, viewport-sized, scroll-snapping boxes. The middle slide used scroll-align: center, starting the user in the center and allowing backward/forward scrolling.

Note: With unconventional scroll-driven animations, the scrollable element doesn't need to scroll anything visible. It's like checkbox hacks – hide the checkbox, style the label. We leverage the scrollable element's CSS behaviors, not its default UI.

A scroll-trigger-1 div on the third slide activated a rejection animation:

<div>
  </div>
<main>
  <div></div>
  <div></div>
  <div><div></div></div>
</main>

It worked! (Narrator: It didn't, really. More on that later.)

<div>
  <div></div>
</div>
<main>
  <div><div></div></div>
  <div></div>
  <div><div></div></div>
</main>

Adding this resulted in Spider-Pig being automatically "liked" on page load. Perfect for someone universally adored... (ahem, a middle-aged CSS hacker). But Spider-Pig isn't universally loved, so let's examine why the right-swipe behaved differently than expected, despite seemingly identical principles.

Stepping Back

This bug highlighted view-timeline's limitations. Web-Slinger relies on technology not ideally suited for animations triggered only by backward scrolling.

A visualizer shows that regardless of animation-range, the animation completes after the element leaves the viewport in the scrolling direction – the opposite of our needs.

Fortunately, Bramus (Chrome Dev Team) has a demo for detecting scroll direction in CSS. Using his clever --scroll-direction custom property, we can control the scroll-trigger-2 element's appearance with a style query:

[class^="scroll-trigger-"] {
  view-timeline-axis: x;
}

This ensures .scroll-trigger-2 only appears when on the previous slide, reached via backward scrolling. --slide-index (controlled by a three-second, three-step animation) counts the current slide, requiring a decisive swipe to trigger the dislike.

The Final Swipe

To track Spider-Pig opinions, I used a third-party counter image as a background:

<div>
  </div>
<main>
  <div></div>
  <div></div>
  <div><div></div></div>
</main>

Lessons Learned

This was more complex than anticipated, mainly due to the challenges of using scroll-triggered animations that only run on backward scrolling. This is valuable knowledge. The power hidden in the current spec is amazing; we can style based on very specific scrolling behaviors. However, we had to hack the API to access this power. An ideal solution would be:

<div>
  <div></div>
</div>
<main>
  <div><div></div></div>
  <div></div>
  <div><div></div></div>
</main>

With such an API, the Spider-Pig swiper wouldn't require hacks.

I hope for broader browser support for scroll-driven animations and a more flexible spec to encourage designers to build nonlinear storytelling into their experiences. If not, once animation timelines are more widely supported, it might be time to make Web-Slinger.css more robust and production-ready.

The above is the detailed content of Web-Slinger.css: Across the Swiper-Verse. For more information, please follow other related articles on the PHP Chinese website!