Trying to get animation library to work ...

Community Help
1

Hello folks!
I recently learned about a new animation library at https://motion.dev
So of course I’m trying to get it to work in Observable.

I’m able to import the library, but it fails immediately saying this.frame is not a function
I’m assuming this works on standard pages, so I’m curious if there’s something about Observable’s cells that might be tripping up this library. Any ideas?

Here’s an example notebook Hello, animate / Andrew Wooldridge / Observable

2

It looks like you’re importing the wrong library? This seems to work:

animate = (await import('https://cdn.skypack.dev/motion@10')).animate

And then

{
  const out = html`<div class="box">hello</div>`;
  yield out;
  animate(".box", { backgroundColor: "red" });
}

Also, I would recommend avoiding global selectors since this is an antipattern in Observable (and unnecessary). You can pass the element directly to animate instead of using a selector.

{
  const out = html`<div>hello</div>`;
  yield out;
  animate(out, { backgroundColor: "red" });
}

I’m also not sure you need to yield the element into the DOM first when you use this approach… it seems to work without it, but sometimes libraries (particularly ones that depend on computed styles) do assume the animating element is attached to the current DOM.

{
  const out = html`<div>hello</div>`;
  animate(out, { backgroundColor: "red" });
  return out;
}
1 Like
3

Thanks so much! This is what I get when trying to get something to work while distracted.
facepalm

And yes, I usually pass in the HTML directly vs using selectors.

1 Like