From 3f9e2ebd63b65683eb9137612a9f120539684fcf Mon Sep 17 00:00:00 2001
From: Peter Neave <7982708+peterneave@users.noreply.github.com>
Date: Wed, 17 Sep 2025 11:04:52 +1000
Subject: [PATCH] Move away from depreciated staggerChildren to delayChildren
 instead

See documentation https://motion.dev/docs/react-transitions#delaychildren
---
 .../src/components/NewChallenge.jsx                       | 8 ++++----
 .../src/components/NewChallenge.jsx                       | 4 ++--
 .../src/components/NewChallenge.jsx                       | 2 +-
 .../src/components/NewChallenge.jsx                       | 2 +-
 .../src/components/NewChallenge.jsx                       | 2 +-
 .../src/components/NewChallenge.jsx                       | 2 +-
 .../12-finished/src/components/NewChallenge.jsx           | 2 +-
 7 files changed, 11 insertions(+), 11 deletions(-)

diff --git a/code/26 Animations/06-animating-staggered-lists/src/components/NewChallenge.jsx b/code/26 Animations/06-animating-staggered-lists/src/components/NewChallenge.jsx
index 2fddd0070..103e0442b 100644
--- a/code/26 Animations/06-animating-staggered-lists/src/components/NewChallenge.jsx	
+++ b/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
diff --git a/code/26 Animations/07-animating-colors-and-keyframes/src/components/NewChallenge.jsx b/code/26 Animations/07-animating-colors-and-keyframes/src/components/NewChallenge.jsx
index f7a34e224..3c04f3ad1 100644
--- a/code/26 Animations/07-animating-colors-and-keyframes/src/components/NewChallenge.jsx	
+++ b/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) => (
diff --git a/code/26 Animations/08-imperative-animations/src/components/NewChallenge.jsx b/code/26 Animations/08-imperative-animations/src/components/NewChallenge.jsx
index 006ff429d..c898ee241 100644
--- a/code/26 Animations/08-imperative-animations/src/components/NewChallenge.jsx	
+++ b/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) => (
diff --git a/code/26 Animations/09-animating-layout-changes/src/components/NewChallenge.jsx b/code/26 Animations/09-animating-layout-changes/src/components/NewChallenge.jsx
index d2ee16049..681980500 100644
--- a/code/26 Animations/09-animating-layout-changes/src/components/NewChallenge.jsx	
+++ b/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) => (
diff --git a/code/26 Animations/10-orchestrating-multi-element-animations/src/components/NewChallenge.jsx b/code/26 Animations/10-orchestrating-multi-element-animations/src/components/NewChallenge.jsx
index d2ee16049..681980500 100644
--- a/code/26 Animations/10-orchestrating-multi-element-animations/src/components/NewChallenge.jsx	
+++ b/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) => (
diff --git a/code/26 Animations/11-animating-shared-elements/src/components/NewChallenge.jsx b/code/26 Animations/11-animating-shared-elements/src/components/NewChallenge.jsx
index d2ee16049..681980500 100644
--- a/code/26 Animations/11-animating-shared-elements/src/components/NewChallenge.jsx	
+++ b/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) => (
diff --git a/code/26 Animations/12-finished/src/components/NewChallenge.jsx b/code/26 Animations/12-finished/src/components/NewChallenge.jsx
index d2ee16049..681980500 100644
--- a/code/26 Animations/12-finished/src/components/NewChallenge.jsx	
+++ b/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) => (