react-parallax-tilt
react-parallax-tilt copied to clipboard
No glare effect outside of target when track on window is enabled
Description
The glare effect will not show with trackOnWindow enabled, until the user hover over the tilt card.
This is even reproduceable from your own demo.
Link to Reproduction - Please provide demo in online code editor CodeSandbox or similar. - Issues without a reproduction link are likely to stall.
https://mkosir.github.io/react-parallax-tilt/?path=/story/react-parallax-tilt--track-on-window
Steps to reproduce
- Create
<Tilt>withglareEnable={true}andtrackOnWindow={true}. - Refresh the window, position your cursor outside of targeted
Tiltcard. - Hover outside of
Tiltcard, you will notice that the glare effect is not present. - Hover over the
Tiltcard, and then hover outside ofTiltcard again, this time you will notice the glare effect.
Expected behavior
Glare effect should be present at all time when track on window is enabled.
Code snippets
import React from 'react';
import Tilt from 'index';
import './TrackOnWindow.demozap.css';
const TrackOnWindow = () => (
<Tilt
className="background-stripes track-on-window"
perspective={500}
glareEnable={true}
glareMaxOpacity={0.75}
glarePosition="all"
scale={1.02}
trackOnWindow={true}
>
<div className="inner-element">
<div>React</div>
<div>Parallax Tilt</div>
<div>👀</div>
</div>
</Tilt>
);
export default TrackOnWindow;
React Parallax Tilt Version
1.7.246
Browser
All browsers.
Operating System
- [X] macOS
- [X] Windows
- [X] Linux
Additional Information
No response