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

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

1 Reply

Unknown User•2y ago

Message Not Public

Gaming

Programming

Off-Topic Animating using Framer