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 Argyle

@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 🙂

Nov 21, 2023 at 10:08pmWeb
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 threadAdam ArgyleNov 21, 2023

@slightlyoff afaik, animation worklets are on ice, and waapi is seeking to resume parts where it left off

def pour one out for Houdini… may they rise again one day

Show threadAlex RussellNov 21, 2023

@argyleink This seems like a mistake? We're unable to meanginfully do scroll-based animations with trigger points, and the scroll timeline stuff isn't hooked up to script in a compelling way from *any* API...and WAAPI won't provide an off-thread way to handle any of that.

Is this a cluster, or am I missing something?

Show threadflackrNov 21, 2023
@slightlyoff @argyleink The current thinking on scroll triggered animations is that they'll be started at some trigger point on a timeline, see https://github.com/w3c/csswg-drafts/issues/8942 for a strawman proposal / polyfill. If you make a scroll driven animation with a scroll driven trigger I think this will do what you want declaratively.
[css-animations-2] Add animation-trigger for triggering animations when an element is in a timeline's range · Issue #8942 · w3c/csswg-drafts

Entry animations are pretty common on the web. Currently in order to trigger time-based animations when an element enters the viewport we have to use IntersectionObserver. The problems with this: r...

GitHub
Show threadflackrNov 21, 2023

Blink has PaintWorklets which allow painting customization off-thread in a principled way since 2018. We've yet to see implementation by other engines https://caniuse.com/?search=PaintWorklet or significant use by developers: https://chromestatus.com/metrics/feature/timeline/popularity/2385

Animation worklets are even less clear how we would make them ergonomic, useful, fast. We're thinking through some of the ways we could get there but these are independently useful features - like SDA - which we have seen interest from gecko and webkit on.

"PaintWorklet" | Can I use... Support tables for HTML5, CSS3, etc

Show threadflackrNov 21, 2023

@slightlyoff @argyleink

This is my current thinking on what the best way to handle the mouse panning use case is - https://github.com/w3c/pointerevents/issues/203#issuecomment-819693123

Enable direct pen and touch to have different touch-action behavior · Issue #203 · w3c/pointerevents

Today a stylus in Chrome Android behaves as a direct manipulation input device (with the implications on touch-action discussed in #202). This works well in practice except for one special case: In...

GitHub
Show threadflackrNov 21, 2023
@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
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)

...