Re: [web-animations] Bubble animation events to effects

One thing I forget to say is that in the first use case, I could choose to not negate "justify-content: center", and simply animate with the logo and links all centered, but this makes the distance harder to calculate, and now logo and links have different slide distance. This is the "not wanting to put component into its final styles" I was talking about.

> On May 27, 2015, at 6:23 PM, Glen Huang <curvedmark@gmail.com> wrote:
> 
> Hey Shane, thanks for replying so quickly. :)
> 
>> If you have some specific examples where you want this behavior, perhaps we can work through them with you?
> 
> Sure. I was afraid providing concrete use cases and describe them clearly would make the mail too long, and nobody would want to read it.
> 
> I will try to be as succinct as I can.
> 
> I will provide two use cases. One to demonstrate why sometimes you don't want to put the component into its final styles before animating. The other to demonstrate why I need to change styles after the animation has finished and closure probably won't cut it.
> 
> For the first use case, imagine we have a navigation bar like this (hope the mono font Courier New is displayed correctly)
> 
> -----------------------------
> Logo          Home Blog About
> -----------------------------
> 
> And we want to animate it like this: retain the distance between the logo and links, slide them to the left, and at the same time, fade out the logo. The animation is finished once the links are horizontally centered.
> 
> -----------------------------
>        Home Blog About
> -----------------------------
> 
> The navigation bar is currently aligned with "justify-content: space-between". After the animation is done, we want to hide the logo and align the nav with "justify-content: center".
> 
> This animation is part of several possible animation sequences. So we only want to return an effect (or a closure as you suggested) to make it compostable.
> 
> Let's pretend effects contain hooks, and see how we are going to implement this.
> 
> We first calculate the slide distance, then change logo and links' translateX from 0 to that distance while changing logo's opacity from 1 to 0. After the animation is finished, we add a class to nav, which makes logo "display: none", and nav "justify-content: center".
> 
> So with the backwards fill solution, I need to add the class first and then negate the "display: none" and "justify-content: center". It's not as simple as adding the final styles at the end.
> 
> For the second use case, imagine a web app containing two pages, each should occupy the whole viewport. One (.pageA) is displayed, the other (.pageB.hidden) is hidden.
> 
> When page B is to be displayed, it's firstly absolutely positioned beside page A, then both slides to left, finally page A is hidden and page B is the new displayed page.
> 
> With hooks, we first remove the .hidden class from page B add a temporary class to it to absolutely position it, then change both pages' translateX from 0 to -100%, and after the animation is finished we remove the temporary class.
> 
> In this example it doesn't make a difference if the cleanup happen at the end of effect's active phrase or after the animation is finished. But for other animations it does (e.g., a component is pulled out of flow after the animation is finished, this pulling can't happen at the end of the active phase, because it might shift other components in-flow that will animation later in the same animation sequence). So let's pretend it does, and the cleanup must happen after the animation is finished.
> 
> Now, with closure, I can add that temporary class when it's called. But when do I remove it? Sounds like I should return an object instead of a closure, where the object contains: 1. a method to set the initial styles, and return the effect, 2. a method to cleanup the initial styles after the animation is finished. And how to run this cleanup method in the function that plays the whole animation sequence is another question.
> 
> My desire to extend effects come from these facts:
> 
> I'd like each component to return a basic effect object and not my custom object. I didn't do anything special, so would like to generate an object as ubiquitous (and thus easily compostable) as possible.
> Set the final styles and negate them in the keyframes is sometimes more cumbersome than animate directly and set the final styles in the end.
> To be able to use classes to set the initial styles, I need to remove them after the animation is finished. The API currently doesn't seem to provide a convenient way of doing.
> 
> But I understand making event synchronous is probably not feasible, and I'm wondering what's you idea of making the whole situation easier to manage?
> 
> Thank you for reading this and I'm grateful you'd made this far. :)