Move away from depreciated staggerChildren to delayChildren instead

See documentation https://motion.dev/docs/react-transitions#delaychildren

Author: peterneave

code/26 Animations/06-animating-staggered-lists/src/components/NewChallenge.jsx

@@ -1,5 +1,5 @@
 import { useContext, useRef, useState } from 'react';
-import { motion } from 'framer-motion';
+import { motion, stagger } from 'framer-motion';
 
 import { ChallengesContext } from '../store/challenges-context.jsx';
 import Modal from './Modal.jsx';
@@ -57,10 +57,10 @@ export default function NewChallenge({ onDone }) {
           <input ref={deadline} type="date" name="deadline" id="deadline" />
         </p>
 
-        <motion.ul 
-          id="new-challenge-images" 
+        <motion.ul
+          id="new-challenge-images"
           variants={{
-            visible: { transition: { staggerChildren: 0.05 } }
+            visible: { transition: { delayChildren: stagger(0.05) } }
           }}>
           {images.map((image) => (
             <motion.li

code/26 Animations/07-animating-colors-and-keyframes/src/components/NewChallenge.jsx

@@ -1,5 +1,5 @@
 import { useContext, useRef, useState } from 'react';
-import { motion } from 'framer-motion';
+import { motion, stagger } from 'framer-motion';
 
 import { ChallengesContext } from '../store/challenges-context.jsx';
 import Modal from './Modal.jsx';
@@ -60,7 +60,7 @@ export default function NewChallenge({ onDone }) {
         <motion.ul
           id="new-challenge-images"
           variants={{
-            visible: { transition: { staggerChildren: 0.05 } },
+            visible: { transition: { delayChildren: stagger(0.05) } },
           }}
         >
           {images.map((image) => (

code/26 Animations/08-imperative-animations/src/components/NewChallenge.jsx

@@ -68,7 +68,7 @@ export default function NewChallenge({ onDone }) {
         <motion.ul
           id="new-challenge-images"
           variants={{
-            visible: { transition: { staggerChildren: 0.05 } },
+            visible: { transition: { delayChildren: stagger(0.05) } },
           }}
         >
           {images.map((image) => (

code/26 Animations/09-animating-layout-changes/src/components/NewChallenge.jsx

@@ -68,7 +68,7 @@ export default function NewChallenge({ onDone }) {
         <motion.ul
           id="new-challenge-images"
           variants={{
-            visible: { transition: { staggerChildren: 0.05 } },
+            visible: { transition: { delayChildren: stagger(0.05) } },
           }}
         >
           {images.map((image) => (

code/26 Animations/10-orchestrating-multi-element-animations/src/components/NewChallenge.jsx

@@ -68,7 +68,7 @@ export default function NewChallenge({ onDone }) {
         <motion.ul
           id="new-challenge-images"
           variants={{
-            visible: { transition: { staggerChildren: 0.05 } },
+            visible: { transition: { delayChildren: stagger(0.05) } },
           }}
         >
           {images.map((image) => (

code/26 Animations/11-animating-shared-elements/src/components/NewChallenge.jsx

@@ -68,7 +68,7 @@ export default function NewChallenge({ onDone }) {
         <motion.ul
           id="new-challenge-images"
           variants={{
-            visible: { transition: { staggerChildren: 0.05 } },
+            visible: { transition: { delayChildren: stagger(0.05) } },
           }}
         >
           {images.map((image) => (

code/26 Animations/12-finished/src/components/NewChallenge.jsx

@@ -68,7 +68,7 @@ export default function NewChallenge({ onDone }) {
         <motion.ul
           id="new-challenge-images"
           variants={{
-            visible: { transition: { staggerChildren: 0.05 } },
+            visible: { transition: { delayChildren: stagger(0.05) } },
           }}
         >
           {images.map((image) => (