Question 339288 in Javascript Question posted in
A very good W3school tutorial can be found here.

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

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;
Tags:

2

Answers


  1. 0

    You might just need to increase the duration and decrease the first value of the array to see the effect. The way your animation will behave the way it is now, is that it:

    starts slowly then goes faster then ends slowly (the end and the start will be equally as slow since the first and the last values in the curve array are both 1)

    If you want to have the end slower, you need to speed up the start by decreasing the first value in the array, let’s say 0.3 that will have a slow start and significantly slower end.

    I highly recommend playing with the curve in here
    https://tools.webdevpuneet.com/css-easing-generator/ and set the duration to 20 seconds to really feel the effect of your settings (you can go even higher if needed) and when you are happy with the results copy the 4 values generated into your array

    Login or Signup to reply.
  2. 0

    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.

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search