Skip to content

Instantly share code, notes, and snippets.

@bruskowski
Last active July 30, 2019 19:29
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
Star You must be signed in to star a gist
Save bruskowski/cf843904f55e72a7880f8c97f15adef9 to your computer and use it in GitHub Desktop.
import * as React from "react"
import { useState } from "react"
import {
Frame,
AnimatePresence,
Stack,
Scroll,
Color,
ScrollProps,
ControlType,
addPropertyControls,
} from "framer"
type Props = ScrollProps
export function ScrollStackAnimatePresenceDemo(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}
padding={0}
>
<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 })
}}
/>
)
)}
</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>
)
}
ScrollStackAnimatePresenceDemo.defaultProps = {
gap: 0,
}
addPropertyControls(ScrollStackAnimatePresenceDemo, {
//@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,
})
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment