I am designing an app in react and I am trying to implement a hover effect, I am using onMouseOver in an element, but i discovered that when that onMouseOver is triggered, it "rerenders" all the code of my component, which means that it declares again a vector that I declared as constant and ruins my functionality. Probably I am not understanding correctly react as I am noob on it. Do you know what could be the reason?
Thanks in advance :)
Related
I try to recreate this effect with curtains-react but I can not find a shader that corresponds, and at the same time make the uniforms work ... If someone can give a lead, an article or an example with curtains-react, it would be of great help to me!
https://www.haritos.co/
It's a infinity draggable slider and when you click on a image, you access to the project, is the raison why I use curtains-react.
I also wanted to use curtains-js in my project. While browsing I found this codepen which is kind of what you need although the click-through is not implemented.
https://codepen.io/AlainBarrios/pen/bXdzmR
It uses curtains-js instead of curtains-react but I think it should be easly convertable. Put the onRender function in the useCurtainsEvent and add event listeners for the draggable events.
useCurtainsEvent("onRender", (curtains) => {})
I would first make a draggable list in react and then add each event of the example one by one. Just remember that animations like these take a lof of time and will to get right :)
In React Native, I would like to achieve the following outcome (example):
example1 example2
On Long Press of the image (or touchableOpacity), I hope to display an overlay view of some extra information (could be images or text). The information disappears when the finger leaves the screen. I was thinking if it is something related to overlay view and setState, but I could not find the function where the view only appears during long presses. Is there a way to achieve this? Or is there a module that could provide a solution?
Any help would be appreciated!
If you are using the latest react native version you can use the onPressOut functionality of a pressable component: https://reactnative.dev/docs/pressable.
Trigger the show overlay with the onLongPress (or onPressIn but it's not a good UX) function and then trigger the hide overlay with onPressOut function.
For the overlay I suggest you a cool library like:
https://reactnativeelements.com/docs/tooltip/
I'm working on some sort of 'continuous' animation. Say a div translates from its current location 200px to the right. There's an option to change the distance of translation. While its animating, the user changes from 200px to 400px. The div should still move smoothly until it reaches its final point which is 400px from its previous location. I have done the basic moving animation, however I can't figure out how to make it continues without jumping when the distance changes.
Here's the codesandbox that I'm working on which best illustrates my point above and what I'm struggling with. Any ideas or help would be greatly appreciated. Thanks :))
Edit: Steps to reproduce the jumping problem:
Open the sandbox
Click the 'Toggle' button
Click the 'Add distance' button
While the red div animates, click 'Add distance' button again
And you should see the div jumping
There is probably a way to fix your code so that it works as you want, though I would suggest going in another direction. There are several animation libraries in React that can help you solve this problem. The resulting code is also going to be more portable.
For your specific need, I would suggest using a library called react-move. It is part of the react-tools which provides other cool libraries. I created a CodeSandbox with my take on your problem using react-move.
I only took the transform line for your code, since I wanted to focus on how you could integrate the library into your example.
To create the animation, I imported a component from react-move called Animate. It's the main component of the library. You use this component to wrap a function using the function as child pattern. This function will receive a state object with information regarding the animated element. It also consumes a start, update, enter, and leave function, that represents the state for those actions.
Inside you function as child function is where you define the animation. In our case, we want to translate the Box along its x axis, using the x value provided on the state object.
OBS: On my example the Box returns to the start (x === 0) when its offset value is bigger than the window's width.
I hope it helps.
I have been breaking my head trying to figure out how to accomplish something that I figured would be quite simple (I know...)
Goal is for a very minimal, and reusable modal component that I can animate in some sort of HOC with a trigger button or w/e.
I am creating it using createPortal, and the goal is to have some simple animations be added to on enter/exit of said portal.
I have gotten this to work using GSAP, but ideally I would love for this to go along with SC instead so that I don't have to pull in another animation library.
For the life of me I just cannot get this to work with SC and would love if someone could point me in the right direction.
I have made a sandbox here: https://codesandbox.io/s/r44w9m4o5p using GSAP to run the animations, and it's a bit hacky but it is in the proper direction for what I am going for.
Also, is there a benefit to using react-transition-group over something like https://github.com/react-tools/react-move?
You can use the CSSTransition component instead of Transition. CSSTransition will just toggle approriate class names using given animation timings: .*-enter, .*-enter-active for in-transition and .*-exit, .*-exit-active for out-transition. So you can define all transitions using CSS3 properties with styled-components.
Take a look at my fork: https://codesandbox.io/s/zz95v5103
I've just extended your Modal with transition styles. Note that extending styles requires className property for the component to be extended, so I've added that property to your Modal component.
swipeable navigation
Whats the best approach to make link area swipeable left and right?
Ive failed to find ready to use component that allows to do that.
Ive tried to use React Touch SyntheticEvent and transform translateX to navigation bar, but failed with calculations. So question is what are the ways to achieve that and is there any react components that can help me to make this work?
Maybe you need to have a look at there.
Although it only supports element swipeable up and down, you can refer to the code of how the author implements element swipeable with translate3d.
The main idea of swiper is to calculate the position of the element, and when to start translation. You can record scrollHeight/scrollWidth and offsetHeight/offsetWidth when you start move event, and compare the value of them when the event is end. Then you know where is the element, and you can control the transform of the element as you want.
So far as I know, maybe Iscroll is a good solution for you.