Guide
- Effects
- Parallax hover
Guide
- Effects
- Parallax hover
Guide
- Effects
- Parallax hover
How To Create a Parallax Hover Effect in Framer
This step-by-step guide shows you how to create an interactive parallax hover effect in Framer. From picking the right image to splitting it into layers and adding hover motion with code overrides, you'll learn everything you need to craft this eye-catching effect.
Posted by
Nandi
Table of contents
Step 1: Picking the right image
Choose an image that works well for this effect. A good image has:
Something close up in the foreground
A clear middle part (the main focus)
A background that adds depth
For example, pick a photo with blurry leaves up front, a rock and bag in the middle, and a calm scene in the back.
Step 1: Picking the right image
Choose an image that works well for this effect. A good image has:
Something close up in the foreground
A clear middle part (the main focus)
A background that adds depth
For example, pick a photo with blurry leaves up front, a rock and bag in the middle, and a calm scene in the back.
Step 1: Picking the right image
Choose an image that works well for this effect. A good image has:
Something close up in the foreground
A clear middle part (the main focus)
A background that adds depth
For example, pick a photo with blurry leaves up front, a rock and bag in the middle, and a calm scene in the back.
Image with blurry leaves up front, a rock and bag in the middle, and a calm scene in the back.
Image with blurry leaves up front, a rock and bag in the middle, and a calm scene in the back.
Image with blurry leaves up front, a rock and bag in the middle, and a calm scene in the back.
Step 2: Splitting the image into layers
To make the parallax effect, break your image into parts. Here’s how:
Using Pixelmator Pro (or Photoshop):
Open the Image: Start by opening your image in Pixelmator Pro or Photoshop.
Duplicate and Mask:
Duplicate the image layer and name it "Foreground."
Use the selection tool (press
Qin Pixelmator Pro) to select the foreground elements, like blurry leaves.Refine your selection with tools like "Smart Refine" and apply a mask.
Create the Middle Layer (Focal Point):
Duplicate the original image layer and name it "Focal Point."
Remove the foreground elements from this layer using tools like the Clone or Brush tool.
Select and mask the focal elements, like the rock and bag.
Prepare the Background:
Duplicate the image again and name it "Background."
Remove both the foreground and focal point elements, leaving only the background.
Refine the edges to ensure smooth transitions.
Exporting the layers:
Save each part (Foreground, Focal Point, and Background) as a PNG file. This keeps the transparent areas intact.
Step 2: Splitting the image into layers
To make the parallax effect, break your image into parts. Here’s how:
Using Pixelmator Pro (or Photoshop):
Open the Image: Start by opening your image in Pixelmator Pro or Photoshop.
Duplicate and Mask:
Duplicate the image layer and name it "Foreground."
Use the selection tool (press
Qin Pixelmator Pro) to select the foreground elements, like blurry leaves.Refine your selection with tools like "Smart Refine" and apply a mask.
Create the Middle Layer (Focal Point):
Duplicate the original image layer and name it "Focal Point."
Remove the foreground elements from this layer using tools like the Clone or Brush tool.
Select and mask the focal elements, like the rock and bag.
Prepare the Background:
Duplicate the image again and name it "Background."
Remove both the foreground and focal point elements, leaving only the background.
Refine the edges to ensure smooth transitions.
Exporting the layers:
Save each part (Foreground, Focal Point, and Background) as a PNG file. This keeps the transparent areas intact.
Step 2: Splitting the image into layers
To make the parallax effect, break your image into parts. Here’s how:
Using Pixelmator Pro (or Photoshop):
Open the Image: Start by opening your image in Pixelmator Pro or Photoshop.
Duplicate and Mask:
Duplicate the image layer and name it "Foreground."
Use the selection tool (press
Qin Pixelmator Pro) to select the foreground elements, like blurry leaves.Refine your selection with tools like "Smart Refine" and apply a mask.
Create the Middle Layer (Focal Point):
Duplicate the original image layer and name it "Focal Point."
Remove the foreground elements from this layer using tools like the Clone or Brush tool.
Select and mask the focal elements, like the rock and bag.
Prepare the Background:
Duplicate the image again and name it "Background."
Remove both the foreground and focal point elements, leaving only the background.
Refine the edges to ensure smooth transitions.
Exporting the layers:
Save each part (Foreground, Focal Point, and Background) as a PNG file. This keeps the transparent areas intact.
Step 3: Bringing the layers into Framer
Upload to Framer: Drag your PNG files into Framer.
Arrange the layers:
Stack the layers in order: Foreground on top, Background at the bottom.
Group them in a frame and name it "Container."
Set up the frame:
Make the frame fill the screen width and height by setting width to "Fill" and height to "100vh."
Step 4: Adding the hover effect
Parallax works by making layers move at different speeds. Here’s how to add that:
Using code overrides:
Here’s the link to the Parallax Hover interaction code override that I made. You’ll need to grab this now.
By applying the override to several elements with differing intensities. The elements in the foreground will move more rapidly, while those in the background move more slowly.
The code override includes three pre-defined intensity levels.
Step 3: Bringing the layers into Framer
Upload to Framer: Drag your PNG files into Framer.
Arrange the layers:
Stack the layers in order: Foreground on top, Background at the bottom.
Group them in a frame and name it "Container."
Set up the frame:
Make the frame fill the screen width and height by setting width to "Fill" and height to "100vh."
Step 4: Adding the hover effect
Parallax works by making layers move at different speeds. Here’s how to add that:
Using code overrides:
Here’s the link to the Parallax Hover interaction code override that I made. You’ll need to grab this now.
By applying the override to several elements with differing intensities. The elements in the foreground will move more rapidly, while those in the background move more slowly.
The code override includes three pre-defined intensity levels.
Step 3: Bringing the layers into Framer
Upload to Framer: Drag your PNG files into Framer.
Arrange the layers:
Stack the layers in order: Foreground on top, Background at the bottom.
Group them in a frame and name it "Container."
Set up the frame:
Make the frame fill the screen width and height by setting width to "Fill" and height to "100vh."
Step 4: Adding the hover effect
Parallax works by making layers move at different speeds. Here’s how to add that:
Using code overrides:
Here’s the link to the Parallax Hover interaction code override that I made. You’ll need to grab this now.
By applying the override to several elements with differing intensities. The elements in the foreground will move more rapidly, while those in the background move more slowly.
The code override includes three pre-defined intensity levels.
Look override intensities.
Look override intensities.
Look override intensities.
Step 5: Test and tweak
Preview your project in Framer. Hover over the image and watch the layers move. Adjust the intensity values if needed to make the effect look just right.
Wrapping Up
This parallax hover effect can work really well for a portfolio, hero section, or product showcase. Try different images and layer setups to make it unique.
And that’s it! Now you know how to create a parallax hover effect in Framer.
All the best mate.
Step 5: Test and tweak
Preview your project in Framer. Hover over the image and watch the layers move. Adjust the intensity values if needed to make the effect look just right.
Wrapping Up
This parallax hover effect can work really well for a portfolio, hero section, or product showcase. Try different images and layer setups to make it unique.
And that’s it! Now you know how to create a parallax hover effect in Framer.
All the best mate.
Step 5: Test and tweak
Preview your project in Framer. Hover over the image and watch the layers move. Adjust the intensity values if needed to make the effect look just right.
Wrapping Up
This parallax hover effect can work really well for a portfolio, hero section, or product showcase. Try different images and layer setups to make it unique.
And that’s it! Now you know how to create a parallax hover effect in Framer.
All the best mate.
