diff --git a/src/components/expandGrid/ExpandGrid.js b/src/components/expandGrid/ExpandGrid.js index 119f6ca3..53c78aae 100644 --- a/src/components/expandGrid/ExpandGrid.js +++ b/src/components/expandGrid/ExpandGrid.js @@ -5,16 +5,15 @@ import "./expandGrid.scss" const ExpandGrid = ({ data }) => { return ( -
-
-
-

{data.title}

-
{data.subtitle}
- -
-
+
+
+
+

{data.title}

+
{data.subtitle}
+ +
+
- ) } @@ -39,11 +38,7 @@ const ListItem = ({ index, onClick, data }) => { shouldFlip={shouldFlip(index)} delayUntil={createCardFlipId(index)} > - +
@@ -52,11 +47,9 @@ const ListItem = ({ index, onClick, data }) => { ) } -const ExpandedListItem = ({ index, onClick, data }) => { +const ExpandedListItem = ({ index, onClick, data, scrollToRef }) => { const scrollRef = useRef(null) - const scrollToRef = ref => window.scrollTo(0, ref.current.offsetTop - 40) - return ( { el.classList.add("animated-in") }, 400) }} - onExit={() => scrollToRef(scrollRef)} >
{ stagger="card-image" delayUntil={createCardFlipId(index)} > - +
@@ -104,9 +92,16 @@ const ExpandedListItem = ({ index, onClick, data }) => { const AnimatedList = ({ items }) => { const [focused, setFocused] = useState(null) + const scrollRef = useRef(null) const onClick = index => { setFocused(focused === index ? null : index) + if (focused !== null) { + scrollToRef(scrollRef) + } } + + const scrollToRef = ref => window.scrollTo(0, ref.current.offsetTop - 40) + return ( { }, }} decisionData={focused} + > -
    +
      {items.map((item, index) => { return ( <> @@ -128,6 +124,7 @@ const AnimatedList = ({ items }) => { index={focused} onClick={onClick} data={item} + scrollToRef={scrollToRef} /> ) : (