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

What is Framer? Join the Community
Return to index
Ed Chao
Posted Sep 05 - Read on Facebook

I put together a quick demo project of how to create a swipe UI with page control dots. The main takeaway is that it knows what page you're on, so you can do a bunch of other shenanigans based on that.

15 Comments

Chad Lonberger

Nice job Ed, had to build something similar last week and didn't get a chance to wire up the dots. Looking forward to checking out your implementation.

Ed Chao

Chad Lonberger yeah let me know what you think :)

Jorn van Dijk

Cool!

Samwoo E

Awesome stuff!

Johannes Eckert

this is amazing and should be a component native to framer. Are you using the undocumented scrollview?

Johannes Eckert

oh no, it looks like you just used draggable objects! clever

Ed Chao

Johannes Eckert hm! I never even thought about doing it that way, but tracking a scrollViews x position and then animating it into a specific position depending on what item you are viewing in the scollview sounds compelling.

Chad Lonberger

Initially I tried the scrollview approach but it wasn't playing nice with mobile. May have not explored it fully though.

Johannes Eckert

Tracking the scrollview's x is reliable with the new scrollview that Koen is working on (some post a few weeks ago)
Then setting the target x to animate to is more a matter of multiplying the screenwidth by currentIndex

Chad Lonberger

Johannes Eckert good news thanks

Kevin Cannon

Thank you so much! That is just what I was looking for! :)

David Caputo

This is great! Can you explain or provide a reference to what's happening on line 48? [0..stack.length-1].map (i) it's mainly the brackets and the 0..stack that I find confusing. Thanks so much for posting!

Ed Chao

thats just coffeescripts way of saying iterate through this array from index 0 to the length of the stack array and map all the following to each index. It's very similar to a for loop.

David Caputo

Gotcha! Thanks! I saw your comment on a previous post and started to suss it out but sometimes I am a bit lost with coffeescript.

Read the entire post on Facebook