mkosir / react-parallax-tilt Goto Github PK

Description

Cannot read properties of null (reading 'style')
TypeError: Cannot read properties of null (reading 'style')

Link to Reproduction - Please provide demo in online code editor CodeSandbox or similar. - Issues without a reproduction link are likely to stall.

no

Steps to reproduce

1. Go to '...'
2. Click on '...'
3. Scroll down to '...'
4. See error

Expected behavior

click

Code snippets

<Tilt reset={false}>
  <MyComponent />
</Tilt>

React Parallax Tilt Version

1.7.163

Browser

No response

Operating System

• macOS
• Windows
• Linux

Additional Information

No response

Description

Installing this library on node versions greater than 16 produces the following error:

The engine "node" is incompatible with this module. Expected version "16.x".

Id love to integrate this library in my app, but this is preventing that.

Link to Reproduction

n/a

Steps to reproduce

No response

Expected behavior

Install

Code snippets

No response

React Parallax Tilt Version

1.7.58

Browser

No response

Operating System

• macOS
• Windows
• Linux

Additional Information

No response

🐛 Issue/Bug Report Template

Describe the bug
When devices don't support gyroscope/device orientation, there's an error in the console. It'd be nice to try/catch this and instead log a warning.

To Reproduce
Steps to reproduce the behavior:

1. Launch a parallax site with gyroscope enabled
2. Open developer console
3. See error

Expected behavior
Instead of logging an error, log as a warning in development mode (and maybe don't log anything in production?)

Link to demo (highly encouraged)

• http://hacktj.org/2021/ (in around a month, we're going to redo the site so the error will probably go away HackTJ/2021@13eb1f6)
• https://mkosir.github.io/react-parallax-tilt/?path=/story/react-parallax-tilt--gyroscope-tilt (ideally, eventually this will get fixed so the error will go away)

Code snippets
If applicable, add code samples to help explain your problem.

Environment

• Browser: Safari 14.0 (16610.1.15.51.2) on macOS Big Sur (10.16; not Apple Silicon)
• Version: "react-parallax-tilt": 1.4.56

Additional context
n/a

🐛 Custom transitionSpeed value cancelled after certain time or mousevents

Describe the bug
My custom set transition speed value is cancelled/bypassed after certain time or maybe (?) mousevents. It very noticeably switches from being smoothed to instantly responding. Upon moving the cursor outside and then inside the element the issue is (temporarily) resolved.

To Reproduce
Steps to reproduce the behavior:

1. Create a <Tilt /> component
2. Set a custom transitionSpeed prop
3. Wiggle your mouse around for a few seconds (while staying within the frame)
4. The transition speed is now instant
5. Move the cursor outside the component, then back in
6. Works again, but then issue repeats when you stay inside again

Expected behavior
I expect the transition speed to stay slow for as long as the prop is not unset

Link to demo (highly encouraged)
CodeSandbox demo.

Code snippets
If applicable, add code samples to help explain your problem.

Environment

• Browser: Chrome 85.0.4183.121 on Windows 10
• Version: "react-parallax-tilt": tested 1.0.13 and (currently latest) 1.4.65

Additional context
I expect it has to do with specifically higher values for transition speed, but it might also be an effect of the change being more noticeable.

🐛 Issue/Bug Report Template

Describe the bug

Thanks for this amazing package!

To Reproduce
Steps to reproduce the behavior:

1. Go down to the
2. refresh site
3. The tilt doesn't comply with reset or tiltAngleXInitial, tiltAngleYInitial

Expected behavior
A clear and concise description of what you expected to happen.

Link to demo (highly encouraged)

Reproducible example coming soon!

Code snippets

Environment

Chrome

Additional context
Add any other context about the problem here.

Description

I will admit I am not positive this is a bug. I may be using the library wrong, or messing up the DOM/css in some way. Either way, I would love some assistance to get this working.

For my project, I am trying to create a tilting card very similar to the samples in storybook. However my cards will be using a setup (from Nextjs). I also want a parallax badge floating in the corner. If I have the parallax badge enabled, the Link/a element becomes unclickable despite the cursor changing as when hovering over a link.

I built a minimal reproduction. It isn't super minimal, but it was the best I could do.

In my reproduction, the top tilter is the one showing the bug. The bottom one has transform-style-3d class removed. That is a utility class from a tailwind plugin that generates 3d transformation classes.

Link to Reproduction

CodeSandbox reproduction

Steps to reproduce

Create a tilting element with parallax where the first level of the parallax stack is supposed to be interactive.

Expected behavior

The tag should be clickable

Code snippets

// Broken
<Tilt className="transform-style-3d w-64" perspective={500}>
          <div className="absolute z-20 bg-gray aspect-square transform perspective-200 translate-z-5">Sample badge</div>
          <div className="relative aspect-square cursor-pointer overflow-hidden rounded-3xl">
            <Link href="https://google.com">
              <Image
                src="https://www.google.com/logos/doodles/2024/paris-games-sailing-6753651837110529-la202124.gif"
                alt="Audiobook cover image"
                fill={true}
              />
            </Link>
          </div>
        </Tilt>

// Working
        <Tilt className="w-64" perspective={500}>
          <div className="absolute z-20 bg-gray aspect-square transform perspective-200 translate-z-5">Sample badge</div>
          <div className="relative aspect-square cursor-pointer overflow-hidden rounded-3xl">
            <Link href="https://google.com">
              <Image
                src="https://www.google.com/logos/doodles/2024/paris-games-sailing-6753651837110529-la202124.gif"
                alt="Audiobook cover image"
                fill={true}
              />
            </Link>
          </div>
        </Tilt>

React Parallax Tilt Version

1.7.234

Browser

Arc (chromium based)

Operating System

• macOS
• Windows
• Linux

Additional Information

Thanks in advance for any assistance!

🐛 Component dropping effects after animating in

After animating a Tilt component in based on X or Y values, the X and Y axis for the tilt component seems to be locked and reversed in a way.

I've made a test sandbox here:
https://codesandbox.io/s/tender-pasteur-f9lmc

Expected behavior
There's 3 tilt components labelled. The middle component labelled 'without motion' should be the effect for the 'with motion', but theres some strange behaviour going on. There's no issue when you add the event to the whole window though, so it is most likely something to do with the animating I believe. All the components have the same props and everything too.

Environment

• Browser: Chrome / Mac
• Version: "react-parallax-tilt": 1.4.70

❤️ this package btw!
TIA

🐛 Issue/Bug Report Template

Describe the bug
Glare seems not it should

To Reproduce

<Tilt
  style={{
    background: "black",
    width: 380,
    height: 180
  }}
  perspective={500}
  glareEnable={true}
  glareMaxOpacity={0.5}
  scale={0.9}
>
    <div>hello</div>
</Tilt>

Expected behavior
A clear and concise description of what you expected to happen.
I guess it shouldn't have a black spot down there. if make it a square glare seem fine.

Link to demo (required)
Please provide demo in online code editor CodeSandbox or similar.
https://codesandbox.io/s/cranky-haze-9mo54?file=/src/App.js

Issues without a reproduction link are likely to stall.

Code snippets
If applicable, add code samples to help explain your problem.

<>
  <Tilt
    style={{
      background: "black",
      width: 380,
      height: 180
    }}
    perspective={500}
    glareEnable={true}
    glareMaxOpacity={1}
    scale={0.9}
  >
    <div
      style={{
        color: "white"
      }}
    >
      RECTANGLE'S GLARE IS SEEM NOT RIGHT
    </div>
  </Tilt>
  <br />
  <Tilt
    style={{
      background: "black ",
      width: 380,
      height: 380
    }}
    perspective={500}
    glareEnable={true}
    glareMaxOpacity={1}
    scale={0.9}
  >
    <div
      style={{
        color: "white"
      }}
    >
      SQUARE'S GLARE IS FINE
    </div>
  </Tilt>
</>

Environment

• Browser: Chrome
• Version: "react-parallax-tilt": 1.4.66
• ...

Additional context
Add any other context about the problem here.

This is great!

Is it possible for it to support full page listening? ala https://github.com/micku7zu/vanilla-tilt.js

🐛 Random transform rotate position on re-render

I used my tilt component on a child component, when I change any state value from the parent component then my tilt move some random position.

By default the style value of the tilt element is transform: perspective(1000px) rotateX(0deg) rotateY(0deg) scale3d(1, 1, 1)

but once the component re-render then the tilt element's style value is transform: perspective(1000px) rotateX(-20deg) rotateY(20deg) scale3d(1, 1, 1) by default

App.js (Parent component)

import React from 'react';
import SideMenu from "./Components/SideMenu";

function App() {
  const [test, setTest] = React.useState(0);
  setTimeout(()=>{
     setTest(test + 1);
  }, 2000);
  return (
    <>
      <SideMenu />
    </>
  );
}
export default App;

SideMenu.js (Child component)

import React from "react";
import Tilt from 'react-parallax-tilt';
import "./SideMenu.scss";

function SideMenu() {

  const [tilt, setTilt] = React.useState({
    className: 'menu',
    glareEnable: true,
    scale: 1.05,
    glareMaxOpacity: 0.05,
    glareColor: 'white',
    glarePosition: 'all'
  });

  return <aside>
    <nav>
      <Tilt {...tilt} >
        <a href="/" className="link">
          <i className="mdi mdi-spider-web" />
          <span>Dashboard</span>
        </a>
      </Tilt>
    </nav>
  </aside>
}

export default SideMenu;

SCSS code

nav {
    display: flex;
    flex-wrap: wrap;
    .menu{
      position: relative;
      width: 50%;
      height: 120px;
      border-radius: 6px 6px 0 0;
      transform-style: preserve-3d;
      i {
        transform: translateZ(20px);
        display: block;
        font-size: 36px;
      }
      span{
        transform: translateZ(30px);
        font-weight: 100;
      }
      .link {
        width: 100%;
        height: 120px;
        color: #ffffff;
        text-decoration: none;
        text-align: center;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        position: relative;
        z-index: 1;
      }
    }

🐛 Issue/Bug Report Template

Describe the bug
Turning on the glare prevents clicks on nested components from triggering.

To Reproduce
Steps to reproduce the behavior:

<Tilt glareEnable>
  <div
    style={{backgroundColor: "gray", height: 100}}
    onClick={() => alert("hello")}
  />
</Tilt>

You can fix this with:

.glare-wrapper { pointer-events: none; }

Expected behavior
Should get an alert saying hello

Link to demo (highly encouraged)
See above. Easily reproducible.

• Browser: Chrome
• Version: "react-parallax-tilt": 1.4.66
• ...

Description

Could not find a declaration file for module 'react-parallax-tilt'. 'C:/Users/alany411/Documents/GitHub/react-parallax-tilt-bug/node_modules/react-parallax-tilt/dist/index.umd.js'

I checked out the package in the node_modules folder and noticed that the types were in a nested folder named dist, but in the package.json, it was "types": "./dist/types/index.d.ts",

You can also browse the files through RunKit and see the same:

Link to Reproduction

Fresh repo:
https://github.com/alany411/react-parallax-tilt-bug

RunKit:
https://npm.runkit.com/react-parallax-tilt

Steps to reproduce

1. Create new TypeScript project
2. Install react-parallax-tilt
3. Import Tilt from react-parallax-tilt

Expected behavior

Types to be declared.

Code snippets

No response

React Parallax Tilt Version

1.7.16

Browser

No response

Operating System

• macOS
• Windows
• Linux

Additional Information

No response

🐛 Issue/Bug Report Template

Describe the bug
If using rounded edges for the component and there is a dark background, the tilt component doesn't honour the rounded edges.

To Reproduce
Steps to reproduce the behavior:

Exactly as in the Glare demo here: https://mkosir.github.io/react-parallax-tilt/?path=/story/react-parallax-tilt--glare-effect, but with a dark background.

import React from 'react';

import Tilt from '../../src';
import DefaultComponent from '../_DefaultComponent/DefaultComponent';

const GlareEffect = () => (
  <Tilt glareEnable={true} glareMaxOpacity={0.8} glareColor="#ffffff" glarePosition="bottom">
    <div style={{ background: black }}>
      <DefaultComponent />
    </div>
  </Tilt>
);

export default GlareEffect;

Expected behavior
It would be nice to be able to pass props down to the Glare Element (unless this is already possible and not clearly documented?). Or do you suggest just using CSS to override the glare-wrapper class?

Link to demo (required)
https://codesandbox.io/s/recursing-perlman-c09t3?fontsize=14&hidenavigation=1&theme=dark

Issues without a reproduction link are likely to stall.

Code snippets
As above or Codesandbox link.

Environment

• Browser: Chrome
• Version: "react-parallax-tilt":
• ...

Additional context
Add any other context about the problem here.

Gyroscope is not working in safari , version 13.
I even opened this demo in safari mobile.
"https://mkosir.github.io/react-parallax-tilt/?path=/story/react-parallax-tilt--gyroscope-tilt",
even this is not working either.
can you please help me to fix this issue.
I am using iphone X for this.

Hi,

I keep getting this error when my app hot reloads after a change.
Here is my code:

const { loading, error, data } = useFetch(getBannersAPI, fetchId);
let content;
	if (loading) {
		content = <Loading />;
	} else if (error) {
		content = <Error>{error.message}</Error>;
	} else if (data?.data?.rows?.length > 0) {
		content = (
			<div className='banner-container'>
				{data?.data?.rows.map(({ id, name, image_url }) => (
					<Card key={id} className='bg-dark'>
						<Tilt scale={0.97}>
							<Card.Img variant='top' src={image_url} />
						</Tilt>
						<Card.Body className='pb-0 text-light'>
							<Card.Title className='d-flex justify-content-between'>
								<strong>{name}</strong>
								<section>
									<IconButton
										title='Edit Banner'
										onClick={() => toggleSaveBannerModal({ id, name, image_url })}
									>
										<InlineIcon icon={bxsEditAlt} color='cornflowerblue' />
									</IconButton>

									<IconButton title='Delete Banner' onClick={() => deleteBannerHandler(id)}>
										<InlineIcon icon={delete24Filled} color='firebrick' />
									</IconButton>
								</section>
							</Card.Title>
						</Card.Body>
					</Card>
				))}
			</div>
		);
	} else {
		content = <NoData>No Banner Found!</NoData>;
	}

How to fix this issue?

🐛 Issue/Bug Report Template

Describe the bug
If glareReverse is enabled it won't work. The glare would never show. If I change the glarePosition to "bottom" or "top", as long as it is not set to "all", the glare would come back but it is not reversed still.

Expected behavior
If you hover on the top-right, the glare should be at the bottom areas.

Code snippets
Inside React app...

return (
    <div className="wrapper">
        <Tilt glareReverse glareEnable glareMaxOpacity={0.4} glareColor="#ffffff" glarePosition="all">
            <img src="./testImage.jpg" />
        </Tilt>
    </div>
  );

Inside the scss file...

.wrapper {
  padding: 1px;
  width: 90%;
  height: auto;
  margin: 0 auto;
  border-radius: 10px;

  img {
    width: 100%;
    border-radius: 9px
  }
}

Environment

• Browser: Chrome
• Version: "react-parallax-tilt": 1.4.66
• ...

Additional context
Add any other context about the problem here.

🐛 Issue/Bug Report Template

Describe the bug
Multiple Tilts won't work at the same time. Only the most recently instanced will work.

To Reproduce
See my CSB here: https://codesandbox.io/s/parallax-tests-h584m

Expected behavior
Both elements on the screen are configured identically other than image and text. They should behave the same.

• Browser:
• Version: "react-parallax-tilt":
• ...

Hi,

Thanks so much for this package! I am trying to figure out how do I have an initial position tilted to provide affordance to the user? I had a look at Storybook but can't seem to figure it out.

Here's the context of where I want the image to be tilted: https://ajmalafif.com/projects/

Description

In Next.js any use of tilt causes an error (seen below):
TypeError: Cannot read properties of undefined (reading 'PureComponent')
at e (file:///vercel/path0/node_modules/react-parallax-tilt/dist/index.js:1:4112)
at file:///vercel/path0/node_modules/react-parallax-tilt/dist/index.js:1:10860
at ModuleJob.run (node:internal/modules/esm/module_job:194:25)

Build error occurred
Error: Failed to collect page data for /
at /vercel/path0/node_modules/next/dist/build/utils.js:1220:15 {
type: 'Error'

Link to Reproduction - Please provide demo in online code editor CodeSandbox or similar. - Issues without a reproduction link are likely to stall.

N/A

Steps to reproduce

1. Make a next.js project
2. Import react parallax tilt
3. Run npx next build
4. Get error

Expected behavior

ESLint to pass

React Parallax Tilt Version

1.7.185