Need help with creating an animation

[AlexanderPershin]

Hello,
I'm new to react-spring and I need to create vertically aligned list of items that will self-scroll up over time in such a way that top item will appear at the bottom, like all items part of wheel. Also middle item should be bigger than others, and first and last items should be smaller

I tried to use useTransition hook and just unshift first item from array and push it back with a different key, but the whole list moves to top without any animation when first item is removed, that breaks all the effect

Can someone please suggest how should I setup this animation?
Visual representation

• ____first item____

• __second item__

• _third item_

• __fourth item__

• ____fifth item____

[joshuaellis]

I would use useSprings where each item has it's own spring. If you remove the scaling of the items, it's just an infinite carousel so you could check out this guide – https://ironeko.com/posts/ininite-carousel-with-react-spring-how-to and then you include the scaling effect to the items that require it via the springs, note I've used the word scale, I would not change the font-size etc. I would just scale the element.

To do this isn't crazy hard, but imo it's a difficult animation to do, so just a heads up as to what you're getting yourself into.

[AlexanderPershin]

Thanks for the answer,
I'll try to implement it the way you described and post the result

[joshuaellis]

If you think the answer is correct, please feel free to mark it so.

[AlexanderPershin]

So, I used useSpring instead of useTransition it already looks better, more smooth
Here is code

import React, { useEffect, useState } from "react";
import data from "../../data";
import s from "./style.module.sass";
import cn from "classnames";
import { useSpring, animated, config, to } from "@react-spring/web";

const ListSprings = () => {
    const [showingItems, setShowingItems] = useState(data);

    const cfg = { ...config.molasses, duration: 1450 };

    const propsFirst = useSpring({
        from: {
            opacity: 1,
        },
        to: {
            opacity: 0,
        },
        zIndex: -1,
        config: cfg,
        reset: true,
    });

    const propsLast = useSpring({
        from: {
            opacity: 0,
            transform: "scale(0) translateY(0rem)",
        },
        to: {
            opacity: 1,
            transform: "scale(1) translateY(-5rem)",
        },
        zIndex: -1,
        config: cfg,
        reset: true,
    });

    const { scales, ty } = useSpring({
        from: {
            scales: [1.25, 1.5, 1.25, 1, 0.5],
            ty: [0, 0, 0, 0, -5],
        },
        to: {
            scales: [0.5, 1.25, 1.5, 1.25, 1],
            ty: [-5, -5, -4, -5, -8],
        },
        config: cfg,
        reset: true,
    });

    const zIndexes = [1, 2, 3, 2, 1];

    const getStyles = (i) => {
        if (i === 0)
            return {
                opacity: propsFirst.opacity.to((op) => op),
                transform: to(
                    [scales, ty],
                    (sc, ty) => `scale(${sc[0]}) translateY(${ty[0]}rem)`
                ),
            };
        if (i === 4)
            return {
                opacity: propsLast.opacity.to((op) => op),
                transform: to(
                    [scales, ty],
                    (sc, ty) => `scale(${sc[4]}) translateY(${ty[4]}rem)`
                ),
            };
        return {
            transform: to([scales, ty], (sc, ty) => {
                return `scale(${sc[i]}) translateY(${ty[i]}rem)`;
            }),
            zIndex: zIndexes[i],
        };
    };

    const renderItems = () => {
        return showingItems.slice(0, 5).map((item, i) => (
            <animated.div
                style={getStyles(i)}
                key={item.id}
                className={cn(s.ListItem, "shadow", "rounded", "text-muted")}
            >
                {item.label}
            </animated.div>
        ));
    };

    useEffect(() => {
        const intervalId = setInterval(() => {
            let newShowingItems = [...showingItems];
            const first = newShowingItems.shift();
            newShowingItems = [...newShowingItems, first];
            if (first) {
                setShowingItems(newShowingItems);
            } else {
                setShowingItems(data);
            }
        }, 1500);
        return () => {
            clearInterval(intervalId);
        };
    }, [showingItems]);

    return (
        <div className={s.wrapper}>
            <h1 className="text-center text-danger mb-3">List of springs</h1>
            <div className={cn(s.ListSprings, "shadow")}>{renderItems()}</div>
        </div>
    );
};

export default ListSprings;

Though I had to use duration, so I might as well keep useTransition, because it disables physics
Basically, the solution is achieved by guessing timings and numbers for scale and translate for transformation
I'm probably still missing something here