How to create a Framer Motion animation with extremely slow start and end?

Question

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;

Answer 1

The animation in the site you linked looks more like a spring animation to me. It's difficult to recreate what they have without seeing their implementation, but I was able to recreate something close (at the end of the day, you'll have to tune the animation to your liking). I often use this Framer Motion Visualizer when working with spring animations.