Framer
Framer
  • Learn
    • Speedruns
    • Starter Kit
    • Examples
    • Tutorials
    • Sessions
  • Teams
    • Teams
    • Enterprise
  • Pricing
  • Blog
  • Updates
  • Support

Magic Motion

Animated Tabs
Card List
Card Paging
Container Transitions
Dynamic Grid
Expand on Tap
Image Gallery
Image Gallery 2
Magic Motion
Stories UI
Swipe & Expand
To-Do List
Toggle Menu

Overlays

Bottom Sheet
Draggable Sheet
Modal Box
Side Menu

Components

Input Form
Loading Indicator
Radio Button Form
Tooltip on Hover

Flows

Checkbox Form
Splash Screen
Timeout Transition

Interactions

Accordion Menu
Drop on Scroll
Nested Scroll
Star Rating
Swipe Menu
Switch Sheet
Tab Menu
Wheel Picker

Effects

Cover Flow
Cube Effect
Flip Effect
Parallax Scroll
Perspective Tilt
Pile Effect
Shuffle
SVG Animation

Integrations

Google Sheets
Map
Signature Pad
Sound Effects

Code

Card Swipe
Carousel
Custom Effect
Drag Handle
Dynamic Header
Image Panning
Input Data
Input Validation
Like Animation
Like Counter
Lock Screen
Long Press Menu
Perspective 3D
Progress Bar
Scroll Progress
Show Password
Slider
Stories: Drag
Stories: Tap
Toast Prompt

Image Gallery

Open in Framer to interactPreview this example

Design different image gallery states, and Framer will figure out the animations using Magic Motion.

Open in FramerPreview Example

Learn more about image galleries

An image gallery or image grid provides an organized way to view a collection of images together and then expand them for viewing individually at a larger size. This makes image galleries particularly suitable for portfolios and product showcases, or in any other scenario where images need to be presented as collections organized around a common theme.

Although many different types of image gallery design are possible, probably the most common forms are the thumbnail grid, mosaic-style layout, and the masonry gallery; this latter design so called for its resemblance to regular brickwork or tiling. Other more advanced image galleries may also permit the viewing of images as a slideshow, scrolling collection, or carousel, before returning the user to the main grid.

A standard image gallery displays all the images at the same size. Likewise, when clicked to expand, every image in the grid will transition into the Detail View in the same way. 

In Detail View, users are able to display a variety of information about their images. Including the title, date it was taken or saved, and any other metadata they may wish - such as location, aperture, shutter speed, or ISO, if displaying photography.


Why use image galleries?

One of the main advantages of image galleries in grid form is the fact that visual content can be viewed both individually and together as a group. This latter aspect will be especially important for artists and designers who may wish for their images to be seen as a coherent collection just as much as separate works in isolation.

Another important thing to note about grid image galleries is that when the person viewing the portfolio leaves the Detail View of a given image, the view will automatically return to the main screen. This leaves the user free to continue browsing the gallery right where they left off.

Finally, using an image grid can be a great way to handle images so that that they are fully responsive. For example, with images displayed in a grid you can add breakpoints to ensure that your images are always viewed properly on any size of screen or type of device.

How to design an image gallery in Framer

Making an image gallery in Framer is very simple and straightforward. This example focuses on how to create the transition when going from your main screen, containing the image grid, to the Detail View.

First, create a frame to hold all your images in a grid formation. Let’s start with four images, which means four more frames for each Detail View.

Following this, connect each image from the grid to each Detail View and set the transition to Magic Motion. By using Magic Motion here, your layers will transition smoothly and it will show the image is expanding fluidly into the Detail View.

Finally, set a back transition for every image in the Detail View so that users will return to the image gallery once they have finished looking at an image in Detail View.

Resources
  • Talk about this on Discord

Framer

  • Updates
  • Pricing
  • Tutorials
  • Teams
  • Enterprise
  • Blog
  • Motion

Platforms

  • Web
  • macOS
  • iOS
  • Android
  • Figma Importing
  • Sketch Importing
  • User Testing
  • Desktop PrototypingNew

Resources

  • Examples
  • Sessions
  • SpeedrunsNew
  • Packages
  • Volt
  • API
  • State of Prototyping
  • Wireframing Tool
  • Mockup Tool
  • Dictionary

About

  • Loupe
  • Community
  • Company
  • Careers
  • Security

Support

  • Using Framer
  • Accounts
  • Contact

  • Twitter
  • Discord
  • Dribbble

Copyright © 2021 Framer B.V.

  • Security
  • Terms of Service
  • Privacy Statement