Как в React создать текст, бегущий по кривой линии?

Question

Она должна двигаться. По такой кривой линии. Пытался крутить что-нибудь с svg, с текстом работает. Но не могу добавить логотипы. Может кто сталкивался с таким. Либа какая есть для этого. Спасибо

Answer 1

Решил с помощью использования библиотеки GSAP и плагина MotionPathPlugin.

Установить gsap
Импортировать import { gsap } from 'gsap'; import MotionPathPlugin from 'gsap/MotionPathPlugin';
Настроить.

Ниже мой пример. Но можно почитать. Настроек много. Можно выбрать для себя все что необходимо.

gsap.registerPlugin(MotionPathPlugin);
const tl = gsap.timeline({
    defaults: {
        duration: 1,
        ease: 'none',
        repeat: -1,
        repeatDelay: 6,
        autoRemoveChildren: true,
    },
});
useLayoutEffect(() => {
    tl.to('#curverText0', {
        duration: 15,
        motionPath: {
            path: '#curve',
            align: '#curve',
            autoRotate: true,
            alignOrigin: [0.5, 0.5],
        },
    })
        .to('#curverText1', {
            duration: 15,
            delay: -14,
            motionPath: {
                path: '#curve',
                align: '#curve',
                autoRotate: true,
                alignOrigin: [0.5, 0.5],
            },
        })
        .to('#curverText2', {
            duration: 15,
            delay: -14,
            motionPath: {
                path: '#curve',
                align: '#curve',
                autoRotate: true,
                alignOrigin: [0.5, 0.5],
            },
        })
        .to('#curverText3', {
            duration: 15,
            delay: -14,
            motionPath: {
                path: '#curve',
                align: '#curve',
                autoRotate: true,
                alignOrigin: [0.5, 0.5],
            },
        })
        .to('#curverText4', {
            duration: 15,
            delay: -14,
            motionPath: {
                path: '#curve',
                align: '#curve',
                autoRotate: true,
                alignOrigin: [0.5, 0.5],
            },
        })

В качестве path: '#curve' использовал svg кривую.

<svg
            width="1572"
            height="764"
            viewBox="0 0 1572 764"
            fill="none"
            xmlns="http://www.w3.org/2000/svg"
        >
            <path
                id="curve"
                d="M1.0897 763.494C57.6942 715.299 294.24 504.092 578.043 538.445C758.246 560.257 1099.43 487.283 1113.91 262.345C1128.39 37.4069 1408.87 0.0568685 1571.17 0.940575"
                stroke="white"
            />
        </svg>
        <div id="curverText" className={styles.curverText}>
            {STACK_ELEMENT.map(({ title, src, width, height }, idx) => (
                <div id={`curverText${idx}`} className={styles.curverTextItem} key={title}>
                    {src !== '' && (
                        <Image src={src} alt={title} width={width} height={height} />
                    )}
                    {title}
                </div>
            ))}
        </div>

БЛОГ НА HUSL

Как в React создать текст, бегущий по кривой линии?

Ответы (1 шт):