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

What is Framer? Join the Community
Return to index
JinJu Jang
Posted May 26 - Read on Facebook

http://share.framerjs.com/r6fsjezs1erh/
This is a new project I'm working at the moment. Right now there is an array of cards inside of scrollable container.

Eventually, I'd like to make the card to moved to the centre when it's clicked. (Step 1: tap a card on the edge, Step 2: the card moves to the centre, Step 3: The card scales up to fill the whole screen.) Is there any learning material I can look up to?

From Framer examples, I thought the "Snap Scroll" could be a good reference, but I think my level of understanding isn't enough to figure out those complex code. :/

Any help, comment will be really appreciated by me! :)

10 Comments

Balraj Chana

Hey JinJu, I've been working on this exact same concept for a prototype. You're welcome to grab the code here: http://share.framerjs.com/89liuoy5xo8b/

JinJu Jang

Omg that's awesome! You must understand my pain ;) I'll learn a lot from you. Thanks!

Balraj Chana

You're welcome :)

JinJu Jang

Balraj Chana I'm looking at your code, love the simplicity that you've done! To be honest it's better than the sample that I was looking at :) thanks again!

Balraj Chana

Thanks JinJu! Glad to help anytime!

JinJu Jang

Balraj Chana http://share.framerjs.com/ghxj7efjg85x/
This is my attempt after learning new things from your codes. In my case it's almost working except one little thing.
When I select the second one from the edge, It takes the first card's position when you exit to the card view.

I think it must be related list index, and scroll.X in the array... but couldn't figured it out :/ any thoughts on this?

Balraj Chana

Hey JinJu, thanks for letting me know. I've fixed the issue and you can find the solution here: http://share.framerjs.com/4ytpsx0760vk/.

Regarding the strange bug, I believe the scrollComponent was not initiating the originPos array as it contained values from the dynamically generated scrollComponent.content layer. Funnily enough, if you shifted the scrollX position by 1 pixel before selecting a card, then it would work. I've explained the solution in the code so please do let me know if you understand it.

Fran Pérez

Another way to achieve the same effect :) #framerCode

http://share.framerjs.com/2jod6kexrvoh/

Balraj Chana

Awesome, looks more efficient :) Thanks Fran!

JinJu Jang

Thanks guys! :D

Read the entire post on Facebook