Documentation

Documentation

Error

No valid elements

No valid elements

You've received the following message:

No valid elements provided.

No valid elements

You're attempting to animate with the animate function. Most likely, you're passing either a selector:

animate(".item", { opacity: 1 })

Or the results of a selector like getElementById or querySelectorAll:

const elements = document.querySelectorAll(".item")

animate(elements, { opacity: 1 })

Solution

To avoid this error, first use console.log to double check that this selector returns valid elements:

console.log(document.querySelectorAll(".item"))

If no elements are being found, then you need to first fix your selector. In the above example you'd first ensure that elements with the "item" class actually exist.

If you're sure the selector is correct, but you're in a situation where you want to run an animation only if elements are found, then use a conditional:

const elements = document.querySelectorAll(".item")

if (elements.length) {
  animate(elements, { opacity: 1 })
}

Level up your animations with Motion+

Access to 100+ premium examples, exclusive APIs like Cursor, private Discord and GitHub, and powerful VS Code animation editing tools.

One-time payment, lifetime updates.

Stay in the loop

Subscribe for the latest news & updates.

Stay in the loop

Subscribe for the latest news & updates.

Stay in the loop

Subscribe for the latest news & updates.