Anima

In this guide, we will create an Instagram-like sliding photo gallery in Sketch.&nbsp;

There are many ways to achieve this, but here are the basics. ​

<a href="http://www.animaapp.com" rel="nofollow noopener noreferrer" target="_blank">Install</a> Anima Toolkit for Sketch

<a href="https://www.dropbox.com/s/h68eva1n6nl4lmp/Carousel%20Tutorial.sketch?dl=0" rel="nofollow noopener noreferrer" target="_blank">Download</a> tutorial file.

Learn more about <a href="https://docs.animaapp.com/v3/sketch/prototype/interaction-animation-intro.html" rel="nofollow noopener noreferrer" target="_blank">Anima Interactions</a> ​

- <a href="http://www.animaapp.com" rel="nofollow noopener noreferrer" target="_blank">Install</a> Anima Toolkit for Sketch
- <a href="https://www.dropbox.com/s/h68eva1n6nl4lmp/Carousel%20Tutorial.sketch?dl=0" rel="nofollow noopener noreferrer" target="_blank">Download</a> tutorial file.
- Learn more about <a href="https://docs.animaapp.com/v3/sketch/prototype/interaction-animation-intro.html" rel="nofollow noopener noreferrer" target="_blank">Anima Interactions</a> ​

Set images horizontally, group them, and place them inside the Phone Mockup folder.

Step 2: Create mask to display one image at a time

Create a Rectangle the same size of the carousel you want to create

Place it under the Images Group you just created

With the Rectangle layer and Images folder selected, click “Mask” in the toolbar

1.  Create a Rectangle the same size of the carousel you want to create 
2.  Place it under the Images Group you just created 
3.  With the Rectangle layer and Images folder selected, click “Mask” in the toolbar

These controls will trigger the interaction and change the images to the right or left.

Place these controls on top of the Images folder.&nbsp;

- These controls will trigger the interaction and change the images to the right or left.
- Place these controls on top of the Images folder.&nbsp;

Step 4: Select Phone Mockup folder and open it in the Interaction editor.

In the Editor, place an image on every state by sliding the Image group to the left.

Connect the control arrows to the previous or next image/state.&nbsp;

Click Run Component on the Editor’s toolbar to preview interactions.

- Click Run Component on the Editor’s toolbar to preview interactions.

Back in Sketch, click Preview in Browser to Sync and Share your design with the world!

- Back in Sketch, click Preview in Browser to Sync and Share your design with the world!

<a href="https://www.dropbox.com/s/h68eva1n6nl4lmp/Carousel%20Tutorial.sketch?dl=0" rel="nofollow noopener noreferrer" target="_blank">Download Tutorial Sketch file</a>.

Due to the shift towards Figma in the UX/UI market, we have decided to remove official support for our Sketch plugin. However, users can still use the plugin as-is. We recommend using Anima with previous Sketch versions.

- Due to the shift towards Figma in the UX/UI market, we have decided to remove official support for our Sketch plugin. However, users can still use the plugin as-is. We recommend using Anima with previous Sketch versions.

<a href="https://support.animaapp.com/en/articles/2627097-anima-for-sketch-how-to-create-a-high-fidelity-prototype">Creating a High-Fidelity Prototyping in Sketch</a>

<a href="https://support.animaapp.com/designer-s-guide-to-anima/how-to-publish-a-website-and-host-it-with-anima">How to Publish a Website and Host it With Anima</a>

<a href="https://support.animaapp.com/en/articles/2641923-how-to-handoff-design-specs-to-developers">How to Handoff Design Specs to Developers</a>

<a href="https://support.animaapp.com/designer-s-guide-to-anima/how-to-export-sketch-to-html">How to Export Sketch to HTML</a>

<a href="https://support.animaapp.com/en/articles/2644596-team-collaboration">Team Collaboration</a>

- <a href="https://support.animaapp.com/en/articles/2627097-anima-for-sketch-how-to-create-a-high-fidelity-prototype">Creating a High-Fidelity Prototyping in Sketch</a>
- <a href="https://support.animaapp.com/designer-s-guide-to-anima/how-to-publish-a-website-and-host-it-with-anima">How to Publish a Website and Host it With Anima</a>
- <a href="https://support.animaapp.com/en/articles/2641923-how-to-handoff-design-specs-to-developers">How to Handoff Design Specs to Developers</a>
- <a href="https://support.animaapp.com/designer-s-guide-to-anima/how-to-export-sketch-to-html">How to Export Sketch to HTML</a>
- <a href="https://support.animaapp.com/en/articles/2644596-team-collaboration">Team Collaboration</a>

Prerequisites

Step 1 : Setup Images

Step 2: Create mask to display one image at a time

Step 3: Add Controls

Step 4: Select Phone Mockup folder and open it in the Interaction editor.

Step 5: Create a State for each image

Step 6: Connect Images

Preview

Get Started with Anima!