search

aholachek / react-flip-toolkit

A lightweight magic-move library for configurable layout transitions
MIT License
4.08k stars 137 forks source link

FLIP animations with overflow: hidden; containers #70

Open hanford opened 5 years ago

hanford commented 5 years ago

First of all thanks for this library. I've written some of my own react FLIP components and this handles things so much better.

I'm using this in a project, and when people see what I've made they say "WOW!" .. this project makes complicated transitions very easy and I'm super thankful for that.

I've been working on a UI with a sidebar with overflow: hidden and then main content. The problem I'm running into is that when a card goes from main content to the sidebar, you don't see it until the it's within the sidebar. (this part isn't surprising, but it seems common enough that there might be correct approach and that's what I'm looking for)

I've fixed this by using onStartImmediate and onComplete but am wondering if there is a better approach. I have a mediocre hack of trying to detect if we're the newest addition in the array, and changing only the styles of that element but it doesn't really work. If you click elements from the Main content too quickly, they end up stacking in the sidebar. They also "snap" into place when removing position fixed.

I have a live environment here: https://codesandbox.io/s/1rv4x53p74 if anyone wants to take a look.

I'm wondering if there is an easier way of detecting which element is being FLIP'd into the list. Right now I'm just assuming the last item, but that assumption fails in the case of an item being moved from the sidebar to the main content.

Anyways, happy to explain more if this doesn't make a lot of sense. This isn't really an issue with the library. Just wondering how others have solved this problem and if it's common enough, I'd be happy to add an example or some documentation around it.

Cheers!

aholachek commented 5 years ago

Hi, this is a cool demo and a clever workaround for the overflow:hidden issue.

Honestly I would try to figure out if I could remove overflow:hidden from the sidebar as a first option, and if not, if I could absolutely position an overflow:visible div containing all sidebar cards over the sidebar itself, since as you've found, trying to put position:fixed on and off the element opens you up to several issues that could reduce the quality of the transition, by basically interfering with the FLIP calculations.

I'll keep this open in case other people have better ideas.