React Spring acting stiff, as if no mass or friction

Question

I'm using react spring to animate an object translating up the page and disappearing. For some reason, the object is moving the same speed throughout the animation, no matter what I set the spring configs to. I currently have:

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>
    )
}

My trail works great and as expected. I have bumped the spring values way up just to try to get an effect, and nothing seems to be changing except the delay and duration. Is there anything obviously wrong with the code?

Answer 1

React-spring uses physics based animation by default. If you add the duration attribute to config it switches to duration based animation. So it will ignore the other attributes. Try to use only the physical attributes.

config: {
            tension: 170,
            friction: 5,
            mass: 1
        },