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

What is Framer? Join the Community
Return to index
Paul Russo
Posted Oct 24 - Read on Facebook

I'm trying to replicate a basic gallery with swiping to use in a Walkthrough, any examples on how to chain together the images. Primarily being able to peak at the next image without swiping all the way.

Nothing fancy pretty standard stuff.

2 Comments

Ed Chao

off the top of my head, probably can do this a number of ways

1. flatten images into one image and set breakpoints so that between certain values the image animates to a specific x position

2. create an array of objects representing each image/card, including urls to the images in each object. Iterate through array to create a row of offset layers along the x axis and populate their background image using the image attribute pulled from the indexed object. You can then work out what the breakpoints are based on the index as well.

3. create all your images as layers. Give them each a left, center, and right state. Bind a drag event to each layer so that on dragMove they animate in the next layer or the previous layer to the correct state depending on positive or negative delta.

Paul Russo

Awesome, thanks Ed. It finally dawned on me to just create the flattened image.

Read the entire post on Facebook