Possible Bug When All Keyed Elements Don't Have A Counterpart On The Next State

[lots0logs]

Hi! 😃 I'm not sure if this is a bug or just a user error on my part. I think it'll be easier to show you than to explain it:

Basically, each grid item has a unique data-flip-key value. When you click on an item, the details page will have only that items key on the larger image. Any thoughts? 🤔

[davidkpiano]

Are you trying to ask how you can animate out the other items? Also do you have a link to this code?

[lots0logs]

No. I just want the single grid item that was clicked to animate back in. Only the grid item I clicked in the screencast has a data-flip-key that matches another element once the state is updated to show the details view for that item. The behavior shown in the screenshot appears to be caused by every grid item that has a data-flip-key being animated back in regardless of whether or not the key matches an element in the previous state.

I dont have the code live on our staging server yet because it isn't working how I expect it to (please do let me know if I'm wrong). But maybe some pseudo code will help demonstrate the situation I just described.

So it starts out with markup like this:

Grid View

<div>
	<div data-flip-key="agency">...</div>
	<div data-flip-key="farmers-market">...</div>
	<div data-flip-key="fashion">...</div>
	<div data-flip-key="learning-management-lms">...</div>
	<div data-flip-key="coffee-shop">...</div>
	<div data-flip-key="restaurant">...</div>
	<div data-flip-key="travel-agency">...</div>
	<div data-flip-key="wedding">...</div>
	<div data-flip-key="yoga-studio">...</div>
	<div data-flip-key="design-agency">...</div>
	<div data-flip-key="coffee-shop">...</div>
	<div data-flip-key="photo-marketplace">...</div>
</div>

Details View

<div>
	<div data-flip-key="restaurant" class="screenshot">...</div>
	<div class="details">...</div>
</div>

After clicking on the restaurant grid item everything works fine (as shown in the gif). The markup is unchanged AFAICT. Now, if I click to go back to the gridview, instead of transitioning that one grid item back in, it transitions all the grid items back in (as shown in the gif). The markup again, appears to be unchanged (so there is nothing leftover that might hint at what is going wrong).

I hope that I was able to explain it in enough detail. Please let me know if it makes sense. In the meantime I will try and get the bug live on the staging server so you can see it if you think that would still be helpful 😃

[lots0logs]

After deeper investigation, I'm pretty sure the current behavior is intentional. I'm able to achieve the behavior I'm looking for by editing animation.ts so it only returns animations for type MOVE. IMO, this isn't an edge use case. All other libs that use the flipping technique behave the way I expected here. Is there a chance you could add an option for only animating certain types like MOVE?

[davidkpiano]

Is there a chance you could add an option for only animating certain types like MOVE?

Sure. I'm actually planning on removing the onEnter animation since it's pretty opinionated, and I'd rather let the developer configure animations themselves, which is pretty straightforward to do:

const flipping = new Flipping({
  onEnter: (stateMap) => {
    Object.keys(stateMap).forEach(stateKey => {
      const state = stateMap[key];
      if (state.type === 'ENTER') {
        // do your own custom animation
        state.element.animate(...);
      }
    });
  }
});

[lots0logs]

That makes much more sense than what I resorted to :doh: THANKS!!!