Adam ArgyleNov 21, 2023

A ✨first look✨ at `snapChanged` in Chrome Canary

```js
document.addEventListener('snapchanged', e => {
console.log('changed', e.snapTargets)
})
```

get notified when a snap scroller has changed the snap item, and access the node with `event.snapTargets` 🤓

Snap 2 CSS spec draft https://drafts.csswg.org/css-scroll-snap-2/#snap-events

CSS Scroll Snap Module Level 2

Show threadAlex RussellNov 21, 2023
@argyleink Any word on the ability to configure snap curves/stop-points/strength/springback? Or the ability to use mouse for drag in scroll snap regions?
Show threadAdam ArgyleNov 21, 2023

@slightlyoff Flacker has ideas for snap inertia's but not for mouse drag. i personally find mouse flinging coarse and clumsy, but it is a common feature of sliders or carousels, so could/should eventually make it's way in. maybe that'd be a good touch-action value?

also, hi Alex, hope you're well 🙂

Show threadAlex RussellNov 21, 2023

@argyleink Yeah, it's bewildering that we don't have a touch-action value for it yet; forced folks to do a lot of extra work.

On snap spring/values, why isn't any of this hooked up to animation worklets yet? Every year I lose more hope.

Show threadflackr
@slightlyoff @argyleink As for spring and other timing functions, running a custom function in a worklet context is a lot of overhead. If the animation strictly time-based it's easier to spec and implement, and runs faster and more efficiently to define it declaratively via better timing functions, e.g. thinking along the lines of https://github.com/w3c/csswg-drafts/issues/229
[css-easing-2] Complex easing/timing functions · Issue #229 · w3c/csswg-drafts

In light of the Webkit team's implementation of spring(), it's apparent we need to attend to the issue of complex timing functions sooner rather than later. The problem Designers often need more ad...

GitHub
Nov 21, 2023 at 10:59pmWeb
Show threadAlex RussellNov 21, 2023

@flackr @argyleink I'd be happy for those timing functions too, but we seem stuck in this worst-of-all-worlds situation where the inability to script scroll effects that interact with snap and springs creates a field of rakes that we keep stepping on, one animation at a time.

For like 3 years now I've been trying to rebuild the android home screen swipe-up animations and the Pocket Casts swipe-left/right systems. I recommend trying it yourself.

Show threadflackrNov 21, 2023

@slightlyoff @argyleink The homescreen and pocket casts swipes look like they could be implemented as scroll snap + a scroll driven animation. What's missing?

I was planning to prototype a demo of the homescreen to explore some drag and drop / context menu stuff as well so would be happy to include the swipe up effect.

Some examples of snap + SDA:
https://gui-challenges.web.app/carousel/dist/
https://web.dev/articles/building/a-tabs-component
https://flackr.github.io/web-demos/css-scroll-snap/map/ (apologies for the quality, just a proof of concept)

Carousel | GUI Challenges

🤓

Show threadAlex RussellNov 22, 2023
@flackr @argyleink I don't know how to do the pocket cast swipes with the stops. Like, scroll left ~25%; note the stops, then note the somewhat satisfying spring if you swipe a *little* left then release. Note also the button change as you swipe more than 50% left.
Show threadAdam ArgyleNov 22, 2023

@slightlyoff can you send me a video of the ux you're describing?

Also, tomorrow I'll send a swath of relevant demos that can provide leads. I'm also very interested in having the web be as tangible as the gestures mobile has taught us

Show threadJeroen ZwartepoorteNov 22, 2023
@argyleink @slightlyoff gestures is also something I’ve been researching off and on for a while. So far it looks like you have to do all the work yourself for replicating the native behavior in your PWA?
Show threadAlex RussellNov 23, 2023
@argyleink Here's a video of this (app.vysor.io ftw):
Show threadAlex RussellNov 23, 2023
@argyleink to get the sliding door effect, you need to position the icons on elements that get moved based on scroll position, but note that their expanded (snapped open) state also creates a scroll snap stop point. Dragging further then hides one of them, and continuing from that position triggers a snap-back close animation or a removal animation (if you do the "archive" swipe left).
Show threadAdam ArgyleNov 23, 2023

@slightlyoff Yes! I have a scroll snap demo that's like this and it inspired CSS scroll-start. Each list item is a scroller with 3 snap points.. but needs scroll to start in the middle (scroll-start can do this). As user scrolls either way, scroll driven animations reveal buttons.

Also, this is another place we need overscroll effects (in chrome at least #interop) on nested scrollers, so they bounce (or whatever is platform specific) at the edges.

Show threadAdam ArgyleNov 23, 2023

@slightlyoff Here's the demo, which was before scroll driven animations were available, that I was mentioning https://codepen.io/argyleink/pen/xxOEWYj

It's a pretty weak attempt compared to the potential of the spec combinations

Here's a collection of snap crap I've made https://codepen.io/collection/KpqBGW, which covers a decent breadth of capability

snap-swipe

...

Show threadAdam ArgyleNov 23, 2023

@slightlyoff This one is modern, didn't solve for all the accessible aspects, but uses scroll driven animation and snap for natural ux

https://codepen.io/argyleink/pen/vYQQEmo

Hue Cards (subgrid, oklch, view-timeline, @property)

...