Equivalent of initial={} for JavaScript inView Animations?

[HassanZahirnia]

This syntax is great, but I’m wondering how to set an initial state (e.g., opacity: 0) for elements before the scroll-triggered animation starts:

inView("#carousel li", (element) => {
  animate(element, { opacity: 1 })
})

The issue is that if a user scrolls slowly, the element remains visible until it reaches the amount trigger, at which point the animation begins.

In libraries like GSAP, methods like gsap.set() or gsap.fromTo() allow setting an initial state before animating, ensuring a smooth transition. Is there a recommended way to achieve this with this API?

I noticed that in the Framer Motion + React implementation of this library, we can use initial={}, but there doesn’t seem to be an equivalent in the JavaScript version.

Is there a recommended approach to achieving this effect with the current API?