[FEATURE] rangeStart and the rangeEnd support

[istarkov]

Is your feature request related to a problem? Please describe.

Issue: Need for rangeStart/rangeEnd Attributes Despite offset

The CSS attributes animation-range-end and animation-range-start have corresponding rangeStart/rangeEnd attributes in the Web Animations API.

Question:

Why are rangeStart and rangeEnd needed if we already have offset?

The issue arises with entry animations.

---

Example with Native CSS:

In this example, a :hover animation works after the scroll-linked animation completes:

@keyframes animate-in-range {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

.box-right {
  animation: linear animate-in-range;
  animation-timeline: scroll();
  animation-range: 0% 20%;
}

.box-right:hover {
  opacity: 0.5; /* After 20% this works!!!! */
}

/* animated element has anim.effect.getComputedTiming().progress === null after 20% scroll and hover is working */

Native WAAPI example

const timeline = new ScrollTimeline();

const animation = boxNative.animate(
	{
		opacity: [0, 1]
	},
	{
		rangeStart: '0%',
		rangeEnd: '20%',
		timeline
	}
);

/* animated element has anim.effect.getComputedTiming().progress === null after 20% scroll and hover is working */

When using Motion Dev, the behavior is different:

const animation = animate(
  box,
  {
    opacity: [0, 1],
  },
  {
    // rangeStart, rangeEnd not supported
  }
);

const scrollAnimation = scroll(animation, { offset: ['0%', '20%'] });

// animated element has anim.effect.getComputedTiming().progress === 1 even after 20% and hover is not working

With native CSS, the animation’s progress is null after the defined range.
However, when using Motion Dev, the animation’s progress remains 1 even after the range (e.g., 20%).
This creates a discrepancy in expected behavior, especially for animations like :hover out of defined range

Describe the solution you'd like

Support for the corresponding rangeStart/rangeEnd attributes like in the Web Animations API.

Or at least allow pass native options to the

motion/packages/framer-motion/src/animation/animators/waapi/index.ts

Lines 9 to 14 in c5898f5

	delay = 0,
	duration = 300,
	repeat = 0,
	repeatType = "loop",
	ease = "easeInOut",
	times,

to have chrome support