Creating a simple animation in React-Pose

JavaScript
1

I’m having trouble creating a simple animation in React-Pose. The two problems are

  1. I can’t get the animation to revert to the initial condition. The hovering variable is changing to false when the mouse leaves, but it the animation doesn’t change back.

  2. I can’t manipulate the animation, I wanted to have a longer duration and maybe an ease out or something, but its just an instant snap to the hovered status.

Thanks for your help!

import React, { useState } from 'react';
import styled from 'styled-components';
import posed from 'react-pose';
import { render } from 'react-dom';

const UpFor = () => {

const [hovering, setHovering] = useState(false);

const HoverContainer = posed.div({
hoverable: true
})

const Container = styled(HoverContainer)`
font-family: 'Baumans';
font-size: 220px;
display: flex;
cursor: pointer;
`

const Up = styled.div`
color: #81D6E3;`

const Four = styled.div`
color: #FF101F
`
const Fours = styled.div`
display: flex;
`
const MirroredFour = posed.div({
unhovered: {transform: 'rotatey(0deg)'},
hovered: {transform: 'rotateY(180deg)',
    transition: {
        type: 'tween',
        duration: '2s'
    }}
})

const SecondFour = styled(MirroredFour)`
color: #FF101F
position: absolute;
transform-origin: 67%;
`


return (
<Container onMouseEnter={() => {setHovering({ hovering: true }), console.log(hovering)}}
           onMouseLeave={() => {setHovering({ hovering: false }), console.log(hovering)}}>
     <Up>Up</Up><Fours><Four>4</Four>
            <SecondFour pose={hovering ? "hovered" : "unhovered"}
            >4</SecondFour></Fours>
</Container>)
}

export default UpFor