I’m trying to create an animation using framer-motion
that will start slowly and especially end very, very slowly. Looking for a similar effect like on this website: https://wheelofnames.com/
I’ve experimented with various easing functions, and the closest I’ve come to the desired effect is by using the easing function [1, 0, 0, 1]. However, this doesn’t quite capture the extremely slow ending I’m looking for.
import { motion } from 'framer-motion';
function Home() {
return (
<motion.div
style={{ backgroundColor: 'red', width: '5em', height: '5em' }}
animate={{
x: `50em`,
}}
transition={{
type: 'tween',
duration: 1,
ease: [1, 0, 0, 1],
}}
/>
);
}
export default Home;