slide into position

[carmandale]

I want the blue box to slide into position when the orange box is transitioned on and off.

https://codesandbox.io/s/transition-test-8k1qs

I can't seem to figure out how to make it happen.

[rickMcGavin]

Hey @carmandale, I'm not exactly sure what you were going for, but I gave it a shot this way.

https://codesandbox.io/s/transition-test-forked-ni4cr

[carmandale]

@rickMcGavin ,
thanks. This is the visual idea. I want it to work responsively, so my preference is to not specify 100px, but have it slide down because it is in a flex box. It seems like I should be able to get the position using useRef, but I haven't figured it out. I found some examples using useHeight, which would work for this example, but I actually want it to work horizontally. In the reference movie below, you can see that the home button pops into its new position. The back button slides in nicely because of useTransition from react-spring. I thought I would be able to do the same with the home button and have it nicely slide into place. https://www.dropbox.com/s/kb0tg9kd17g280r/reference.mov?dl=0

thanks for any ideas or help.
Dale

[rickMcGavin]

Hey @carmandale,

This is pretty tricky. I made another sandbox that looks like it accomplishes this animation. I used useMeasure from react-use to get the widths off the refs. I switched it to horizontal as well since that's the use case. I tried to include comments specifically around the refs since I felt like that was super confusing to figure out. I hope this helps. https://codesandbox.io/s/fill-slot-animation-ey0rj

[carmandale]

@rickMcGavin - thanks! I guess the good news for me is that this is exactly the way that I thought it would work...I just couldn't quite figure out how to put it all together. But this helps me tremendously.

thank you again! Dale

[rickMcGavin]

Awesome - glad it helped!