logo

Framer Motion

Pass a list of values. Each value will be used at each keyframe. e.g. [1, 2, 2, 1, 1]

If we want to start the animation from the current state of the element, set the first item in the list to null.

By default, each keyframe is spaced naturally throughout the animation. You can override this by setting the times option via transition. times is an array of progress values between 0 and 1, defining where in the animation each keyframe should be positioned. e.g. transition: { duration: 3, times: [0, 0.2, 1] }

Build by Ritesh. Check out my other Github Codes.