Проблема Зависает React интерфейс

[xstrasupra]

Тебе нужно transition и transform translate, используя CSS

Всю карусель сделать на CSS?

 

[kirillzver]

Эта часть SVG но эта часть обычная статичная картинка, другая зеленая палочка это тоже SVG, предлагаете передать картинки на CSS?

Предлагаю переделать процесс анимации прокрутки на CSS, а картинки SVG попробуй просто отключить на время, чтобы убедиться, что не в них проблема.

 

[xstrasupra]

Предлагаю переделать процесс анимации прокрутки на CSS, а картинки SVG попробуй просто отключить на время, чтобы убедиться, что не в них проблема.

Попробую варианты все

 

[xstrasupra]

import React, { useRef } from 'react';

const ScrollableTileContainer = ({ activeIndex }) => {
    const containerRef = useRef(null);

    const scrollToActiveTile = (instant = false) => {
        if (!containerRef.current) return;

        const container = containerRef.current;
        const tiles = container.children;

        if (tiles.length > activeIndex && tiles[activeIndex]) {
            const tile = tiles[activeIndex];
            const offsetLeft = tile.offsetLeft - container.offsetWidth / 2 + tile.offsetWidth / 2;
            container.scrollTo({
                left: offsetLeft,
                behavior: instant ? "auto" : "smooth",
            });
        }
    };

    useEffect(() => { // Центрируем активный элемент при изменении индекса
        scrollToActiveTile();
    }, [activeIndex]);

Забыл скинуть ещё анимации, как в этом случае будет правильно поступить:

 

[ubees]

Забыл скинуть ещё анимации, как в этом случае будет правильно поступить:

так и будет как ты написал

useEffect(() => { // Центрируем активный элемент при изменении индекса
        scrollToActiveTile();
    }, [activeIndex]);

 

[Inoi]

Всю карусель сделать на CSS?

React Playground

Try this online React Playground playground with instant live preview and console. Easy & Fast. Experiment yourself.

playcode.io

 

[Vermilion]

React Playground

Try this online React Playground playground with instant live preview and console. Easy & Fast. Experiment yourself.

playcode.io

Зашел по ссылке, 5 хуёв накидали. Не рекомендую.

 

[xstrasupra]

Кароче все решилось, мой пк говно ничего не вывез, нужна оптимизация или перевести в ксс

 

[DeAAmoN]