Wait for an Animation in FramerX

You may have come across a situation in FramerX where you want to wait for one animation to complete before continuing with another animation. Using ES2017 Async Functions, this is easily possible inside a FramerX Override.

Take this example of an Override where we're using the spring animation twice. To rotate and to scale. As it is now, these animations will appear to happen at the same time.

export const RotateScale: Override = () => {
  return {
    onTap() {
      animate.spring(data.rotation, 90);
      animate.spring(data.scale, 1.2);
    },
  }
}

However, what if we want the rotation to complete before scaling? We can achieve this in two quick steps, taking advantage of ES2017 Async Functions.

In the simplest terms, we first indicate that we want onTap() to support this async functionality.

async onTap() {
  ...
},

Secondly, we need to tell our script what we want to wait on. This is done with the await keyword. Here we want to wait for our rotation animation to be finished - this is a boolean (true/false) property of FramerX's animate, which will be set to true once the animation has completed. So we are "awaiting" that value to be set to true.

async onTap() {
  await animate.spring(data.rotation, 90).finished;
  ...
},

That's all there is to it. The altered FramerX Override code looks like this.

export const RotateThenScale: Override = () => {
  return {
    async onTap() {
      await animate.spring(data.rotation, 90).finished;
      animate.spring(data.scale, 1.2);
    },
  }
}

Now get out there coding those sick FramerX animations :)

Further reading:

• Using ES2017 Async Functions
• JavaScript Promises: an Introduction - what async/await uses under the hood.