Highlighted

3D Transforms: Create carousel using Scroll Groups and Repeat Grids with perspective.

Adobe Employee ,
Oct 23, 2020

Copy link to clipboard

Copied

Hi everyone,

 

One of the more popular cases for using 3D transforms is in using them to create Carousels. You must have seen them being used in sites such as Netflix and Spotify. In this tutorial, we will attempt to simulate such carousels using 3D transforms in XD, Repeat Grids, and Horizontal Scroll Groups.

 

scroll group.gif

Atul_Saini_1-1602087083000.png

 

Let's get started. 

 

Step 1: Add perspective to the container

  1. Create a square or rectangle.
  2. Enable transform and use the Y-axis gizmo to adjust the perspective.

 

Untitled picture.png Untitled picture2.png

 

 

 

 

 

 

 

 

 

Step 2: Apply repeat grid and horizontal scroll

  1. Apply a repeat grid to the rectangle
  2. Add photos to each of the rectangles in the grid
  3. Enable Horizontal scroll

 

Screenshot 2020-10-07 193334.png

 

Step 3: Create a carousel

  1. Duplicate the artboard
  2. In the duplicated artboard, ungroup the repeat grid.
  3. Select a square (tile), and in Transform settings set the y-axis to "0".
  4. Move it toward the center and the rest of the boxes towards it's right and left.
  5. Drag the Z-axis gizmo down (Z-axis = 240) to give depth to the tile. 
  6. Increase the size of the border for the box and fill with bright colors to highlight the box.
  7. Repeat the process for the rest of the squares/tiles.

 

Untitled picture4.png

 

Step 5: Use Auto-Animate to wire and animate the prototype

  • To make it work effectively, wire each tile with its corresponding highlighted artboard.
    Trigger= Tap; Action= Auto-Animate

 

Untitled picture5.png

 

Were you able to recreate the carousel using the procedure" Did you have any issues? Let us know by replying to this post.

 

Share your creations

We would love to see what you created. Reply to this post to share your creations.

 

Thanks,

Atul_Saini

Views

229

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more

3D Transforms: Create carousel using Scroll Groups and Repeat Grids with perspective.

Adobe Employee ,
Oct 23, 2020

Copy link to clipboard

Copied

Hi everyone,

 

One of the more popular cases for using 3D transforms is in using them to create Carousels. You must have seen them being used in sites such as Netflix and Spotify. In this tutorial, we will attempt to simulate such carousels using 3D transforms in XD, Repeat Grids, and Horizontal Scroll Groups.

 

scroll group.gif

Atul_Saini_1-1602087083000.png

 

Let's get started. 

 

Step 1: Add perspective to the container

  1. Create a square or rectangle.
  2. Enable transform and use the Y-axis gizmo to adjust the perspective.

 

Untitled picture.png Untitled picture2.png

 

 

 

 

 

 

 

 

 

Step 2: Apply repeat grid and horizontal scroll

  1. Apply a repeat grid to the rectangle
  2. Add photos to each of the rectangles in the grid
  3. Enable Horizontal scroll

 

Screenshot 2020-10-07 193334.png

 

Step 3: Create a carousel

  1. Duplicate the artboard
  2. In the duplicated artboard, ungroup the repeat grid.
  3. Select a square (tile), and in Transform settings set the y-axis to "0".
  4. Move it toward the center and the rest of the boxes towards it's right and left.
  5. Drag the Z-axis gizmo down (Z-axis = 240) to give depth to the tile. 
  6. Increase the size of the border for the box and fill with bright colors to highlight the box.
  7. Repeat the process for the rest of the squares/tiles.

 

Untitled picture4.png

 

Step 5: Use Auto-Animate to wire and animate the prototype

  • To make it work effectively, wire each tile with its corresponding highlighted artboard.
    Trigger= Tap; Action= Auto-Animate

 

Untitled picture5.png

 

Were you able to recreate the carousel using the procedure" Did you have any issues? Let us know by replying to this post.

 

Share your creations

We would love to see what you created. Reply to this post to share your creations.

 

Thanks,

Atul_Saini

Views

230

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Oct 23, 2020 2

Have something to add?

Join the conversation