react-parallax-tilt icon indicating copy to clipboard operation
react-parallax-tilt copied to clipboard

No glare effect outside of target when track on window is enabled

Open eesuhn opened this issue 1 year ago • 0 comments

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

  1. Create <Tilt> with glareEnable={true} and trackOnWindow={true}.
  2. Refresh the window, position your cursor outside of targeted Tilt card.
  3. Hover outside of Tilt card, you will notice that the glare effect is not present.
  4. Hover over the Tilt card, and then hover outside of Tilt card 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

eesuhn avatar Oct 15 '24 15:10 eesuhn