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

What is Framer? Join the Community
Return to index
Alex Maximets
Posted Dec 15 - Read on Facebook

Hey Everyone!
I've been working on this problem for a while now, but can't seem to find a way around it.

I am trying to build a horizontal scroll wheel module (made up of "layers" array) with a "selector" layer in the middle of the screen that selects the layer within said array that landed on it, displays said layer's name and the page that is associated with it. In other words, once "beige layer" lands on "selector", is displayed below this.layer, "beige page".x=0

Right now the problem is that the wheel only moves onDrag, so you have to keep dragging it for it to move as opposed to onScroll. I've tried playing around with reading the x position of layers in the "layers" array relative to "selector" and fire off commands, and I also tried playing around with .parent properties for the pages, but it doesn't work the way it should.

Any help would be appreciated, guys.

Thanks in advance!


Jonas Treub

A solution is to put a draggable layer in front which in turn controls the rotation speed of the carousel. I'll try to build a demo.

Niels van Hoorn

I saw your StackOverflow post and created an example there:

Jonas Treub

Here is an alternative example using an invisible draggable layer:

Alex Maximets

You guys are absolute LEGENDS thanks so much. As for the "select" functionality I think it should be as easy as just getting position x of each layer as it passes "selector" and then firing off a page that that layer correlates to in the array. Any materials/past projects you can recommend me to study for this guys?

Jonas Treub

To make it snap to an exact tile there are a few things you need to take into account. On dragend you want to check the velocity. When the velocity is 0, you want to rotate to the closest tile. When the velocity is greater then 0 you check the velocity each frame using .onChange "rotation". When the velocity drops below a certain threshold you want to snap (animate) to the closest layer.

Read the entire post on Facebook