StackAnimatePresenceDemo.tsx

import * as React from "react"
import { useState } from "react"
import {
    Frame,
    AnimatePresence,
    Stack,
    Color,
    StackProperties,
    ControlType,
    addPropertyControls,
} from "framer"

type Props = StackProperties

export function StackAnimatePresenceDemo(props) {
    const [state, setState] = useState({
        items: [
            {
                id: getId(),
                isVisible: true,
                height: getHeight(),
                background: getColor(),
            },
            {
                id: getId(),
                isVisible: true,
                height: getHeight(),
                background: getColor(),
            },
            {
                id: getId(),
                isVisible: true,
                height: getHeight(),
                background: getColor(),
            },
        ],
    })

    function addItem(item) {
        setState({ items: state.items.concat(item) })
    }

    return (
        <Stack {...props}>
            <AnimatePresence initial={false}>
                {state.items.map(
                    (item, index) =>
                        item.isVisible && (
                            <Frame
                                key={item.id}
                                width={"100%"}
                                initial={{ opacity: 0, height: 0 }}
                                animate={{ opacity: 1, height: item.height }}
                                exit={{ opacity: 0, height: 0 }}
                                background={item.background}
                                positionTransition
                                onTap={() => {
                                    let newItems = state.items
                                    newItems[index].isVisible = false
                                    setState({ items: newItems })
                                }}
                            />
                        )
                )}
                <Frame
                    height={50}
                    width={80}
                    y={-25}
                    background="white"
                    borderRadius={4}
                    shadow="0 4px 8px 0 rgba(0,0,0,.2), 0 0 0 1px rgba(0,0,0,.2), 0 2px 4px -2px rgba(0,0,0,.4)"
                    whileHover={{ scale: 1.05 }}
                    whileTap={{ scale: 0.95 }}
                    style={{ fontSize: "2em" }}
                    onTap={() => {
                        addItem({
                            id: getId(),
                            isVisible: true,
                            height: getHeight(),
                            background: getColor(),
                        })
                    }}
                >
                    +
                </Frame>
            </AnimatePresence>
        </Stack>
    )
}

StackAnimatePresenceDemo.defaultProps = {
    gap: 0,
}

addPropertyControls(StackAnimatePresenceDemo, {
    //@ts-ignore
    ...Stack.propertyControls,
})

function getId() {
    return (
        "_" +
        Math.random()
            .toString(36)
            .substr(2, 9)
    )
}

function getHeight() {
    return Math.random() * 50 + 30
}

function getColor() {
    return Color({
        r: 255,
        g: 50,
        b: Math.random() * 255,
    })
}