Adrian Payne | Frontend Dev Blog

Adrian Payne
Senior Dev @ Costa Digital

Who am I?

Adrian spends most of his time being a Senior Frontend Developer in Hamburg. When he's not doing that, he likes to sing and play hurling with Hamburg GAA.


What I write about


Why the domain?

I'm a frontend developer and I'm from Ireland. I put two and two together. Literally :)


Recent Posts


Sign up for an awesome Lootcrate!

Wait for an Animation in FramerX

How to wait for one animation to complete before starting the next one in a FramerX override using JS async/await.

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:


Posted in animation, es6, javascript, framerx on by

Share this post:
This site is run on Digital Ocean. Sign up for yours!