Chas Turansky
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.
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.
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,
}
}
To change elevation of element for a more dramatic effect update the number
z: 30, // Closer
z: 120, // Further
Contact me via Twitter @chasturansky
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.
Need a component? Feel free to reachout through my website and I would be happy to help you with component ideas.