universal-tilt-js/react-universal-tilt

🎆 universal-tilt.js implementation for React component

react-universal-tilt's Issues

Tilt doesn't get applied to newly-created elements

I have a page where Universal Tilt is applied to several elements. The tilt animation is applied correctly to all the elements when the DOM is first loaded, but when new elements are loaded dynamically, Universal Tilt doesn't get applied to these new elements. All newly created elements are syntactically identical to the existing ones, including the correct selectors, etc.

Should Universal Tilt be looking for new elements that match the defined selector? If not, is there an efficient way to add Tilt on these new elements, aside from re-initializing the whole plugin?

Export types

scale effect is not smooth

Hello again. Thank you for such a quick fix with the readme before, I've found a new bug now. It seems the scale effect is not working as intended. Scale seems to grow in 2 jerking steps sometimes, and grow larger than intended. I believe it is getting scaled twice in some cases. I think if you set scale to 1.3 for example, that it grows to 1.3x the size and then does it again immediately afterwards. A few times I actually had my item scale a third or fourth time and completely cover the screen.

I seem to get this bug more often when I use scale in conjunction with reverse but I still seem to get it no matter what the case. here is my code to perhaps help recreate the bug. I wish I could fix it myself and submit a fix, but sadly I'm just not skilled enough to read the functions and understand whats happening. I've tried several times, and it's just above my current skill level.

import React, { Component } from 'react';
import './card.css';
import ReactTilt from 'react-universal-tilt';

export default class WishListCard extends Component{

 render(){
	return (
		<div id="card-container">
			<ReactTilt options={{
				reverse: true,
				scale: 1.3,
				shine: true
			}} className="wl-card">
			 	
	 		</ReactTilt>
		 	<ReactTilt>
			 	<div className="wl-card">
			 		
			 	</div>
		 	</ReactTilt>
		 	<ReactTilt>
			 	<div className="wl-card">
			 		
			 	</div>
		 	</ReactTilt>
		</div>
	)
  }
}

and the css

#card-container {
	width: 100%;
	height: 64.9vh;
	display: flex;
	flex-direction: row;
	justify-content: space-around;
}


.wl-card {
	background: white;
	border: 2px solid black;
	border-radius: 10px;
	height: 60vh;
	width: 25vw;
}

Move settings & callback from objects to props

Auto publish on npm

Update alternatives

Add strict types for story Meta args

Auto build Storybook on `master` update

The destroy method is not working.

Ok, first of all I absolutely love this package! Great job developing it! I was looking for something like this for my site. Now I'm still fairly new to react development so I can be missing something obvious but there is an issue using react-router-dom links when react-universal-tilt is active. The linked pages would not load because of this error:

"TypeError: Cannot read property 'destroy' of undefined"

When I reload the page, its fine. I really like this package so any pointers of tips would be deeply appreciated!

Fix husky

Encountering an Issue with working with Typescript

I'm currently facing an issue while trying to install the '@types/react-universal-tilt' package.

Issue: When I attempt to install the package using the following command:

I receive the following error message:

The error message suggests that the package cannot be found or is not available.

I'd greatly appreciate any guidance or assistance you can provide in resolving this issue. If there are alternative steps or solutions I should consider, please let me know.

implementation is unclear

First of all, thanks for the work you've put into this project, it is greatly appreciated.

Let me preface this by saying I am a beginning coder and not very good, so the issue is likely more on my end than it is on yours. My issue is that I can't understand how I am supposed to pass options in the component. I have created my elements and gave have react tilt working, but I can not figure out how to give them reverse or disable y or any of these options because no matter how many times I read it, I can't figure out what the documentation wants me to do.

I have read this section of the readme about 100 times already and I just can't understand how to do it.

<ReactTilt
options={ /* options / }
styles={ / CSS styles / }
className={ / class name(s) / }
tiltChange={ / event output destination */ }
/>

I was hoping you could either
A) make the documentation more clear here, or
B) simply explain to me how to do it, and I will happily edit the documentation myself to make it more clear.

thanks for your time, and hard work.

Update favicon size