fix: framer-motion breaking change

ndom91 · Apr 29, 2022 · 659b001 · 659b001
1 parent 489ce19
commit 659b001
Show file tree

Hide file tree

Showing 2 changed files with 12 additions and 6 deletions.
diff --git a/src/components/AppLink.tsx b/src/components/AppLink.tsx
@@ -5,6 +5,7 @@ import { css } from 'twin.macro'
 
 type AppLinkProps = {
   index: number
+  category: string
   app: {
     name: string
     desc?: string
@@ -35,7 +36,7 @@ const offsetStyle = css`
   grid-row: span 4 / span 4 !important;
 `
 
-const AppLink = ({ index, app }: AppLinkProps): React.ReactElement => {
+const AppLink = ({ index, category, app }: AppLinkProps): React.ReactElement => {
   if (!app.name)
     return <motion.div transition={spring} variants={item}></motion.div>
 
@@ -46,6 +47,7 @@ const AppLink = ({ index, app }: AppLinkProps): React.ReactElement => {
     <motion.a
       variants={item}
       transition={spring}
+      id={category}
       whileHover={{ scale: 1.075, rotate: Math.random() > 0.4 ? -1 : 1 }}
       whileTap={{ scale: 0.95 }}
       tw="hover:(ring-4 ring-opacity-20) focus-within:(ring-4 ring-opacity-20) relative flex items-start justify-between p-8 h-full bg-gray-900 rounded-xl focus:outline-none shadow-lg overflow-hidden transition-shadow duration-500 ring-newtelco-500"
@@ -56,7 +58,7 @@ const AppLink = ({ index, app }: AppLinkProps): React.ReactElement => {
           : 'grid-row: span 5 / span 4; min-width: 250px;',
       ]}
       href={url}
-      rel="noopener noreferer"
+      rel="noopener noreferrer"
       target="_blank"
     >
       <div tw="flex flex-col justify-between h-full">

diff --git a/src/components/AppList.tsx b/src/components/AppList.tsx
@@ -1,5 +1,5 @@
 import React, { useState, useEffect } from 'react'
-import { motion, AnimateSharedLayout } from 'framer-motion'
+import { motion, LayoutGroup } from 'framer-motion'
 import { AppLink } from '@/components/index'
 
 type AppListProps = {
@@ -9,11 +9,16 @@ type AppListProps = {
 const list = {
   hidden: {
     opacity: 0,
+    transition: {
+      staggerChildren: 0.1,
+      staggerDirection: -1
+    },
   },
   visible: {
     opacity: 1,
     transition: {
       staggerChildren: 0.1,
+      delayChildren: 0.1,
     },
   },
 }
@@ -39,20 +44,19 @@ const AppList: React.FC<AppListProps> = ({ category }): React.ReactElement => {
 
   return (
     <div tw="px-2 sm:px-4 w-full max-h-full overflow-y-scroll md:w-1/2">
-      <AnimateSharedLayout>
         <motion.div
           initial="hidden"
+          layoutId={category}
           animate="visible"
           variants={list}
           key={category}
           tw="grid gap-8 grid-cols-1 p-0 sm:px-2 sm:py-4 xl:grid-cols-2"
           css="grid-template-rows: repeat(12, 20px)"
         >
           {activeApps?.map((app, index) => (
-            <AppLink index={index} key={index} app={app} />
+            <AppLink index={index} category={category} key={`${category}-${index}`} app={app} />
           ))}
         </motion.div>
-      </AnimateSharedLayout>
     </div>
   )
 }