fix animated page (#9)

package.json

@@ -1,13 +1,13 @@
 {
   "name": "gatsby-using-page-transitions",
   "description": "Gatsby example site using page transitions",
-  "version": "1.0.0",
+  "version": "1.0.1",
   "author": "Ryan Wiemer <https://www.ryanwiemer.com>",
   "dependencies": {
-    "framer-motion": "^1.6.3",
-    "gatsby": "^2.14.0",
-    "react": "^16.9.0",
-    "react-dom": "^16.9.0"
+    "framer-motion": "^2.6.13",
+    "gatsby": "^2.24.57",
+    "react": "^16.13.1",
+    "react-dom": "^16.13.1"
   },
   "keywords": [
     "gatsby"
@@ -19,8 +19,5 @@
     "develop": "gatsby develop",
     "format": "prettier --trailing-comma es5 --no-semi --single-quote --write 'src/**/*.js'",
     "clean": "gatsby clean"
-  },
-  "devDependencies": {
-    "prettier": "^1.18.2"
   }
 }

src/pages/animated.js

@@ -1,31 +1,45 @@
-import React from 'react'
-import { motion } from 'framer-motion'
+import React from "react";
+import { motion } from "framer-motion";
 
 const container = {
-  visible: {
+  enter: {
     transition: {
-      when: 'beforeChildren',
-      staggerChildren: 0.1,
+      when: "beforeChildren",
+      staggerChildren: 0.3,
     },
   },
-}
+};
 const item = {
-  hidden: { y: 20, opacity: 0 },
-  visible: {
+  initial: { y: 20, opacity: 0 },
+  enter: {
     y: 0,
     opacity: 1,
   },
-}
+};
 
 const AnimatedPage = () => (
   <>
-    <h1>Animated On Page Mount</h1>
-    <motion.ul variants={container} initial="hidden" animate="visible">
-      <motion.li variants={item}>Lorem Ipsum</motion.li>
-      <motion.li variants={item}>Dolor Set</motion.li>
-      <motion.li variants={item}>Amet</motion.li>
+    <h1>Animated After Page Mount</h1>
+    <p>
+      As mentioned on{" "}
+      <a
+        href="https://github.com/framer/motion/issues/294#issuecomment-629353859"
+        target="_blank"
+        rel="noopener noreferrer"
+      >
+        framer/motion#294
+      </a>{" "}
+      the child variant keys need to be named the same as the parent variant
+      keys. This may change in the future but just something to be aware of.{" "}
+    </p>
+    <motion.ul variants={container}>
+      <motion.li variants={item}>I am</motion.li>
+      <motion.li variants={item}>staggered content</motion.li>
+      <motion.li variants={item}>that animates in</motion.li>
+      <motion.li variants={item}>after the initial</motion.li>
+      <motion.li variants={item}>page fade</motion.li>
     </motion.ul>
   </>
-)
+);
 
-export default AnimatedPage
+export default AnimatedPage;