# Trying to get animation library to work ...

**URL:** <https://talk.observablehq.com/t/trying-to-get-animation-library-to-work/5605>\
**Category:** Help\
**Created:** [September 22, 2021, 3:26pm UTC](https://talk.observablehq.com/t/trying-to-get-animation-library-to-work/5605 "2021-09-22T15:26:45Z")\
**Posts on this page:** 3\
**Page:** 1

<div class="post-metadata">

**Author:** ![triptych](https://yyz2.discourse-cdn.com/flex030/user_avatar/talk.observablehq.com/triptych/32/4001_2.png) [@triptych](https://talk.observablehq.com/u/triptych)\
**Post date:** [September 22, 2021, 3:26pm UTC](https://talk.observablehq.com/t/trying-to-get-animation-library-to-work/5605/1 "2021-09-22T15:26:45Z")

</div>

Hello folks!  
I recently learned about a new animation library at [https://motion.dev](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](https://observablehq.com/@triptych/hello-animate)

---

<div class="post-metadata">

**Author:** ![mbostock](https://yyz2.discourse-cdn.com/flex030/user_avatar/talk.observablehq.com/mbostock/32/9_2.png) [@mbostock](https://talk.observablehq.com/u/mbostock)\
**Post date:** [September 22, 2021, 4:11pm UTC](https://talk.observablehq.com/t/trying-to-get-animation-library-to-work/5605/2 "2021-09-22T16:11:09Z")

</div>

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

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

```

And then

```auto
{
  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.

```auto
{
  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.

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

```

---

<div class="post-metadata">

**Author:** ![triptych](https://yyz2.discourse-cdn.com/flex030/user_avatar/talk.observablehq.com/triptych/32/4001_2.png) [@triptych](https://talk.observablehq.com/u/triptych)\
**Post date:** [September 24, 2021, 7:03pm UTC](https://talk.observablehq.com/t/trying-to-get-animation-library-to-work/5605/3 "2021-09-24T19:03:33Z")

</div>

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.