-
Notifications
You must be signed in to change notification settings - Fork 0
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
- Loading branch information
1 parent
bc0d917
commit 831cfa5
Showing
5 changed files
with
212 additions
and
131 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1 +1,102 @@ | ||
| Leveraging modern JavaScript features | ||
| 'use client' | ||
| import * as React from "react"; | ||
| import { useState } from "react"; | ||
| import { motion, AnimatePresence } from "framer-motion"; | ||
| import { wrap } from "popmotion"; | ||
|
|
||
|
|
||
| const images = [ | ||
| "https://d33wubrfki0l68.cloudfront.net/dd23708ebc4053551bb33e18b7174e73b6e1710b/dea24/static/images/wallpapers/[email protected]", | ||
| "https://d33wubrfki0l68.cloudfront.net/49de349d12db851952c5556f3c637ca772745316/cfc56/static/images/wallpapers/[email protected]", | ||
| "https://d33wubrfki0l68.cloudfront.net/594de66469079c21fc54c14db0591305a1198dd6/3f4b1/static/images/wallpapers/[email protected]" | ||
| ]; | ||
|
|
||
| const variants = { | ||
| enter: (direction: number) => { | ||
| return { | ||
| x: direction > 0 ? 1000 : -1000, | ||
| opacity: 0 | ||
| }; | ||
| }, | ||
| center: { | ||
| zIndex: 1, | ||
| x: 0, | ||
| opacity: 1 | ||
| }, | ||
| exit: (direction: number) => { | ||
| return { | ||
| zIndex: 0, | ||
| x: direction < 0 ? 1000 : -1000, | ||
| opacity: 0 | ||
| }; | ||
| } | ||
| }; | ||
|
|
||
| /** | ||
| * Experimenting with distilling swipe offset and velocity into a single variable, so the | ||
| * less distance a user has swiped, the more velocity they need to register as a swipe. | ||
| * Should accomodate longer swipes and short flicks without having binary checks on | ||
| * just distance thresholds and velocity > 0. | ||
| */ | ||
| const swipeConfidenceThreshold = 10000; | ||
| const swipePower = (offset: number, velocity: number) => { | ||
| return Math.abs(offset) * velocity; | ||
| }; | ||
|
|
||
| export const ImageSlides = () => { | ||
| const [[page, direction], setPage] = useState([0, 0]); | ||
|
|
||
| // We only have 3 images, but we paginate them absolutely (ie 1, 2, 3, 4, 5...) and | ||
| // then wrap that within 0-2 to find our image ID in the array below. By passing an | ||
| // absolute page index as the `motion` component's `key` prop, `AnimatePresence` will | ||
| // detect it as an entirely new image. So you can infinitely paginate as few as 1 images. | ||
| const imageIndex = wrap(0, images.length, page); | ||
|
|
||
| const paginate = (newDirection: number) => { | ||
| setPage([page + newDirection, newDirection]); | ||
| }; | ||
|
|
||
| return ( | ||
| <> | ||
|
|
||
| <AnimatePresence initial={false} custom={direction} > | ||
| <motion.div | ||
| className=" justify-center items-center flex border-black overflow-x-hidden overflow-y-hidden" | ||
| > | ||
| <motion.img | ||
| key={page} | ||
| src={images[imageIndex]} | ||
| custom={direction} | ||
| variants={variants} | ||
| initial="enter" | ||
| animate="center" | ||
| exit="exit" | ||
| transition={{ | ||
| x: { type: "spring", stiffness: 300, damping: 30 }, | ||
| opacity: { duration: .7 } | ||
| }} | ||
| drag="x" | ||
| dragConstraints={{ left: 0, right: 0 }} | ||
| dragElastic={1} | ||
| onDragEnd={(e, { offset, velocity }) => { | ||
| const swipe = swipePower(offset.x, velocity.x); | ||
|
|
||
| if (swipe < -swipeConfidenceThreshold) { | ||
| paginate(1); | ||
| } else if (swipe > swipeConfidenceThreshold) { | ||
| paginate(-1); | ||
| } | ||
| }} | ||
| /> | ||
| </motion.div> | ||
| </AnimatePresence> | ||
| <div className="next z-40 h-8 w-8 rounded-full absolute bg-white justify-center items-center flex top-20 left-2" onClick={() => paginate(1)}> | ||
| ◂ | ||
| </div> | ||
| <div className="prev z-40 h-8 w-8 rounded-full absolute bg-white justify-center items-center flex top-20 right-2 " onClick={() => paginate(-1)}> | ||
| ▸ | ||
| </div> | ||
|
|
||
| </> | ||
| ); | ||
| }; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Oops, something went wrong.