CustomComponentScrollStackAnimatePresenceDemo.tsx

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

function Item(props) {
    const [state, getState] = useState(getWords())

    return (
        <Stack
            {...props}
            direction="horizontal"
            width="100%"
            start="start"
            gap={15}
            overflow="hidden"
        >
            <Frame background="rgba(255,150,0,1)" size={40} borderRadius={20} />
            <Frame
                background="transparent"
                height={"auto"}
                style={{ fontSize: "2em" }}
            >
                <span>{state}</span>
            </Frame>
        </Stack>
    )
}

type Props = ScrollProps

export function CustomComponentScrollStack(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 (
        <Frame
            width={props.width}
            height={props.height}
            background="transparent"
        >
            <Scroll {...props}>
                <Stack width="100%" height="auto" direction="vertical" gap={0}>
                    <AnimatePresence initial={false}>
                        {state.items.map(
                            (item, index) =>
                                item.isVisible && (
                                    <Item
                                        key={item.id}
                                        paddingLeft={15}
                                        initial={{
                                            opacity: 0,
                                            height: 0,
                                            paddingTop: 0,
                                            paddingBottom: 0,
                                        }}
                                        animate={{
                                            opacity: 1,
                                            height: item.height,
                                            paddingTop: 15,
                                            paddingBottom: 15,
                                        }}
                                        exit={{
                                            opacity: 0,
                                            height: 0,
                                            paddingTop: 0,
                                            paddingBottom: 0,
                                        }}
                                        background={item.background}
                                        positionTransition
                                        onTap={() => {
                                            let newItems = state.items
                                            newItems[index].isVisible = false
                                            setState({ items: newItems })
                                        }}
                                    />
                                )
                        )}
                    </AnimatePresence>
                </Stack>
            </Scroll>
            <Frame
                height={50}
                width={80}
                right={10}
                bottom={10}
                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>
        </Frame>
    )
}

CustomComponentScrollStack.defaultProps = {
    gap: 0,
}

addPropertyControls(CustomComponentScrollStack, {
    //@ts-ignore
    ...Scroll.propertyControls,
})

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

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

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

function getWords() {
    const things = ["Rock", "Paper", "Scissor"]
    const thing = things[Math.floor(Math.random() * things.length)]
    const amount = Math.floor(Math.random() * 100)
    return (
        (amount === 0 ? "No" : amount) +
        " " +
        (amount === 1 ? thing : thing + "s")
    )
}