Changing animation-timing-function with Element.animate() in JavaScript

Question

I am trying to animate a HTML div using JavaScripts built in Element.animate() function. Sadly, I haven't found a way to change the animation-timing-function that is getting parsed along with other timing-settings as the second argument of the Element.animate() function.

My JavaScript code so far:

// This variable declares all keyframes of the animation.
const animationKeyframes = [
    {transform: 'translateY(-100%)'},
    {transform: 'translateY(0%)'}
]

// This variable contains all animation options.
// There should be a way to specify a timing-function.
const animationOptions = {
    duration: 1000,
    iterations: 1
}

// Runns the animation for the div that I want to animate.
Element.animate(animationKeyframes, animationOptions)

The code above executes without any errors and moves the div from the top to the bottom of the page at a linear speed. However, I want the speed to ease-in at the beginning and to ease-out at the end of the animation.

I tried:

• adding animationTimingFunction: 'ease-in-out' to the animationTiming constant

• adding animation-timing-function: ease-in-out; to the CSS properties of the div

My only source so far: Mozilla Docs: Element.animate()

Answer 1

You can just add the 'easing' prop in your animationOptions:

const animationOptions = {
    duration: 1000,
    iterations: 1,
    easing: 'ease-in-out'
}

Other values that can be used in the easing property are: 'ease', 'linear', 'ease-in', 'ease-out', and 'ease-in-out'.