14:07:25 <RRSAgent> RRSAgent has joined #pagetransitions
14:07:25 <RRSAgent> logging to https://www.w3.org/2022/09/14-pagetransitions-irc
14:07:27 <Zakim> Zakim has joined #pagetransitions
14:12:16 <dom> Meeting: Page transitions in the browser (Shared Element Transitions)  - TPAC 2022 breakout
14:12:18 <dom> Chair: Jake_Archibald
14:12:20 <dom> Agenda:  https://www.w3.org/events/meetings/68a3ec0e-715b-4415-ac23-0d41fa569ea8#agenda
14:12:22 <dom> RRSAgent, make log public
14:12:24 <dom> RRSAgent, this meeting spans midnight
14:18:00 <dom> RRSAgent, stay
14:18:02 <dom> Zakim, stay
14:18:02 <Zakim> I don't understand 'stay', dom
15:14:58 <dom> dom has joined #pagetransitions
16:12:51 <dom> agenda+ breakout
17:59:37 <dholbert> dholbert has joined #pagetransitions
18:15:49 <dom> dom has joined #pagetransitions
20:15:05 <dom> dom has joined #pagetransitions
20:30:10 <dom> dom has joined #pagetransitions
21:01:01 <JakeA> JakeA has joined #pagetransitions
21:07:02 <dom__> dom__ has joined #pagetransitions
21:52:59 <dom> dom has joined #pagetransitions
21:57:51 <wendyreid> wendyreid has joined #pagetransitions
21:57:56 <wendyreid> present+
21:58:59 <astearns> astearns has joined #pagetransitions
22:00:18 <khush_> khush_ has joined #pagetransitions
22:00:26 <fantasai> fantasai has joined #pagetransitions
22:00:35 <fantasai> ScribeNick: fantasai
22:00:48 <fantasai> Agenda: https://www.w3.org/2022/09/TPAC/breakouts.html#pagetransitions
22:00:50 <sflaming> sflaming has joined #pagetransitions
22:01:00 <fantasai> Topic: Page Transitions
22:01:33 <fantasai> -> https://drafts.csswg.org/css-shared-element-transitions-1/
22:01:55 <ydaniv_> ydaniv_ has joined #pagetransitions
22:02:12 <khush__> khush__ has joined #pagetransitions
22:02:19 <smaug> smaug has joined #pagetransitions
22:03:13 <fantasai> s/Page Transitions/Shared Element Transitions/
22:03:24 <fantasai> JakeA: I have slides and words, but if anyone wants to ask a question at any point, please do
22:03:59 <dholbert> present+
22:04:13 <khush__> present+
22:04:34 <emilio> emilio has joined #pagetransitions
22:05:09 <fantasai> [dicussion of sending slides to www-archive]
22:05:20 <fantasai> JakeA: Trying to convince Chrome to implement for years, and now we are, so I'm really excited!
22:05:28 <fantasai> ... Here's some demos
22:05:37 <fantasai> ... This kind of thing isn't just fancy visual, it helps the navigation
22:05:47 <fantasai> ... gives a sense of whether going backwards or forward, whether something is adjacent or something
22:05:53 <fantasai> ... gives a sense of motion
22:06:54 <fantasai> ... whereas on the Web, navigation is just a click and a change
22:06:59 <fantasai> ... maybe with an exciting flash of white
22:07:08 <fantasai> ... but for a long time couldn't have nice things on the Web
22:07:22 <fantasai> JakeA: One reason why page transition is hard, because involves old thing and new thing both on the screen at the same time
22:07:26 <fantasai> ... no opportunity for them to work together
22:07:33 <fantasai> ... but that's only true for tranditional web application
22:07:47 <fantasai> JakeA: Single-page apps can have both states on at the same time
22:07:53 <fantasai> ... but even there we don't see very many cool transitions
22:07:57 <fantasai> ... because it's very difficult
22:08:08 <fantasai> ... Consider a cross-fade: there's a time where both states are in the apge at the same time
22:08:11 <fantasai> ... hard to do with frameworks
22:08:38 <fantasai> ... if doing manually, lots of accessibility pitfalls, scroll position sync problems, if contains an iframe how to handle duplicate DOM elements...
22:08:44 <fantasai> ... It's not impossible, but really difficult
22:09:00 <fantasai> JakeA: Another case, I want this box to go from one container to another, difficult because of overflow:hidden
22:09:12 <fantasai> ... end up having to take element into child of root, and have to change how you write your styles
22:09:16 <fantasai> ... really not easy
22:09:25 <fantasai> JakeA: Meanwhile Android/iOS there are dedicated APIs
22:09:31 <fantasai> ... We think that's not fair, want to do this stuff, too.
22:09:43 <fantasai> JakeA: We're not even the first to try
22:09:51 <fantasai> ... there was a proposal from 2015 from Chrome, another from Mozilla
22:09:59 <fantasai> ... TabAtkins in 2018
22:10:07 <fantasai> ... Tried using <portal>
22:10:13 <fantasai> ... And here we are in 2022!
22:10:47 <fantasai> ... Most exciting bit of history is Internet Exporer in 199?, where you could have page transitions (see http-equiv codes)
22:10:52 <fantasai> ... We wanted to do better than that
22:11:01 <fantasai> JakeA: Consider this basic site, I'll show you what new API can do
22:11:15 <fantasai> ... this is a single page web app, that's what Canary supports right now, but should expand to multipage
22:11:26 <lgombos____> lgombos____ has joined #pagetransitions
22:11:41 <fantasai> ... people are more excited about cross-document navigation, but will work on that next
22:11:48 <fantasai> JakeA: This is an example of how navigation is handled in SPA world
22:11:54 <fantasai> ...you catch some data, use that data to update the state
22:11:59 <fantasai> ... With new API we'll add a transition to that
22:12:12 <fantasai> ... document.createTransition to create the transition if not there yet
22:12:16 <fantasai> ... and then apply the DOM change
22:12:22 <fantasai> ... and it gives us a nice cross-fade between the pages
22:12:26 <fantasai> ... Not super interesting but it is the default
22:12:31 <fantasai> ... We let devs customize this
22:12:44 <fantasai> JakeA: When we call page transition, browser takes a screenshot
22:12:53 <fantasai> ... so we can change DOM underneath without calling flash of unstyled content
22:12:59 <fantasai> ... and then creates image of incomig tree
22:13:04 <fantasai> ... and it creates a tree of elements
22:13:10 <fantasai> <transition-container>
22:13:12 <fantasai>   <iage-wrapper>
22:13:16 <fantasai>      <outgoing-image/>
22:13:20 <fantasai>      <incoming-image/>
22:13:23 <fantasai>   </>
22:13:24 <fantasai> </>
22:13:27 <fantasai> s/iage/image/
22:13:41 <fantasai> JakeA: This pseudo-element structure is sitting over the top of everything
22:13:55 <fantasai> ... outgoing image fades from opacity 1 to 0, incoming the opposite, and that gives you the cross-fade
22:14:01 <fantasai> ... and when this is done, reveals new DOM underneath
22:14:09 <fantasai> ... THis is built of platform primitives so you can play around with them
22:14:16 <fantasai> ... came up with some pseudo-elements to represent these
22:14:19 <fantasai> ... can bikeshed later
22:14:33 <fantasai> JakeA: We could do things like, what if instead of cross-fade we want something different
22:14:37 <fantasai> ... this is all built on top of animations
22:14:45 <fantasai> ... change animation-duration to 5s and now it's slower!
22:14:54 <fantasai> ... gives us the opportunity also to change the animation completely
22:15:02 <fantasai> ... Here's one that slides to the left, and another slides from the right
22:15:06 <fantasai> ... keyframes for each
22:15:15 <fantasai> ... and now for the outgoing image we apply slide-to-left
22:15:21 <fantasai> ... and incoming image slide-to-right
22:15:30 <fantasai> ... and now you see something more like a smoother thing from a native app
22:15:38 <fantasai> ... (promise much smoother on my comp than on Zoom)
22:15:50 <fantasai> JakeA: This is somewhat not ideal if going back,
22:15:57 <fantasai> ... might want differnet keyframes depending on direction
22:16:09 <fantasai> ... The other thing that's odd is the head sliding in and out, it's a consistent part of both these states
22:16:19 <fantasai> s/... The other/JakeA: The/
22:16:22 <fantasai> ... we can handle that
22:16:29 <fantasai> ... have page-transition-tag: site-header;
22:16:32 <fantasai> ... containe: layout
22:16:42 <fantasai> ... This changes how the page is captured. Now we're capturing in two parts
22:16:46 <fantasai> ... header part and the rest
22:17:02 <fantasai> JakeA: So now just like we had this structure for root of page, we have one for this specific part
22:17:06 <fantasai> ... can give it specific calls
22:17:11 <fantasai> ... and can animate them independently
22:17:19 <fantasai> ... but the default, without adding anything addition
22:17:27 <fantasai> ... slide and cross-fade
22:17:33 <fantasai> astearns: what happens if not appropriate contain?
22:17:39 <fantasai> JakeA: Right now, we won't perform the transition
22:17:45 <fantasai> ... we'll still call the callback for you to make the DOM change
22:17:51 <fantasai> ... Designed the API so that the transition is purely an enhancement
22:17:58 <fantasai> ... so if hit case where can't do a transition, still do the DOM change
22:18:06 <fantasai> ... Also the same if you tag two elements with the same page transition case
22:18:11 <fantasai> ... because supposed to be unique
22:18:48 <fantasai> fantasai: If I tag a piece, does it get screenshotted into the main page and therefore get drawn twice?
22:18:55 <fantasai> JakeA: It's pulled out into a separate layer, not there in the root
22:19:05 <fantasai> ... so the thing we animated before, it no longer contains the header
22:19:34 <Aoyuan> Aoyuan has joined #pagetransitions
22:19:44 <fantasai> fantasai: If tag two elements, does it fail as if not tagged, or fail the whole transition?
22:19:52 <fantasai> JakeA: fail the whole transition, only get the DOM change
22:19:55 <dholbert> q+
22:20:03 <fantasai> khush__: This was one open question we discussed, 2 parts for script API contract, one that animation will happen
22:20:11 <fantasai> ... and then callback to browser that you want to update DOM
22:20:18 <fantasai> ... until your callback running, we don't update the page so can see the old DOM
22:20:26 <fantasai> ... whether makes sense to do the same rendering/freezing part
22:20:36 <fantasai> ... we don't do the generation of the pseudo-elements
22:20:57 <astearns> I think it might be better to find a way to allow ident duplication somehow.
22:21:17 <fantasai> fantasai: I'm wondering if you want to allow duplicate names, and just index them to disambiguate
22:21:31 <fantasai> ... e.g. might have a bunch of elements all the same type, and want them to transition
22:21:35 <fantasai> JakeA: Thought about that, but
22:21:42 <fantasai> ... suppose you had chat messages and transitioning
22:21:56 <fantasai> ... in that case you want to anchor to the last message
22:22:03 <fantasai> ... then need to match them in reverse order
22:22:08 <fantasai> ... so that's tricky
22:22:15 <fantasai> ... maybe could just index in reverse
22:22:20 <astearns> ack dholbert
22:22:24 <fantasai> dholbert: Question about paint ordering
22:22:34 <fantasai> ... your two simple examples, one with cross-fade and one with a slide animation
22:22:43 <fantasai> ... it sounded from description that the actual painted content isunderneath those layers
22:22:49 <fantasai> ... what would happen if you got the slide animation too long
22:23:00 <fantasai> ... if delayed the slide in, would you see a bit of the new DOM underneath?
22:23:04 <fremy> fremy has joined #pagetransitions
22:23:12 <fremy> q+
22:23:15 <fantasai> ... similar for cross-fade, at 50% would you see partially-transparent underneath?
22:23:27 <fantasai> JakeA: We solved cross-fade case by new blend mode
22:23:32 <fantasai> ... that handles the 50% case
22:23:37 <fantasai> ... for other case, we don't draw the DOM underneath
22:23:45 <fantasai> khush__: If tagged as shared element, it is not painted in the actual DOM
22:23:55 <fantasai> ... idea that this content is being displayed through pseudo-snapshot instead
22:24:04 <fantasai> ... during the transition, it effectively has 'visibility:hidden'.
22:24:10 <fantasai> ... it won't hit-test, or paint in actual DOM
22:24:14 <fantasai> JakeA: This is transition we've got so far
22:24:20 <fantasai> ... header which cross-fades, and root which slides
22:24:26 <dholbert> q-
22:24:33 <fantasai> ... One thing that makes it even better, I can give a page transition to the bit of text in the header
22:24:38 <fantasai> ... Split it out further
22:24:45 <fantasai> ... by adding a page-transition-tag to site-title
22:24:57 <fantasai> ... Result is that the page moves to the side to make space fo rthe back button
22:25:15 <fantasai> ... So take from the old postioin to new position
22:25:36 <fantasai> ... see the text slide across since in different position from before state to after state
22:25:52 <fantasai> fremy: Would love to see this in slow motion
22:26:05 <fantasai> s/fremy/Simon/
22:26:11 <fantasai> s/Simon/smfr/
22:26:15 <fantasai> ... so we can see what's moving where
22:26:49 <fantasai> [demo]
22:28:13 <fantasai> JakeA: In that case we've got three shared elements: title, header, and root
22:28:30 <fantasai> ... example of moving from one container to another, that isn't a problem because everything is a sibling of root
22:28:35 <fantasai> s/of/inside/
22:28:46 <fantasai> JakeA: Looking good, now let's look at desktop
22:28:54 <fantasai> ... it's more nauseating, but devs can solve this with media queries
22:28:58 <fantasai> ... and use a different set of keyframes
22:29:07 <fantasai> ... In this case we have slide to the side animation in mobile
22:29:17 <fantasai> ... whereas on desktop, does a much smaller fade-in using MQ
22:29:32 <fantasai> JakeA: Here I'm skipping transition altogether if browser doesn't support API
22:29:37 <fantasai> ... can also skip if prefers-reduced-motion
22:29:55 <fantasai> ... or alternatively use a simpler animation if prefers-reduced motion
22:30:09 <fantasai> JakeA: New example, going ot take that large video, and make it its own thing
22:30:16 <fantasai> ... This only exists on this page
22:30:26 <fantasai> ... doesn't exist on thumbnail page
22:30:39 <fantasai> ... Let's say this is JS for when thumbnail is clicked
22:30:52 <fantasai> ... I'll assign this a page-transition tag just for that SPA navigatio
22:31:00 <fantasai> ... when video is clicked, the thumbnail expanded into the video
22:31:10 <fantasai> ... so didn't matter that these are different elements in the DOM
22:31:17 <fantasai> ... using page-transition-tag, told the API to treat them as being the same thing
22:31:25 <fantasai> ... transition the position and size from before to after
22:31:30 <fantasai> fremy: Good moment for my question
22:31:37 <fantasai> ... which is exactly related to videos and more interactive content
22:31:47 <fantasai> ... if I understand correctly, both initial and final state are static images?
22:31:58 <fantasai> JakeA: outgoing stage is just a static screenshot
22:32:01 <fantasai> ... but incoming is live
22:32:07 <fantasai> fremy: great, because was going to ask about that
22:32:17 <fantasai> ... it would only work for videos if they kept working as they transition
22:32:26 <fantasai> JakeA: For that kind of transition, in your CSS you would hide the outgoing image
22:32:31 <fantasai> ... and show the incoming one straightaway
22:32:44 <fantasai> smaug: what if incoming image, its contents are cross-origin iframe
22:32:49 <fantasai> ... how do you know you have something to paint?
22:33:05 <fantasai> ... [missed details]
22:33:13 <fantasai> JakeA: when you call createTransition, that can be async
22:33:19 <fantasai> ... you can choose to hold back until things load
22:33:26 <fantasai> smaug: so iframe would still run animationFrame callbacks
22:33:28 <fantasai> JakeA: yes
22:33:38 <fantasai> smaug: because currently [missed]
22:34:00 <fantasai> khush__: Question is that when doing transition,embedding an iframe, during term when RAF callbacks are suppressed [missed again]
22:34:10 <fantasai> smaug: ...
22:34:29 <fantasai> khush__: Maybe this needs to be specced more clearly. we say rendering is suppressed for page that is transitioning, maybe say RAF is also suppressed
22:34:36 <fremy_> fremy_ has joined #pagetransitions
22:34:39 <fremy_> ack fremy
22:34:41 <fantasai> JakeA: In the rendering steps of the event loop, when rendering is frozen, what does that exactly mean
22:34:57 <fantasai> ... rendering steps, do we just block "update view" or something else
22:35:05 <fantasai> ... my preference would be just that last line
22:35:29 <fantasai> smfr: When you run, under author or UA control?
22:35:34 <fantasai> JakeA: author calls createTransition
22:35:41 <fantasai> ... we then go and capture the state of the current page
22:35:44 <fantasai> ... that's UA control
22:35:56 <fantasai> ... we then call the updateDOM callback, which returns promise
22:36:01 <fantasai> ... that's under developer's control
22:36:15 <fantasai> smfr: In your examples, the target page is always well-controled and static
22:36:23 <fantasai> ... but pages are dynamic, they load asynchronously, they run script, etc.
22:36:35 <fantasai> ... when you're animating pieces into final positions, how do you know that the new position hasn't changed under you?
22:36:48 <fantasai> JakeA: if something is going to move in the page, we'll update the final position in our default generatd keyframes at the very least
22:36:56 <fantasai> ... still trying to figure if it should be more complicated than that or not
22:37:02 <fantasai> ... if only updating final keyframe, will cause a jump
22:37:23 <fantasai> smfr: Other thing is page can scroll
22:37:39 <fantasai> ... destination position in document-relative coords or something positioN:fixed shoooting for a fixed location?
22:37:45 <fantasai> JakeA: when we're capturing it's in viewport coords
22:37:50 <fantasai> ... think of element captured as psoition:fixed
22:37:57 <fantasai> ... if something scrolls underneath, treat as changing the final keyframe
22:38:03 <fantasai> ... if user tries to scroll, it's not going to land on the scrollbar
22:38:15 <fantasai> ... we'll capture that in the pseudo-element and prevent scrolling
22:38:19 <fantasai> ... but of course JS can do it
22:38:29 <fantasai> ... Could be more like CSS transitions, more dynamically changing the animations
22:38:38 <fantasai> ... Our advice to devs is to reduce layout shift during page load
22:38:55 <fantasai> ... I would worry about a case where dev had created, and we were hiding all their shifting
22:39:07 <fantasai> ... would look good, but people with prefers-reduced-motion would see lots of jumping
22:39:11 <fantasai> smfr: thanks
22:39:46 <fantasai> JakeA: There's a lot of freedom in the transitions you can make
22:39:53 <fantasai> ... all of these demos are running Chrome Canary behind a flag
22:39:59 <fantasai> ... have an origin trial for it, and some dev docs
22:40:08 <fantasai> ... and we have a spec, currently ED in the CSSWG
22:40:16 <fantasai> ... along with some to-dos
22:40:33 <fantasai> JakeA: Next steps is feedback from vendors. This is when we want it!
22:40:51 <fantasai> ... aready some feedback from FF folks, some questions about our pseudo-element tree structure
22:41:11 <fantasai> JakeA: this is our JS API, not perfect, but only a bikeshedding session away from good
22:41:20 <fantasai> ... a bit concern about use of Transition where we're using CSS Animations
22:41:25 <fantasai> ... so we've got some naming issues to solve
22:41:30 <fantasai> ... and some minor questions on when we need promises to resolve
22:41:45 <fantasai> ... We have a finish promise, what if doesn't play through before interrupted by another transition?
22:41:49 <fantasai> ... These are our questions now
22:42:07 <fantasai> fantasai: What's next steps to multi-page transitions?
22:42:09 <fantasai> JakeA: next slide!
22:42:19 <fantasai> JakeA: We do capture of old state and new state, that model works
22:42:23 <fantasai> ... for both SPA and MPA
22:42:32 <fantasai> ... what we need is some bit of JS to provide an opt-in
22:42:38 <fantasai> ... so both pages are happy with this transition going ahead
22:42:48 <fantasai> JakeA: this is a sample API,
22:42:54 <fantasai> ... would only allow for same-origin document swaps
22:43:04 <fantasai> ... maybe and a "pagehide" listener
22:43:14 <fantasai> ... other side have an event, preveious page wants to do a transition
22:43:16 <fantasai> ... opt into that
22:43:28 <fantasai> ... Unfortunately can't use pageshow, because for new documents that fires after load
22:43:32 <fantasai> ... so need some new events
22:43:37 <fantasai> ... and would want to fire this before first render
22:43:51 <fantasai> ... so would need inline JS to some degree, but we don't want to block rendering any longer than necessary
22:44:00 <fantasai> fremy_: [missed question]
22:44:10 <fantasai> JakeA: Need to know which to assing a page transition tag to
22:44:21 <fantasai> ... it means you can create different transitions between different page types
22:44:34 <fantasai> fremy_: instead of that, maybe when you say "allow a transition", provide the list of stuff that you provide images for
22:44:37 <fantasai> ... and new page could read that list
22:44:40 <fantasai> ... get all the stuff
22:44:45 <fantasai> JakeA: we have a GH issue open
22:44:52 <fantasai> ... for SPA also interesting to know what was actually captured
22:44:58 <fantasai> ... and maybe give easier access to auto-generated keyframes
22:45:09 <fantasai> ... e.g. want to use your own animations, but have our info from start and end positions
22:45:16 <fantasai> fremy_: URL might not always be relevant
22:45:23 <fantasai> ... some hybrid pages are like SPA and sometimes new page
22:45:35 <fantasai> JakeA: would also like to pass along a structured clonable, for abitrary data like "page type"
22:45:40 <fantasai> fremy_: that's probably more useful than URL
22:45:46 <fantasai> JakeA: we would give both, we have URL to give
22:45:50 <fantasai> JakeA: this is same origin
22:45:55 <fantasai> ... discussed what we could do cross-origin
22:46:03 <fantasai> ... but if we do something cross-origin would be really locked down
22:46:08 <fantasai> ... maybe only root origin transition
22:46:08 <astearns> (replying to dholbert's zoom question)
22:46:13 <fantasai> ... it's just such a massive leak
22:46:27 <fantasai> ... I don't think ppl will realize how much info they're leaking by giving size of the header
22:46:34 <fantasai> khush__: another thing about Xoriign
22:46:42 <fantasai> ... accessing the pseudo-tree is not an option for cross-origin
22:47:10 <fantasai> ... security feedback is we don't want the pseudo-elements to be accessible to CSS or script to either of the origins
22:47:19 <fantasai> ... so that the duration of animation or what it looks like is completely UA-controlled
22:47:36 <fantasai> smfr: Concerned about page that's on receiving end of a page transition
22:47:40 <fantasai> ... gains some info about where you cam efrom
22:47:45 <fantasai> ... if old page wants to transitions
22:47:52 <fantasai> ... maybe FB is the only age on the Web that does that
22:47:58 <fantasai> ... receiving page knows you came from there
22:48:05 <fantasai> JakeA: we haven't thought too much about cross-origin case
22:48:11 <fantasai> ... and maybe conclusion is that it can't happen
22:48:18 <fantasai> ... focusing on same-origin right now
22:48:31 <fantasai> yonatan: [missed question]
22:48:42 <fantasai> JakeA: Yes. Hope is, demos I implemented with SPA, I want to make those MPAs
22:48:46 <fantasai> ... I'm more excited about that
22:48:52 <fantasai> ... with SPA, taking something that's very hard making iteasier
22:49:01 <fantasai> ... with MPA cases we're taking something impossible and making it possible
22:49:10 <fantasai> fremy: wondering if meta tag is a good idea.
22:49:14 <fantasai> ... doesn't seem like JS is required
22:49:24 <fantasai> ... in a lot of cases, just saying "I accept page transitions from same-origin domains"
22:49:28 <fantasai> ... and do that declaratively
22:49:33 <fantasai> <fantasai> +1
22:49:47 <fantasai> fremy: Just a meta tag: allow same-origin transition
22:49:54 <fantasai> ... and in first block of bytes, browser is immediately aware
22:50:03 <fantasai> JakeA: If transitions are simple enough that they work cross-page
22:50:17 <fantasai> ... if cases where you are capturing individual elements and doing something special, need JS
22:50:26 <fantasai> fremy: Yes, if you need special code for special cases
22:50:30 <fantasai> JakeA: I'm open to that
22:50:34 <fantasai> ... more we can move to declarative the better
22:50:41 <fantasai> JakeA: right now to make back animations work is to look at navigation API
22:50:50 <fantasai> ... let's me know based on history indexes which is larger
22:50:56 <fantasai> ... for MPA we need something else, we need a media query or something
22:51:35 <fantasai> fantasai: For back navigation, 2 ways to go back: back button in UA
22:51:48 <fantasai> ... but also website itself has ways of going functionally back while actually going forward i nhistory
22:51:54 <fantasai> ... would want to animate those the same in most cases
22:52:08 <fantasai> JakeA: So in pages where they do a push navigation, but conceptually going back
22:52:16 <fantasai> ... are devs doing that because the current API sucks?
22:52:26 <fantasai> khush__: It's just hitting a link in the page
22:52:32 <fantasai> ... could have hit back butotn and gotten to same URL
22:52:59 <fantasai> fantasai: E.g. I have breadcrumb navigation, and going up, kinda want to feel going back maybe
22:53:07 <fantasai> JakeA: kCould compare URLs
22:53:19 <fantasai> fremy: or passing a parameter
22:53:27 <fantasai> JakeA: could do with strutured ???
22:53:30 <fantasai> fantasai: but declaratively
22:53:32 <fantasai> JakeA: I see
22:54:47 <fremy> fremy has joined #pagetransitions
22:54:50 <fremy> q+
22:54:51 <fantasai> fantasai: Would be nice to have comparison functions for URLs, if you have structured URLs can do some things without needing to run JS and or check URL maps
22:55:10 <fantasai> ... and also would be useful to be able to pass params, clicking these links is "back" clicking those links is "up", etc.
22:55:24 <fantasai> yonatan: maybe using conditionals?
22:55:37 <fantasai> fremy: I was thinking maybe we can use pseuod-class on the page transition element
22:55:47 <fantasai> ... e.g. ::page-transition-image-outgoing::forward/etc.
22:56:21 <fantasai> fantasai: we have link attribute, rel="", might consider passing that info to the page transition in a way that allows to select against it
22:56:36 <fremy> s/::forward/:forward/ since it's a pseudo-class
22:57:02 <fantasai> fantasai: already have back/up etc. in rel, just pass it similar to how we can select against a class can select against rel
22:57:07 <fantasai> ... in the pseudo-elements
22:57:15 <fantasai> JakeA: [lost stack]
22:57:32 <fantasai> JakeA: Here's a case, where pasisng an element from one element to other, but the rest are clipped by parent
22:57:39 <fantasai> [demo of passing an element from one scroll container to another]
22:57:53 <fantasai> JakeA: one idea was to say that "I want this element to be nested in its closest transitioning item"
22:57:57 <fantasai> ... let's say I have scroller, remainign item
22:58:01 <fantasai> ... currently everything is siblings
22:58:06 <fantasai> ... but in this mode, we would nest them like this
22:58:22 <fantasai> ... so if you wanted clipping coulduse 'overflow: clip' as these things move around
22:58:30 <fremy> q-
22:58:35 <fantasai> JakeA: Getting towards the end, last topic is pseudo-selector stuff can discussin CSSWG instead
22:58:40 <fantasai> JakeA: Any questions?
22:58:48 <fantasai> smfr: Can you control the z-order of things being transitioned?
22:59:02 <fantasai> JakeA: yes, all in top layer, and there's a container that wraps these that has the pseudo-selector of ::page-transition
22:59:08 <fantasai> ... that's positoin:fixed, and children are position:absolute
22:59:13 <fantasai> ... so you can use z-index just as normal
22:59:25 <fantasai> smfr: if there are 2 elements and different ordering in the old page and new page, would they flip halfway
22:59:29 <fantasai> JakeA: we pick it based on the old page
22:59:44 <fantasai> khush__: old tags are orderd in old page, if new tages added in new page they're appended
22:59:52 <fantasai> smfr: so old content is on top?
22:59:54 <fantasai> khush__: ??
23:00:01 <fantasai> smfr: [question]
23:00:06 <fantasai> JakeA: it's in top layer
23:00:10 <fantasai> khush__: topper top layer
23:00:18 <fantasai> JakeA: because we want them to work even if fullscreen mode
23:00:42 <fantasai> smfr: so can't have video preview animate into new page and then place play button on top unless it's in the old page
23:00:50 <fantasai> ... consider youtube embed with play button in the made
23:01:03 <fantasai> ... but suppose animate somethng looks like a poster frame, and have play button appear on top in the transition
23:01:20 <fantasai> JakeA: that's fien, you have outgoing image and incoming image, so incoming image would have the play button
23:01:28 <fantasai> ... can hide old image immediately rather than cross-fade
23:01:37 <fantasai> JakeA: you can make the play button a separate thing you can transition
23:01:43 <fantasai> ... fine to have one of those things only be in the incoming page
23:01:55 <fantasai> ... for instance, in this example, the sidebar that you see
23:02:08 <fantasai> ... between these states, it's either only incoming image or only outgoing image
23:02:17 <fantasai> ... because only eists on such page
23:02:29 <fantasai> fremy: The button if it doesn't appear on the existing page, won't move along with the video
23:02:36 <fantasai> ... but the nesting proposal would solve it?
23:02:42 <fantasai> ... when you get nesting, can say this button belongs to this other thing
23:02:56 <fantasai> JakeA: if you have something on only one side, it wouldn't move right
23:03:02 <fantasai> ... nesting would cause it to move along with its parent
23:03:10 <fantasai> JakeA: over time, any last questions?
23:03:30 <fantasai> Meeting closed.
23:03:37 <RRSAgent> I have made the request to generate https://www.w3.org/2022/09/14-pagetransitions-minutes.html fantasai
23:22:25 <dom> dom has joined #pagetransitions
15:01:33 <wendyreid> wendyreid has joined #pagetransitions
15:50:13 <dholbert> dholbert has joined #pagetransitions
16:11:52 <wendyreid> wendyreid has left #pagetransitions
16:24:59 <dholbert> dholbert has joined #pagetransitions
17:40:47 <dholbert> dholbert has left #pagetransitions
21:14:55 <dom> dom has joined #pagetransitions
21:38:09 <fantasai> slideshow: https://lists.w3.org/Archives/Public/www-archive/2022Sep/att-0007/set-slides.pdf
21:38:13 <RRSAgent> I have made the request to generate https://www.w3.org/2022/09/14-pagetransitions-minutes.html fantasai
21:39:03 <fantasai> i/Topic:/Slides: https://www.w3.org/2022/09/14-pagetransitions-minutes.html
21:39:07 <RRSAgent> I have made the request to generate https://www.w3.org/2022/09/14-pagetransitions-minutes.html fantasai
21:57:06 <dom> Zakim, bye
21:57:06 <Zakim> leaving.  As of this point the attendees have been wendyreid, dholbert, khush__
21:57:06 <Zakim> Zakim has left #pagetransitions
21:57:45 <dom> RRSAgent, bye
21:57:45 <RRSAgent> I see no action items