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

What is Framer? Join the Community
Return to index
Akhil Dakinedi
Posted Jul 29 - Read on Facebook

got a question on how to set something up. this is a prototype for a quiz where the question shows up on the top part of the screen and the user can swipe through the answer choices at the bottom to view them one by one.

that whole answer container needs to snap to the proper position upon a left/right swipe. ex: from this screen (see image), if the user swipes left, the "B" cell needs to animate in to where "A" was. Another left/right swipe from "B" would then accordingly animate "A" or "C" into the screen. Ideally, I would also want this to loop infinitely, where a left swipe from "D" would show "A" again.

I know there's a bunch of examples like this for snap-scrolling on the Framer Examples site, but they all use cards generated on the fly in a "for" loop inside a pageComponent which doesn't quite explain how the snapping works and how the left/right swipe is detected. I'll be setting this up in Sketch and then import them in to Framer.

So far I've tried making the whole thing a draggable, tried a horizontally scrolling pageComponent, and tried animating each answer cell separately with not much luck.

Any ideas, suggestions, or tips? Thanks in advance.


Katie Wu

I'd say your best bet is using a PageComponent with 4 pages (A,B,C,D) and have scrollVertical = false and directionLock = true. Then let PageComponent.y = QuestionBox.height. Not sure about how to get A loop around to D, but a PageComponent should work! What did the behavior look like when you tried PageComponent?

Akhil Dakinedi

ohh..that could work. I didn't have four pageComponents, just one. this makes a bit more sense.

with a single pageComponent wrapping around all the answer cells, it always snapped to the center of B and C (midpoint of the whole thing).

lemme try four pageComponents. thanks!

Katie Wu

No it should be ONE PageComponent, with four pages. So you create a PageComponent (e.g. it's named pageComp) and then call pageComp.addPage(layerName, "right") four times, for each page. The PageComponent itself serves as a "window" through which you view the underlying content, and when you call addPage, the pages are arranged like how you did in your diagram, but are masked by that top layer!

Akhil Dakinedi

it worked! thanks so much. the official framer docs helped too. hadn't really used pageComponent before. this makes a lot more sense now.

if inspiration strikes you on how to make it an infinite loop, let me know! i'm going to try some strange off-screen page snapping to fake it right now.

Read the entire post on Facebook