Creating an Image Stagger Animation in Webflow

John
August 18, 2022

Clone the interaction for free here: https://webflow.grsm.io/interaction?interaction=webdev-for-you-interaction-156.

Adding hover effects can be a lot of fun and engaging! In this article I outline how to create a unique image stagger animation on hover in Webflow without a single line of code.

Step 1: Add a div block

  • Add a div block and name it “image wrapper.”
  • Set the width to 300px and the height to 500px.
  • Set the overflow property to Hidden.
  • Set the position to Relative.
  • Add a border-radius of 300px to create the vertical pill shape.

Step 2: Add the div block for the image

  • Add a div block and name it “image-1.”
  • Set the position to Absolute and Full to fill the “image-wrapper” parent element.
  • Set the z-index to 0.
  • Add a background image.

Step 3: Duplicate the image 4 times

  • Select “image-1” and copy and paste 3 times so there are a total of 4 image div blocks.
  • For each consecutive image div block click on the class name and select “duplicate.” Then change the class name in a sequence so the second div block would be “image-2,” the third “image-3,” and the fourth “image-4.”
  • For “image-2” change the z-index to 1.
  • For “image-3” change the z-index to 2.
  • For “image-4” change the z-index to 3.
  • Those will ensure that the images are stacked correctly for the effect.

Step 4: Create Hover In Interaction

  • Select the “image-wrapper” and go to interactions in Webflow. Create a new hover interaction.
  • Select “image-1” and give it a scale of 1.3 and set it to the initial state.
  • Select “image-4” and set the scale to 0. Do the same for “image-3” and “image-2.”
  • For “image-1” set the scale to 0.
  • Drag and drop the 4 scale interactions on top of each other to start them at the same time and set the duration to .5s and the easing to “Ease In Out.”
  • For “image-4” set the delay to 0.
  • For “image-3” set the delay to .1.
  • For “image-2” set the delay to .2.
  • For “image-1” set the delay to .3.

Step 5: Create Hover Out Interaction/Reset the Animation

  • Duplicate the hover in interaction for the “On hover out” animation.
  • Delete the “image-1” initial state animation.
  • Set the scale of “image-1” back to 1.3.
  • Set the scale of image 2,3, and 4 back to 1.
  • Set the delay of “image-1” to 0.
  • Set the delay of “image-2” to .1.
  • Set the delay of “image-3” to .2.
  • Set the delay of “image-4” to .3.
  • The animation will now play in reverse when you hover out.

Done! That’s it! You have now created a unique stagger hover animation on hover in Webflow!

To get started with Webflow click here: https://webflow.grsm.io/get-started.

As a photographer, it’s important to get the visuals right while establishing your online presence. Having a unique and professional portfolio will make you stand out to potential clients. The only problem? Most website builders out there offer cookie-cutter options — making lots of portfolios look the same.

That’s where a platform like Webflow comes to play. With Webflow you can either design and build a website from the ground up (without writing code) or start with a template that you can customize every aspect of. From unique animations and interactions to web app-like features, you have the opportunity to make your photography portfolio site stand out from the rest.

So, we put together a few photography portfolio websites that you can use yourself — whether you want to keep them the way they are or completely customize them to your liking.

12 photography portfolio websites to showcase your work

Here are 12 photography portfolio templates you can use with Webflow to create your own personal platform for showing off your work.

1. Jasmine