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

What is Framer? Join the Community
Return to index
Sergio Majluf
Posted Jul 08 - Read on Facebook

Hi! I'm trying to come up with the best way to code the following image. My idea is to swipe up/down to adjust the value of the number in the middle. When the user is done, she would tap the larger number and be redirected to a previous screen.

I've tried using a transparent Page Componenet in the bg, and using ot's offset to math out the value, but it's very hacky. I also thought about tracking drag events, but it would be a similar approach.

Have you done something like this before? Any tips, ideas or leads?

4 Comments

Chris Camargo

Nice one. You could place a "label layer" that holds your text inside a PageComponent. One page for each label. Then, have that label listen to its page's scroll value. You can then use Utils.modulate to perform a scale and opacity change on your label layer based on the scroll value you get back for each page.

Sergio Majluf

Thanks. I'm trying to think about it programaticaly, so you can swipe and have it change with inertia.... like the default scrolling date/month picker on iOS. I'll try to code what you suggests, it does make sense :)

Benjamin Den Boer

Hey Sergio Majluf - we created an example a while ago that highlights this exact behaviour. Just posted it within the group! See it here → https://www.facebook.com/groups/framerjs/permalink/705746659552408/ :-)

Pratheep Ch

The idea of tapping the larger number and getting redirected to another screen is not a good practice in iOS. Please read about the IA of the pickers and see how other apps do it.

Read the entire post on Facebook