React-Spring transition not smooth R3F object group #1250
Unanswered
marleykanui
asked this question in
Support
Replies: 0 comments
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
-
I've loaded up some objects and textures I created into a R3F scene, and I'm animating that group with react-spring. I'm toggling the y-axis position of the group as well as the rotation On click. Orbit Control autorotation is on before, during, and after the animation. Trigging the downward animation is acceptable since the model is moving out of camera view, however when toggling the model back up it's original position, it noticeably 'clicks' or "locks" into place at the end of the animation. I've messed with useSpring() config params in order to avoid this, but haven't been able to rid of this side effect, even when setting clamp to false. Any and all help is much appreciated. Thanks in advance.
`// React
import { Suspense, useState } from 'react';
// React Spring
import { useSpring, a } from 'react-spring/three';
// Objects
import Sapling from './2-objects/Sapling';
import MenuOption from './2-objects/MenuOption';
// Controls
import Orbit from './1-controls/Orbit';
import Lights from './1-controls/Lights';
// Data
import { menuData } from './2-objects/MenuData';
// React Types
import { FC } from 'react';
// Component Level Types
import { MenuProps } from './0-types/MenuProps';
import { MenuDataProps } from './0-types/MenuDataProps';
const Menu: FC = ({ clicked, toggleClick }) => {
const [orbitSpeed, setOrbitSpeed] = useState(-1.6);
const { position, rotation }: any = useSpring({
config: {
velocity: 0,
friction: 100,
mass: 7,
clamp: true,
},
position: clicked ? [0, -1.5, 0] : [0, 0.035, 0],
rotation: clicked ? [0, 3, 0] : [0, 0, 0],
});
return (
<a.group position={position} rotation={rotation}>
{menuData.map(
({
id,
name,
ripPosition,
labelPosition,
frontRotation,
backRotation,
ripScale,
labelScale,
}: MenuDataProps) => (
<MenuOption
key={id}
name={name}
link={name}
ripPosition={ripPosition}
labelPosition={labelPosition}
frontRotation={frontRotation}
backRotation={backRotation}
ripScale={ripScale}
labelScale={labelScale}
imgFront={
/2-menuops/0-front/${id}-${name}-f.png
}imgBack={
/2-menuops/1-back/${id}-${name}-b.png
}imgLabel={
/2-menuops/2-label/${id}-${name}-l.png
}setOrbitSpeed={setOrbitSpeed}
toggleClick={toggleClick}
/>
)
)}
</a.group>
);
};
export default Menu;
`
Beta Was this translation helpful? Give feedback.
All reactions