Slideshow with preview

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Praesent elementum facilisis leo vel fringilla est ullamcorper eget. At imperdiet dui accumsan sit amet nulla facilities morbi tempus. Praesent elementum facilisis leo vel fringilla. Congue mauris rhoncus aenean vel. Egestas sed tempus urna et pharetra pharetra massa massa ultricies.

src/App.js


import { motion } from "framer-motion"
const transition = { duration: 1 }
export default function App() {
  const bg = "hsl(20, 100%, 50%)"
  return (
    <div className="container">
      <motion.div
        className="swatch"
        animate={{
          backgroundColor: bg,
        }}
        transition={transition}
      />
    </div>
  )
}

Lorem ipsum dolor sit amet, consectetur adipiscing something about points, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

Middle

src/App.js


import { motion } from "framer-motion"
const transition = { duration: 1 }
export default function App() {
  const bg = "hsl(20, 100%, 50%)"
  return <div className="container"> </div>
}

Rest

Consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Praesent elementum facilisis leo vel fringilla est ullamcorper eget. At imperdiet dui accumsan sit amet nulla facilities morbi tempus. Praesent elementum facilisis leo vel fringilla. Congue mauris rhoncus aenean vel. Egestas sed tempus urna et pharetra pharetra massa massa ultricies.