How to `animate` an object using web-sys and js-sys

Question

I've been trying to emulate this javascript code in a frontend framework and haven't been able to get much traction.

window.onpointermove = event => { 
  const { clientX, clientY } = event;
  
  blob.animate({
    left: `${clientX}px`,
    top: `${clientY}px`
  }, { duration: 3000, fill: "forwards" });
}

Here's what I'm trying:

fn animate_blob_to_follow_mouse(event: MouseEvent, blob: Element) {
    let client_x = event.client_x();
    let client_y = event.client_y();
    let keyframes = js_sys::Array::new();

    let keyframe = JsValue::from_str(&format!(
        "{{left: '{}px', top: '{}px'}}",
        client_x, client_y
    ));
    keyframes.push(&keyframe);

    let effect = KeyframeEffect::new_with_opt_element_and_keyframes(
        Some(&blob),
        Some(keyframes.as_ref())
    ).unwrap();

    // Set duration and fill directly on the KeyframeEffect
    let animation = Animation::new_with_effect_and_timeline(Some(&effect), None).unwrap();
    animation.play().unwrap();
}

But at runtime this fails to even construct the KeyframeEffect object because keyframes is not of type Object. However, the documentation for Object seems to require an object to create an object.

Furthermore, the docs for AnimationTimeline seem to say that this object is only useful for current_time() which doesn't seem like it'd be helpful for providing a duration and fill for the animation.

So in short, I don't think I'm on the right track and would appreciate some pointers. If it's simple to replicate this JS code using web-sys and js-sys than I'd be indebted for a working example.

How to `animate` an object using web-sys and js-sys

0 Answers0