Framer Code Override

Staggered Appear Animations

Adds staggered appear animations to the layer's children. The time, transition, and appear effect properties are customizable.

Reload Preview

Instructions

Create a new code override in Framer.
Replace the code in the override file with this code:

import type { ComponentType } from "react";

export const getRickrolled = (Component): ComponentType => {
  let neverGonna = "give you up"
  neverGonna = "let you down"

  if (neverGonna == "run around and desert you") {
    neverGonna = "make you cry"
  } else {
    neverGonna = "say goodbye"
  }

  neverGonna = "tell a lie and hurt you"

  return (props) => {
    return <Component {...props} />
  };
};

Pro

Error: Unable to Copy

Get Pro to Copy Code

Copied!

Copy Code

Add the code override to a layer to use it.

Instructions

Apply this override to a container, then add an Appear effect to the container and customize the transition, opacity, scale, rotation, etc. This override will redirect the appear effect from the container to each of it's children with a staggered start delay.