Версии scrollmagi c и gsap в реакции не совпадают с версией dev - PullRequest
Новая
       102

Версии scrollmagi c и gsap в реакции не совпадают с версией dev

0 голосов
/ 07 марта 2020

Я пытаюсь использовать библиотеки ScrollMagi c & gsap в реакции, все было нормально, пока я не попытался построить свой код, я перепробовал все решения по импорту, которые мог найти в Интернете, но, похоже, он не работает таким же образом.

Я создал список карт, который прокручивается по горизонтали, когда достигается какой-то раздел, в версии dev он ведет себя именно так, но когда я в рабочей версии (после сборки), он прокручивается в диагональный путь.

Вот мой код и то, как я установил библиотеки:

установка gsap: 

npm i gsap

установка scrollmagi c: 

npm i scrollmagic

мой код реагирует: 

import React, { Component } from 'react';
import ReactDOM from 'react-dom'
import { TweenMax, TimelineLite, TimelineMax, TweenLite, Linear } from "gsap/all"; // Also works with TweenLite and TimelineLite
import * as ScrollMagic from "scrollmagic/scrollmagic/uncompressed/ScrollMagic"; // Or use scrollmagic-with-ssr to avoid server rendering problems
import { ScrollMagicPluginGsap } from "scrollmagic-plugin-gsap";
import './listCardsH.css';
import Image from '../images/Image';
import Titles from '../titles/Titles';

ScrollMagicPluginGsap(ScrollMagic, TweenMax, TimelineLite);

class ListCardsH extends Component {


    componentDidMount (){
        TweenLite.defaultEase = Linear.easeNone;
        var titles = ReactDOM
                    .findDOMNode(this.refs['title1'])
                    .getBoundingClientRect()
        console.log(titles)
        var controller = new ScrollMagic.Controller();

        // var tl = new TimelineLite();
        // tl.to("#js-slideContainer", 1, {x:'-100%'})
        var tl = new TimelineMax()
            .add(TweenMax.to('#js-slideContainer', 1, {x: '-70%'}))

            new ScrollMagic.Scene({
                triggerElement: '#bigTrigger',
                triggerHook: 0,
                duration: '100%'
            })
            .setPin("#titleId", {pushFollowers: false})
            .addTo(controller);


        new ScrollMagic.Scene({
        triggerElement: "#bigTrigger",
        triggerHook: 0  ,
        duration: "100%"
        })
        .setPin("#js-slideContainer")
        .setTween(tl)
        .addTo(controller);   



}

    render() {
        return (
            <div className="containerWrapper" id="bigTrigger">
                <div className='bigTitle' id='titleId'>
                    <Titles></Titles>
                </div>
                <div className="wrapper" id="js-wrapper" >
                    <div className="sections " id="js-slideContainer">
                        <div className='childCardH section' ref='title1'>
                            <div className='sectionTitle'>
                                <Image  srcImg='https://www.inform.kz/radmin/news/2019/11/03/191103143718887e.jpg'></Image>
                            </div>
                        </div>
                        <div className='childCardH section' ref='title1'>
                            <div className='sectionTitle'>
                                <Image srcImg='https://www.inform.kz/radmin/news/2019/11/03/191103143718887e.jpg'></Image>
                            </div>
                        </div>
                        <div className='childCardH section' ref='title1'>
                            <div className='sectionTitle'>
                                <Image srcImg='https://www.inform.kz/radmin/news/2019/11/03/191103143718887e.jpg'></Image>
                            </div>
                        </div>
                    </div>
                </div>
            </div>

        );
    }
}

export default ListCardsH;

CSS

.wrapper {
  width: 130%;
  height: 100%;
  perspective: 1000;
  -webkit-perspective: 1000;
  perspective-origin: 0;
  -webkit-perspective-origin: 0;
  overflow: hidden;
}

.section {
  height: 120%;
  width: calc( 100% / 3);
  float: left;
  position: relative;

}
.sections {
  width: 100%;
  height: 50vh; 
  /* Change this height to move the images up and down */
}
.sectionTitle {
  position: absolute;
  width: 40vw;
  top: 50%;
  left: 120%;
  -webkit-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
  font-size: 30px;
  color: #fff;
}

.bigTitle {
  width: 100vw;
  text-align:center;
  padding-right: 10vw;
}

1 Ответ

0 голосов
/ 09 марта 2020

Проблема, которая вызывала это нежелательное поведение, была элементом perspective на css, добавление перспективы необходимо при использовании 3D-анимации, но в этом случае ее не следует использовать, поскольку анимация представляет собой просто 2-мерную прокрутку. , который преобразует вертикальную прокрутку в горизонтальную, мне потребовалось пару дней, чтобы понять это, и я надеюсь, что это поможет другим создавать такие приятные анимации. Были некоторые другие проблемы с моим кодом, но я исправил все и хотел поделиться этим, чтобы он мог быть ссылкой на любого, кто захочет сделать что-то подобное.

Пожалуйста, ознакомьтесь с финальной версией моего кода ниже живое демо на CodePen:

Живое демо 'React + ScrollMagi c + Gsap: ​​Горизонтальное с заостренным заголовком вверху', созданное мной.

...