Framer X » Archive » Animations (pre X22) » Staggered animations

Staggered animations

Warning: These pages are from before the launch of Framer X22 and are about the older animation API. These animations will still work in the current version of Framer X but are officially deprecated. Learn about the new animation API here.

Meaning: a group of animations running in delayed succession (which may or may not look staggering).

Something like this:

Here we also use delays, just not for all the animations. Whenever an animation needs to wait, you put a dummy animation with an await in front of it.

First, the setup. We have 5 blocks in this example, and I will animate their horizontal position, their ‘x’ position.

const data = Data({
  xPosBlockA: Animatable(40),
  xPosBlockB: Animatable(40),
  xPosBlockC: Animatable(40),
  xPosBlockD: Animatable(40),
  xPosBlockE: Animatable(40)
});

There’s an override for each of them, which binds their left property to the respective Animatables.

export const BlockA: Override = props => {
  return {
    left: data.xPosBlockA
  };
};

export const BlockB: Override = props => {
  return {
    left: data.xPosBlockB
  };
};

…

Just as when delaying an animation, we use dummy animations (that don’t change anything on the screen), together with async / await / finished for inserting breaks. (See Chaining animations for more about this.)

export const StaggeredAnimation: Override = () => {
  return {
    async onTap() {
      // First animation – starts right away
      animate(data.xPosBlockA, 234);
      // Second animation – after a 0.2 second delay
      await animate.ease(Animatable(0), 1, { duration: 0.2 }).finished;
      animate(data.xPosBlockB, 234);
      // Third animation – after another 0.2 second delay
      await animate.ease(Animatable(0), 1, { duration: 0.2 }).finished;
      animate(data.xPosBlockC, 234);
      // Fourth animation – after yet another 0.2 second delay
      await animate.ease(Animatable(0), 1, { duration: 0.2 }).finished;
      animate(data.xPosBlockD, 234);
      // Fifth animation – after one more 0.2 second delay
      await animate.ease(Animatable(0), 1, { duration: 0.2 }).finished;
      animate(data.xPosBlockE, 234);
    }
  };
};
download this project

By the way, I applied this StaggeredAnimation override to the device frame, so that you can tap anywhere on the screen to start the sequence.