menu
Channels
Team
Posts
Chat
Members
Info
Show previous messages

April 4, 2020 at 6:08pm
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
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

July 31, 2020 at 5:28pm
Hi I am using the Parallax and Parallax Layer. I was just wonder is there a way to have one of the parralax layers fixed similar to the behavior of position: fixed?
  • reply
  • like
<ParallaxLayer offset={1.3} speed={-0.3} style={{ pointerEvents: 'none' } fixed={true}> <img src={url('satellite4')} style={{ width: '15%', marginLeft: '70%' }} /> </ParallaxLayer>
<ParallaxLayer offset={1} speed={0.8} style={{ opacity: 0.1 }}>
<img src={url('cloud')} style={{ display: 'block', width: '20%', marginLeft: '55%' }} />
<img src={url('cloud')} style={{ display: 'block', width: '10%', marginLeft: '15%' }} />
</ParallaxLayer>
<ParallaxLayer offset={1.75} speed={0.5} style={{ opacity: 0.1 } fixed={true}}>
<img src={url('cloud')} style={{ display: 'block', width: '20%', marginLeft: '70%' }} />
<img src={url('cloud')} style={{ display: 'block', width: '20%', marginLeft: '40%' }} />
</ParallaxLayer>
  • reply
  • like

August 24, 2020 at 4:55pm
is the line "return transitions.map(({ item, props, key }) =>" a typo? isn't the order supposed to be item, key props?
  • reply
  • like