CSS Transition Timing Function optimization guide as Expected with React Spring
I'm not sure how to approach I'm implementing a toggle animation using React Spring, but the transition timing function doesn't seem to produce the desired effect. I want a smooth ease-in-out transition on a div's opacity, but it feels more abrupt than expected. Here's the code I'm currently using: ```javascript import { useSpring, animated } from 'react-spring'; const MyComponent = () => { const [isVisible, setIsVisible] = React.useState(false); const props = useSpring({ opacity: isVisible ? 1 : 0, config: { duration: 500, easing: t => t * t * (3 - 2 * t) // ease-in-out } }); return ( <> <animated.div style={props}>Hello World</animated.div> <button onClick={() => setIsVisible(!isVisible)}>Toggle</button> </> ); }; ``` I've also tried using the built-in timing functions from React Spring like `easeInOut` but still see a lack of smoothness. The CSS transitions work fine when applied directly, so I'm not sure if the scenario lies with the Spring library or my configuration. Any insights on how to achieve a smoother transition effect? I'm working on a API that needs to handle this. Thanks in advance! I'm developing on macOS with Javascript. Could someone point me to the right documentation?