Скроллмагические прыгучие анимационные картинки с реагирующим и дружелюбным подростком - PullRequest
Новая
       104

Скроллмагические прыгучие анимационные картинки с реагирующим и дружелюбным подростком

0 голосов
/ 31 октября 2019

Я пытаюсь реализовать простую анимацию прокрутки с помощью response-scrollmagic и Reaction-gsap. Я хочу, чтобы поле медленно двигалось в фоновом режиме, а часть текста - слева направо. Прямо сейчас анимация очень нервная, и я не совсем уверен, почему.

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

Вот коды и ящик с проблемой. Пример CodeSandbox

А вот код: 

import React, { useRef } from "react";
import { Controller, Scene } from "react-scrollmagic";
import { Tween } from "react-gsap";

const Services = () => {
  const ref = useRef(null);
  return (
    <Controller>
      <Scene triggerElement={ref.current} duration="200%">
        {progress => (
          <section ref={ref}>
            <Tween
              from={{
                y: "0"
              }}
              to={{
                y: "40%"
              }}
              totalProgress={progress}
            >
              <div className="bg" />
            </Tween>

            <div className="container">
              <div className="row">
                <div className="col-lg-12">
                  <div className="wrapper">
                    <div className="overlay" />
                    <Tween
                      from={{
                        x: "0"
                      }}
                      to={{
                        x: "40%"
                      }}
                      totalProgress={progress}
                    >
                      <p>Get Started</p>
                    </Tween>
                  </div>
                </div>
              </div>
            </div>
          </section>
        )}
      </Scene>
    </Controller>
  );
};

export default Services;

Буду признателен за любую помощь, если кто-нибудь узнает об этом.

...