Overview

The Perspective Hover component is used to give any frame a 3D effect while hovering over it. It uses the react-tilt package built by jonathandion.

Usage

To apply the hover effect, drag the component onto the canvas, go to the properties panel and select a frame in the tilt element property. You can also connect the component to any frame with the frame connector.

Properties

• Tilt Element Is used to select the frame
• Tile max tilt rotation (degrees)
• Perspective Transform perspective, the lower the more extreme the tilt gets.
• Scale Increases size on hover (e.g. 1.5 = 150%)
• Reset If the tilt effect has to be reset on exit.
• Direction Changes the tilt direction towards or away from mouse.
• Axis Pick the axis to remain enabled.

---

Parallax

To create a parallax effect we can utilize overrides on any inner elements in the connected frame. Add the code below to the override file.

export function E100(): Override {
    return {
        z: 100,
    }
}

Adjust Parallax Level

To change elevation of element for a more dramatic effect update the number

z: 30, // Closer
z: 120, // Further

---

Questions

Contact me via Twitter @chasturansky

Bugs or Feature Requests

To help improve this components, report bugs, or ask for new features I build for the Framer X, feel free to reach out directly through my website.

Component Request

Need a component? Feel free to reachout through my website and I would be happy to help you with component ideas.