Removing framer motion

chrishrtmn · Sep 11, 2020 · 5234d83 · 5234d83 · vercel · Sep 11, 2020
1 parent 58e3b3a
commit 5234d83
Show file tree

Hide file tree

Showing 5 changed files with 40 additions and 70 deletions.
diff --git a/README.md b/README.md
@@ -9,7 +9,7 @@
 ### To-Do
 
 - Menu + links to pdfs
-- More animations
+- Anime.js + react-transition-group
 - Audio flux
 - Companies grid
 - Optimize site performance

diff --git a/src/components/home/knowledge.js b/src/components/home/knowledge.js
@@ -1,19 +1,10 @@
-import { motion } from 'framer-motion'
-
 import SVGIcon from '../svg-icons'
-//import { SignKnowledge } from '../svg-signs'
-
-import { stagger, fadeInUp } from '../../utilities/motions'
 
 import { Dev, Design, Services, Principles } from '../../data/knowledge'
 
 export default function SectionKnowledge() {
   return (
-    <motion.section
-      initial='initial'
-      animate='animate'
-      className='my-16 md:my-32'
-    >
+    <section className='my-16 md:my-32'>
       <div className='flex items-center content-between mb-6'>
         <h2 className='flex-grow text-xl font-bold text-gray-800 md:text-2xl'>
           Skills &amp; Knowledge
@@ -25,29 +16,29 @@ export default function SectionKnowledge() {
         <SVGIcon name='code' className='inline-block w-4 h-6 mb-1 mr-2' />
         Development
       </h3>
-      <motion.div variants={stagger}>
+      <div>
         {Dev.map((value, index) => {
           return (
-            <motion.span key={index} className='pill' variants={fadeInUp}>
+            <span key={index} className='pill'>
               {value}
-            </motion.span>
+            </span>
           )
         })}
-      </motion.div>
+      </div>
 
       <h3 className='mt-8 mb-1 text-gray-800 text-md'>
         <SVGIcon name='photograph' className='inline-block w-4 h-6 mb-1 mr-2' />
         Design
       </h3>
-      <motion.div variants={stagger}>
+      <div>
         {Design.map((value, index) => {
           return (
-            <motion.span key={index} className='pill' variants={fadeInUp}>
+            <span key={index} className='pill'>
               {value}
-            </motion.span>
+            </span>
           )
         })}
-      </motion.div>
+      </div>
 
       <h3 className='mt-8 mb-1 text-gray-800 text-md'>
         <SVGIcon
@@ -56,29 +47,29 @@ export default function SectionKnowledge() {
         />
         Services
       </h3>
-      <motion.div variants={stagger}>
+      <div>
         {Services.map((value, index) => {
           return (
-            <motion.span key={index} className='pill' variants={fadeInUp}>
+            <span key={index} className='pill'>
               {value}
-            </motion.span>
+            </span>
           )
         })}
-      </motion.div>
+      </div>
 
       <h3 className='mt-8 mb-1 text-gray-800 text-md'>
         <SVGIcon name='scale' className='inline-block w-4 h-6 mb-1 mr-2' />
         Principles
       </h3>
-      <motion.div variants={stagger}>
+      <div>
         {Principles.map((value, index) => {
           return (
-            <motion.span key={index} className='pill' variants={fadeInUp}>
+            <span key={index} className='pill'>
               {value}
-            </motion.span>
+            </span>
           )
         })}
-      </motion.div>
-    </motion.section>
+      </div>
+    </section>
   )
 }
diff --git a/src/components/home/personal.js b/src/components/home/personal.js
@@ -1,19 +1,10 @@
-import { motion } from 'framer-motion'
-
 import SVGIcon from '../svg-icons'
-//import { SignPersonal } from '../svg-signs'
-
-import { stagger, fadeInUp } from '../../utilities/motions'
 
 import { Interests, Software, Hardware } from '../../data/personal'
 
 export default function Personal() {
   return (
-    <motion.section
-      initial='initial'
-      animate='animate'
-      className='mt-8 md:mt-16'
-    >
+    <section initial='initial' animate='animate' className='mt-8 md:mt-16'>
       <div className='flex items-center content-between mb-6'>
         <h2 className='flex-grow text-xl font-bold text-gray-800 md:text-2xl'>
           Up-Close &amp; Personal
@@ -28,43 +19,43 @@ export default function Personal() {
         />
         Interests
       </h3>
-      <motion.div variants={stagger}>
+      <div>
         {Interests.map((value, index) => {
           return (
-            <motion.span key={index} className='pill' variants={fadeInUp}>
+            <span key={index} className='pill'>
               {value}
-            </motion.span>
+            </span>
           )
         })}
-      </motion.div>
+      </div>
 
       <h3 className='mt-8 mb-1 text-gray-800 text-md'>
         <SVGIcon name='chart-pie' className='inline-block w-4 h-6 mb-1 mr-2' />
         Software
       </h3>
-      <motion.div variants={stagger}>
+      <div>
         {Software.map((value, index) => {
           return (
-            <motion.span key={index} className='pill' variants={fadeInUp}>
+            <span key={index} className='pill'>
               {value}
-            </motion.span>
+            </span>
           )
         })}
-      </motion.div>
+      </div>
 
       <h3 className='mt-8 mb-1 text-gray-800 text-md'>
         <SVGIcon name='chip' className='inline-block w-4 h-6 mb-1 mr-2' />
         Hardware
       </h3>
-      <motion.div variants={stagger}>
+      <div>
         {Hardware.map((value, index) => {
           return (
-            <motion.span key={index} className='pill' variants={fadeInUp}>
+            <span key={index} className='pill'>
               {value}
-            </motion.span>
+            </span>
           )
         })}
-      </motion.div>
+      </div>
 
       <h3 className='mt-8 mb-1 text-gray-800 text-md'>
         <SVGIcon
@@ -73,40 +64,34 @@ export default function Personal() {
         />
         Profiles
       </h3>
-      <motion.div variants={stagger}>
+      <div>
         <a
           href='http://github.com/chrishrtmn'
           target='_blank'
           rel='noopener noreferrer'
         >
-          <motion.span className='pill' variants={fadeInUp}>
-            Github
-          </motion.span>
+          <span className='pill'>Github</span>
         </a>
         <a
           href='http://linkedin.com/in/chrishrtmn'
           target='_blank'
           rel='noopener noreferrer'
         >
-          <motion.span className='pill' variants={fadeInUp}>
-            LinkedIn
-          </motion.span>
+          <span className='pill'>LinkedIn</span>
         </a>
         <a
           href='http://twitter.com/chrishrtmn'
           target='_blank'
           rel='noopener noreferrer'
         >
-          <motion.span className='pill' variants={fadeInUp}>
-            Twitter
-          </motion.span>
+          <span className='pill'>Twitter</span>
         </a>
-      </motion.div>
+      </div>
 
       <div className='mt-16 text-xs italic text-center text-gray-500'>
         Site is a work in progress. Made using React with Next.js, styled with
         Tailwind CSS, and hosted on Vercel.
       </div>
-    </motion.section>
+    </section>
   )
 }
diff --git a/src/pages/_app.js b/src/pages/_app.js
@@ -1,11 +1,5 @@
-import { AnimatePresence } from 'framer-motion'
-
 import '../styles/tailwind.css'
 
 export default function MyApp({ Component, pageProps }) {
-  return (
-    <AnimatePresence>
-      <Component {...pageProps} />
-    </AnimatePresence>
-  )
+  return <Component {...pageProps} />
 }
diff --git a/src/utilities/motions.js b/src/utilities/motions.js
@@ -3,7 +3,7 @@ const easing = [0.6, -0.05, 0.01, 0.99]
 export const stagger = {
   animate: {
     transition: {
-      staggerChildren: 0.1,
+      staggerChildren: 0.05,
     },
   },
 }