[EXAMPLE] with-framer-motion: fix broken images (#16714)

* refactor: remove useless console.log

* fix: replace broken images

* Updated title

Co-authored-by: Luis Alvarez <luis@vercel.com>
Co-authored-by: kodiakhq[bot] <49736102+kodiakhq[bot]@users.noreply.github.com>

Author: 3 people

examples/with-framer-motion/components/Gallery.js

@@ -35,7 +35,7 @@ const Thumbnail = ({ id, i }) => (
       >
         <Link href="/image/[index]" as={`/image/${i}`} scroll={false}>
           <motion.img
-            src={`https://static1.squarespace.com/static/5b475b2c50a54f54f9b4e1dc/t/${id}.jpg?format=1500w`}
+            src={`https://images.unsplash.com/${id}?auto=format&fit=crop&w=1500`}
             alt="The Barbican"
             variants={imageVariants}
             transition={transition}
@@ -69,7 +69,7 @@ const Thumbnail = ({ id, i }) => (
 
 const Gallery = () => (
   <>
-    <h1>Barbican</h1>
+    <h1>Motion</h1>
     <div className="gallery">
       <motion.div
         className="thumbnails"
@@ -118,14 +118,14 @@ const Gallery = () => (
              bottom: -130px;
            }
          }
-         
+
          @media screen and (min-width: 800px) {
            h1 {
              font-size: 180px;
              bottom: -170px;
            }
          }
-         
+
          @media screen and (min-width: 1000px) {
            h1 {
              font-size: 220px;

examples/with-framer-motion/components/SingleImage.js

@@ -28,7 +28,7 @@ const SingleImage = ({ index }) => (
     <motion.div className="single" initial="exit" animate="enter" exit="exit">
       <motion.img
         variants={imageVariants}
-        src={`https://static1.squarespace.com/static/5b475b2c50a54f54f9b4e1dc/t/${images[index]}.jpg?format=1500w`}
+        src={`https://images.unsplash.com/${images[index]}?auto=format&fit=crop&w=1500`}
         alt="The Barbican"
       />
       <motion.div className="back" variants={backVariants}>

examples/with-framer-motion/constants.js

@@ -1,8 +1,8 @@
 export const images = [
-  '5b5a3938562fa764113169a6/1532639559620/DSCF3338',
-  '5b5a3628f950b7390fbfc5f8/1532639027872/DSCF3246',
-  '5b5a3741575d1fccb5ac6b3f/1532639066455/DSCF3268',
-  '5b5a376b0e2e728eeeaca8e4/1532683586969/DSCF3274',
-  '5b5c228403ce64f3c80d4d8e/1532764845121/DSCF3348',
-  '5b5a3b800e2e728eeead9575/1532640158813/DSCF3375',
+  'photo-1520517601640-32ec514e4a15',
+  'photo-1518780535463-bc357fa46e64',
+  'photo-1555068178-89125fb6356d',
+  'photo-1553503359-d4ff2537a6ea',
+  'photo-1585211751845-37663b4ab614',
+  'photo-1496467115032-c504ef76521b',
 ]

examples/with-framer-motion/pages/image/[index].js

@@ -17,7 +17,6 @@ export async function getStaticProps({ params }) {
 export async function getStaticPaths() {
   return {
     paths: images.map((_id, index) => {
-      console.log(index)
       return {
         params: {
           index: `${index}`,