Off-Topic Animating using Framer
I'm trying to build a vertical carousel in react and I'm really stuck on how to actually animate the position changes
This might be a fundamental misunderstanding about how framer motion works etc, any help is really appreciated
import { type NextPage } from "next";
import Head from "next/head";
import Link from "next/link";
import { useState, useRef, useEffect } from "react";
import { motion, AnimatePresence } from "framer-motion";
const Home: NextPage = () => {
const itemNames = ["item1", "item2", "item3", "item4", "item5"];
const minItems = 20;
let itemArr: string[] = [];
if (itemNames.length < minItems) {
const timesMultiplied = Math.ceil(minItems / itemNames.length);
for (let i = 0; i < timesMultiplied; i++) {
itemArr = itemArr.concat(itemNames);
}
}
const [itemOrder, setItemOrder] = useState(itemArr);
return (
<>
<Head>
<title>Create T3 App</title>
<meta name="description" content="Generated by create-t3-app" />
<link rel="icon" href="/favicon.ico" />
</Head>
<main>
{/* Infinite Vertical Carousel */}
<AnimatePresence>
<div className=" relative grid max-h-[1300px] grid-cols-1 gap-5 overflow-y-hidden bg-slate-300 transition-all">
{itemOrder.map((item, i) => {
const pos = i;
return (
<motion.div
className={
"absolute top-0 h-24 w-80 border border-solid border-gray-500 transition-all" +
(i == 5 ? " bg-red-500" : "")
}
key={i}
style={{
top: pos * 110,
}}
onClick={() => {
console.log(pos);
}}
layout
>
{item}
</motion.div>
);
})}
</div>
</AnimatePresence>
<button
onClick={() => {
const arrayCopy = [...itemOrder];
const lastItem = arrayCopy.pop() as string;
arrayCopy.unshift(lastItem);
setItemOrder(arrayCopy);
}}
>
Shift Down
</button>
</main>
</>
);
};
export default Home;import { type NextPage } from "next";
import Head from "next/head";
import Link from "next/link";
import { useState, useRef, useEffect } from "react";
import { motion, AnimatePresence } from "framer-motion";
const Home: NextPage = () => {
const itemNames = ["item1", "item2", "item3", "item4", "item5"];
const minItems = 20;
let itemArr: string[] = [];
if (itemNames.length < minItems) {
const timesMultiplied = Math.ceil(minItems / itemNames.length);
for (let i = 0; i < timesMultiplied; i++) {
itemArr = itemArr.concat(itemNames);
}
}
const [itemOrder, setItemOrder] = useState(itemArr);
return (
<>
<Head>
<title>Create T3 App</title>
<meta name="description" content="Generated by create-t3-app" />
<link rel="icon" href="/favicon.ico" />
</Head>
<main>
{/* Infinite Vertical Carousel */}
<AnimatePresence>
<div className=" relative grid max-h-[1300px] grid-cols-1 gap-5 overflow-y-hidden bg-slate-300 transition-all">
{itemOrder.map((item, i) => {
const pos = i;
return (
<motion.div
className={
"absolute top-0 h-24 w-80 border border-solid border-gray-500 transition-all" +
(i == 5 ? " bg-red-500" : "")
}
key={i}
style={{
top: pos * 110,
}}
onClick={() => {
console.log(pos);
}}
layout
>
{item}
</motion.div>
);
})}
</div>
</AnimatePresence>
<button
onClick={() => {
const arrayCopy = [...itemOrder];
const lastItem = arrayCopy.pop() as string;
arrayCopy.unshift(lastItem);
setItemOrder(arrayCopy);
}}
>
Shift Down
</button>
</main>
</>
);
};
export default Home;This might be a fundamental misunderstanding about how framer motion works etc, any help is really appreciated
Was this page helpful?
