Framestack /

Framer Code Overrides

Staggered Appear Animations

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

Reload Preview

Date Added

September 29, 2023



  1. Create a new code override in Framer.

  2. 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} />


Get Pro to Remix

Remix Framer Project

Error: Unable to Copy

Get Pro to Copy Code


Copy Code

  1. Add the code override to a layer to use it.


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.