For practice, I'm trying to replicate the Uber Eats animation of selecting a restaurant and adding a meal from that restaurant to the cart. I have a (badly coded) version of what I want, but I would really appreciate any guidance on how to do this in a better/more efficient way.
-I tried to use states, but I run into problems because I want the restaurants to scroll *behind* the header, but the restaurant image to expand *in front of* the header when tapped. I tried including the z order in a 'tapped' state for my scroll component but that didn't seem to work.
-I also wanted to use states so it's easy to reverse the animation when I click 'x'...not sure how to do that efficiently without states...
-Also because I want the photo when tapped to go to the screen's (0,0) not the parent's, I included a transparent layer in the scroll group that's the size of the screen. Feels hacky. Is there a better way?