Image Grid Reveal Component for Framer

Copy component

Image Grid Reveal Component for Framer

Copy component

Nandi Muzsik

How can I improve Framer Uni?

Let me know if there’s a missing feature or something that could be improved.

Share feedback

Nandi Muzsik

How can I improve Framer Uni?

Let me know if there’s a missing feature or something that could be improved.

Share feedback

Component

Image Grid Reveal Component for Framer

This is a Framer recreation of the image grid reveal effect from Fabio Nobile's website. Feel free to copy this component to your Framer project and add this fun reveal effect to any image on your website.

image of Nandi Muzsik
image of Clement Lionne

Created by

Image Grid Reveal Component for Framer
Image Grid Reveal Component for Framer
Image Grid Reveal Component for Framer

About the resource

The component is designed for flexibility and full customization through its properties.

You can set a "delay," which essentially controls the speed of the image's reveal effect.

Additionally, you can define the "grid size," controlling the size of the rectangles. The higher the number, the smaller the rectangles. If the grid size is greater than 0, the component will display the color specified in the grid color, obscuring the image on the canvas. To see the image, set the grid size to 0, but remember to change it back to a higher value when you publish the site for the animation to work properly.

You can also toggle between "Layer on View" or "On Appear" triggers. Layer on View sparks the reveal when the image enters the viewport, while On Appear instantaneously triggers it on page load.

Lastly, the Grid color should align with the website's background color.

About the resource

The component is designed for flexibility and full customization through its properties.

You can set a "delay," which essentially controls the speed of the image's reveal effect.

Additionally, you can define the "grid size," controlling the size of the rectangles. The higher the number, the smaller the rectangles. If the grid size is greater than 0, the component will display the color specified in the grid color, obscuring the image on the canvas. To see the image, set the grid size to 0, but remember to change it back to a higher value when you publish the site for the animation to work properly.

You can also toggle between "Layer on View" or "On Appear" triggers. Layer on View sparks the reveal when the image enters the viewport, while On Appear instantaneously triggers it on page load.

Lastly, the Grid color should align with the website's background color.

About the resource

The component is designed for flexibility and full customization through its properties.

You can set a "delay," which essentially controls the speed of the image's reveal effect.

Additionally, you can define the "grid size," controlling the size of the rectangles. The higher the number, the smaller the rectangles. If the grid size is greater than 0, the component will display the color specified in the grid color, obscuring the image on the canvas. To see the image, set the grid size to 0, but remember to change it back to a higher value when you publish the site for the animation to work properly.

You can also toggle between "Layer on View" or "On Appear" triggers. Layer on View sparks the reveal when the image enters the viewport, while On Appear instantaneously triggers it on page load.

Lastly, the Grid color should align with the website's background color.

image grid reveal component properties

Image grid reveal component properties.

image grid reveal component properties

Image grid reveal component properties.

image grid reveal component properties

Image grid reveal component properties.

Framer Navigator

Learn the fundamentals of Framer for free.

Build your ideas with ease by learning the basics of website building with Framer.

Nandi portrait's background
Nandi's portrait

Framer Navigator

Learn the fundamentals of Framer for free.

Build your ideas with ease by learning the basics of website building with Framer.

Nandi portrait's background
Nandi's portrait

Framer Navigator

Learn the fundamentals of Framer for free.

Build your ideas with ease by learning the basics of website building with Framer.

Nandi portrait's background
Nandi's portrait

More resources

More resources

  • Interactive navbar with options Framer University, Lessons, and Let's Chat highlighted

    Morphing Navbar Animation in Framer

    Component

    Interactive navbar with options Framer University, Lessons, and Let's Chat highlighted

    Morphing Navbar Animation in Framer

    Component

    Interactive navbar with options Framer University, Lessons, and Let's Chat highlighted

    Morphing Navbar Animation in Framer

    Component

  • Minimalist music player design featuring Lorde's album Melodrama with track progress and cursor interaction

    Music Player Widget Interaction in Framer

    Component

    Minimalist music player design featuring Lorde's album Melodrama with track progress and cursor interaction

    Music Player Widget Interaction in Framer

    Component

    Minimalist music player design featuring Lorde's album Melodrama with track progress and cursor interaction

    Music Player Widget Interaction in Framer

    Component