This is a read-only archive of the Framer Community on Facebook.

What is Framer? Join the Community
Return to index
Ashwini Purohit
Posted Oct 31 - Read on Facebook

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?

http://share.framerjs.com/18zij93ljb1t/

Thank you!

9 Comments

Mike Johnson

Interesting. Would you mind if I go over it in a FramerCast? I want to start adding more of these types of demos to http://www.framercasts.com

Ashwini Purohit

Yes please! That would be very helpful

Mike Johnson
Mike Johnson

It's a pro video (almost 20 mins long!) so if you make an account let me know and I'll give you access to the video! :)

Ashwini Purohit

Thanks so much! I logged in with my Facebook account; is there a way you can provide access to that? Not seeing a way to create a new account

Mike Johnson

That's perfect, I'll set it up now.

Mike Johnson

ok, try now

Ashwini Purohit

it works!

Ashwini Purohit

wow, thank you, that was so helpful!! can you share your version of the prototype so I can poke around? Also, the scrollbg layer actually is in the list, it's about 2/3 down the layer list below more_restaurants. without it I think I'd still have the problem where my romeoPic won't animate to (0,0) of the *screen* because it would instead go to (0,0) of the scroll group - so should I still keep it there?

Thanks again! what was the shortcut key you used to make the code block?

Read the entire post on Facebook