Анимация в реакции

Question

Я хочу воссоздать эту функцию / анимацию в реакции. Я хотел бы знать наиболее интуитивную библиотеку анимации для воссоздания анимации ниже. Я рассматривал возможность использования frame-motion, но я не уверен относительно того, как бы я использовал анимацию ниже, используя frame-motion, основываясь на примерах, которые я видел на их странице , поэтому я открыт для предложений в других библиотеках, которые надеются, немного более интуитивно понятны.

$(".startCTA , .videoCoverStart div").click(function() {
        $(".fade").css("display", "block");
        var showSteps = anime.timeline();

        showSteps
            .add({
                targets: ".stepsWrapp",
                translateX: ["408px", "0"],
                easing: "easeOutExpo",
                duration: "680"
            })
            .add({
                targets: ".opener",
                translateX: ["0", "-50px"],
                easing: "easeOutExpo",
                duration: "680",
                offset: "-=630"
            })
            .add({
                targets: ".fader",
                opacity: 0.3,
                easing: "easeOutExpo",
                duration: "1200",
                offset: "-=680"
            }); // Slide to Steps

        player.playVideo();
    }); // Start CTA Click

Answer 1

Вы можете использовать TweenMax , это самая популярная библиотека из всех, и ее довольно легко настроить, вы можете go просмотреть их документы для получения более подробной информации.