menu
Channels
Team
Posts
Chat
Members
Info
Show previous messages

March 24, 2020 at 9:51pm
Hey, I'm trying to understand how to chain animations together in a useSpring hook. There is a large delay between the animations taking place and I understand that is because the animation is still technically executing, just very minutely. I also have found the clamp: true and precision: 0.1 config, but I would really like the "over-animation" that comes with config.wobble which clamp: true eliminates. What is the best way to ensure a quick transition between animations? I am attempting to translate a div up and down 200px. Any ideas would be greatly appreciated.
  • reply
  • like

March 25, 2020 at 11:51am
Are there any performance benefits to using the render-props version? Saw some docs about the native prop
  • reply
  • like

April 4, 2020 at 6:02pm
Been using v9.0.0-canary.808.17.55c5691 for the last month β€” it's taken me that long to somewhat wrap my head around the new useTransition. πŸ˜…
What needs to be better explained:
What is an "item"? When do we need to use a key? When should we or should we not expire?
Edited
  • reply
  • like
Might want to include a link to the demos in #809 β€” finally tracking that down helped clear some things up for me.
  • reply
  • like
Also, what can we do to get v9 released?
  • reply
  • like

April 5, 2020 at 1:07pm
Has anyone tried using "View Pager" with react-router? (https://www.react-spring.io/docs/hooks/use-springs)
  • reply
  • like

April 10, 2020 at 7:04pm
Hi guys dose anyone have experience using Frontity?
  • reply
  • like
Hi guys dose anyone have experience using Frontity?
Negative, but what's up? DM me!
Edited
  • reply
  • like

April 13, 2020 at 11:58am
  • reply
  • like
Hey everybody, Did anyone experience an issue when transitioning between routes with different hight of the page? what happens is that when I transition from higher component to lower one - there's a blank white part on the bottom of the page during the animation.
  • reply
  • like

May 1, 2020 at 10:45pm
Hi, does react-spring use react-native-reanimated under the hood in react-native ?
  • reply
  • like

May 5, 2020 at 5:32pm
Hello everyone. Has anyone done inertial scrolling using react spring ?
Edited
  • reply
  • like

May 6, 2020 at 3:37pm
How do we set transformOrigin in react-spring. in the example i am trying to make the transition happen from bottom right and added on useSpring and through css using transform-origin. but it's not working. codesandbox link here
  • reply
  • like
How do we set transformOrigin in react-spring. in the example i am trying to make the transition happen from bottom right and added on useSpring and through css using transform-origin. but it's not working. codesandbox link here
Hey Ashrith,
You are setting the transformOrigin in the root of the properties object. Implicitly it becomes part of where you animate to.
So you are trying to animate to transformOrigin: 'bottom right which doesn't do anything.
You can solve this by telling useSpring to animate from transformOrigin: 'bottom right, like so:
const styles = useSpring({
backgroundColor: "red",
width: show ? "100%" : "0%",
opacity: show ? 1 : 0,
height: show ? "100%" : "0%",
from: { transformOrigin: "bottom right" }
});
  • reply
  • like
Hey Ashrith,
You are setting the transformOrigin in the root of the properties object. Implicitly it becomes part of where you animate to.
So you are trying to animate to transformOrigin: 'bottom right which doesn't do anything.
You can solve this by telling useSpring to animate from transformOrigin: 'bottom right, like so:
const styles = useSpring({
backgroundColor: "red",
width: show ? "100%" : "0%",
opacity: show ? 1 : 0,
height: show ? "100%" : "0%",
from: { transformOrigin: "bottom right" }
});
Hey Joost, Thanks for quick reply, I tried your solution of adding transformOrigin using from property and also tried using set function to update the property and as well did it through css. And also added property directly to style property of a html element. nothing is working.
  • reply
  • like
Hi,
Yah I see what you mean. It is because you are animating height & width (missed that before), which is not a transformation. This means that transform-origin has no effect. This is not related to react-spring, but how CSS works.
So, if you want to make your transition appear from bottom right, you should use transform: scale().
const styles = useSpring({
backgroundColor: "red",
transform: `scale(${show ? 1: 0})`,
opacity: show ? 1 : 0,
from: { transformOrigin: "right bottom" }
});
Hope this helpsπŸ˜€
PS, animating only transforms and opacity results in a more smooth/performant animation, so win-win in this case.
like-fill
1
  • reply
  • like
Hi,
Yah I see what you mean. It is because you are animating height & width (missed that before), which is not a transformation. This means that transform-origin has no effect. This is not related to react-spring, but how CSS works.
So, if you want to make your transition appear from bottom right, you should use transform: scale().
const styles = useSpring({
backgroundColor: "red",
transform: `scale(${show ? 1: 0})`,
opacity: show ? 1 : 0,
from: { transformOrigin: "right bottom" }
});
Hope this helpsπŸ˜€
PS, animating only transforms and opacity results in a more smooth/performant animation, so win-win in this case.
Hi, Thanks a lot for the reply. I understood my mistake. It helped me a lot. 😊😊 πŸ’ƒπŸ’ƒ
like-fill
1
  • reply
  • like

May 16, 2020 at 9:54am
Hi, don't know if this is correctly place to ask - I'm trying to using window.scrollTo with useSpring
  • reply
  • like
I saw the issue on github which points me to using onFrame to directly manipulate scrollTo
  • reply
  • like
however it seems that it doesn't work - the props onFrame is not being passed into the useSpring at all
  • reply
  • like
onStart / onEnded seems to be doing alright
  • reply
  • like

June 18, 2020 at 8:28pm
Hi folks, new to the react-spring community. I'm trying to understand if it is possible (and how to do it if it is) to animate the width of a button as the content inside of it changes. For example, I have a button component <button>test dynamic content</button> and I want to have the width animate when the content inside the button changes to <button>Loading...</button>
Edited
  • reply
  • like
I've tried calculating the button width, but can't figure out how to keep track of previousWidth and newWidth and have spring animate between the two
  • reply
  • like

June 21, 2020 at 2:25pm
Hi, How do I avoid the delay while looping the values?
const { xy }: any = useSpring(
{
config: config.gentle,
from: { xy: [1,1] },
to: async (next: any) => {
let xy = [1, 1];
let velocityX = 50;
let velocityY = 25;
while(true){
if(xy[0] >= 500) velocityX = -velocityX;
if(xy[1] >= 500) velocityY = -velocityY;
if(xy[0] <= 0) velocityX = -velocityX;
if(xy[1] <= 0) velocityY = -velocityY;
xy = [xy[0] + velocityX, xy[1] + velocityY];
await next({ xy: [xy[0], xy[1]] });
}
},
}
);
return (
<div>
<animated.svg style={{ transform: xy.interpolate(trans)}}>
<circle cx="60" cy="60" r="50" fill="green" />
</animated.svg>
</div>
)
  • reply
  • like

June 23, 2020 at 1:58pm
Hello friends! Please help me understand: I have an animated element and there is a number in it. I want to animate a number, every time it changes, without starting the parent animation. I have prepared a sandbox, please help me.codesandbox
  • reply
  • like