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

What is Framer? Join the Community
Return to index
Matt Bogado
Posted Feb 08 - Read on Facebook

I'm trying to recreate the LinkedIn card interaction in framer, but it turned out to be more complicated than I thought – I'm not a developer :(
Here's what I've got so far. Any recommendations on how to complete the interaction?

13 Comments

Stephen Crowley

George refined this example, you can use this as a bases. Just instead of Y you are formatting it for X: http://share.framerjs.com/sslxulom5uj1/

Matt Bogado

I used that example as my basis, but it didn't work on my framer file. I'll take another look. Thanks!

Stephen Crowley

Oh ok sorry about that- can you give me a little bit? I'll take look when I have a free moment.

Matt Bogado

Thanks, Stephen

Stephen Crowley

Hey Matt, so I'm unfamiliar with LinkedIn mobiles card swiping- you want the card2 to come in as you begin to swipe card1 to the left?

Stephen Crowley

Also, if you swipe left on card3 you want them to go away or appear like they did in their original state?

Matt Bogado

to answer your first question, yes. As you swipe right-to-left on card2, card 3 shows up. And if you swipe left-to-right on card2, card1 shows up.

Matt Bogado

Your second question, swiping left on card3, would make the cards go away and show the user as in initial state

Stephen Crowley

Hey man, sorry- got swamped. I'll take a look on my layover

Stephen Crowley

Matt sorry about the delay- got time in between flights this am. Ideally I think it would be nice to use modulate to manipulate the scale and position of each card on drag but for now here is what I think the desired effect you were looking for is: http://share.framerjs.com/vbm0dhcbxsx2/

Matt Bogado

Yes! Thank you so much. I'll take a look at utils.modulate again

Matt Bogado

Stephen Crowley, thanks so much for taking the time and fixing my code. Do you know if a good example that I can follow to understand Utils? I'm reading the documentation and I cannot grasp the concept still... :( Thanks in advanced.

Stephen Crowley

No problem man! Let me see if I can find a few examples for you when I get back to my computer.

Read the entire post on Facebook