反作用弹簧动作僵硬，好像没有质量或摩擦力

我正在使用react spring为一个向上平移页面并消失的对象设置动画。出于某种原因，无论我将弹簧配置设置为什么，对象在整个动画中都以相同的速度移动

import React, {useEffect} from 'react'
import styled from 'styled-components'
import {useSpring, useTrail, animated} from 'react-spring'
import {images} from '../../json/images'
import {useInView} from 'react-intersection-observer'
const RocketContainer = styled(animated.div)`
position: absolute;
height: 85px;
`
const Rocket = styled.img`
height: 100%;
transform: rotate(-45deg);
`
export default function Projects() {
const projectImages = images.projects
const [ref, inView] = useInView({
threshold: 0,
triggerOnce: true,
})
const [trail, setTrail, stopTrail] = useTrail(projectImages.length, () => (
{
opacity: 0,
transform: 'translateY(150px)'
}
))

const [spring, setSpring, stopSpring] = useSpring(() => (
{
config: {
duration: 3000,
tension: 50,
friction: 800,
mass: 800
},
transform: 'translateY(0px)',
opacity: 1
}
))
useEffect(() => {
if(inView){
setTrail({
opacity: 1,
transform: 'translateY(0px)',
delay: 500,
})
stopTrail()
setSpring({
transform: 'translateY(-2200px)',
opacity: 0,
delay: 1700
})
}
// eslint-disable-next-line
}, [inView])
return (
<ProjectContainer id='projects'>
<h1 style={{'fontSize': '4em', color: '#333'}}>Projects</h1>
<Grid ref={ref}>
{trail.map((attr, i) => (
<Project style={attr} key={projectImages[i][0]}>
<Name>{projectImages[i][2]}</Name>
<IconContainer>
<a href={projectImages[i][4]} target="_blank" rel="noopener noreferrer"><Icon src={projectImages[i][1]} /></a>
</IconContainer>
<Desc>{projectImages[i][3]}</Desc>
<div>
<DemoLink href={projectImages[i][4]} target="_blank" rel="noopener noreferrer">Live Demo</DemoLink>
<DemoLink href={projectImages[i][5]} target="_blank" rel="noopener noreferrer">GitHub</DemoLink>
</div>

</Project>
))}
</Grid>
<RocketContainer style={spring}> //<---THIS IS WHERE THE SPRING IS IMPLEMENTED
<Rocket src={`/img/icons/rocket.png`} />
</RocketContainer>

</ProjectContainer>
)
}

我的轨迹很好，正如预期的那样。我把弹簧值调高了一点，只是为了获得效果，除了延迟和持续时间之外，似乎什么都没有改变。代码有什么明显的错误吗？