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

What is Framer? Join the Community
Return to index
Sarah Kranz
Posted Jan 25 - Read on Facebook

hello, I'm trying to build a carousel prototype and would love to get some help <3
The row of coloured cards should be swipeable horizontally. My problem is to get some nice momentum. When I allow overdrag, the animation gets totally weird, probably because the image of the cards is bigger than screen width?. I tried to play around with bounce.Options but .. well, it stayed weird. Any idea?


Darin Dimitrov

Are you using a regular scroll view? It should be perfect for the case.

Sarah Kranz

hm .. ok .. the whole view is also scrollable vertical, I used a ScrollComponent for that. The carousel is a draggable layer that the ScrollComponent as SuperLayer. How would you restrict the horizontal movement with the scroll view?

Marc Krenn

Hey Sarah, check this out:

If you have any questions, please don't hesitate to ask! :)

Sarah Kranz

Fantastic Marc Krenn - that's exactly what I want to build. And yes, I have questions ;)
You used a completely different method to arrange all the cards and enable them to vertical scroll. I assume that is because scroll.Component can not be super.Layer for another scroll.Component? I tried to to just use it instead the draggable Layer inside the my old scroll.Component (because I'm a beginner and not too familiar with arrays yet ;)) and seems to not work.
Also - what is the carousel.centerY() doing?

Darin Dimitrov

Nesting scroll components is okay, it's the best way to achieve this pattern, just like in Marc's example. You don't have to use arrays to make it work, it's just a more convenient (or DRY) way to do it. You can restrict vertical scrolling separately with "scrollVertical: false" and carousel.centerY() centers the carousel layer vertically relative to it's parent.

Sarah Kranz

ok, I had to uglify your code a bit to make it fitting to my beginner skills, but it works now ;) thanks so much for you help Darin & Marc

Read the entire post on Facebook