14 Jul Scrollable list view with modifiers
It was once asked on IRC how to apply a modifier to an item in the Scrollview, based on it’s actual location in the visible region. Here, I will show you one way to achieve it.
First, you add a physics engine and attach a particle body to it:
Then you move it based on the distance coming from the GenericSync. In our case TouchSync fires ‘update’ event every time we drag our scroller. We listen for this event and update the position of the particle:
And we update our scroller’s position, based on the location of the particle, so that the positions of both are same:
Now, we have a good reference of where exactly our scroller is. Time to use it to affect the items in the list! To do that, we would first attach a Modifier for every item in the list and save them to an array for later use:
By knowing the distance the scroller has moved to the side, the width of each surface and the width of the window, we can easily know which surface is entering the view or leaving it. Having that info at our hands, we can affect the modifiers of these elements.
Here is an example of the solution: