为什么我的scrollMagic不能正常工作？

Question

所以基本上，我有一个问题，我试着用scrollMagic..My代码在我的滚动动画中用reactjs编写动画，但我不知道为什么它在普通html、javascript和css中的工作方式不一样。这是密码。

import React, { useEffect, useLayoutEffect } from 'react'
import img from './images/Apple-Logo.png'
import ScrollTrigger from 'gsap/ScrollTrigger'
import ScrollMagic from 'scrollmagic'
import {Power3,gsap,TweenMax, TimelineMax} from 'gsap'
import { ScrollMagicPluginGsap } from "scrollmagic-plugin-gsap";

import a1 from './images/a1.jfif'
import a2 from './images/a2.jfif'
import a3 from './images/a3.jpg'
import a4 from './images/a4.jfif'
import a5 from './images/a5.jfif'

function Home() {

    useLayoutEffect(() => {
        ScrollMagicPluginGsap(ScrollMagic, TweenMax, TimelineMax)
        const controller = new ScrollMagic.Controller()

        const tl = new TimelineMax()

        tl.from('.box-screener',1,{opacity:0,x:"45%",ease:"none"})
        tl.to('.box-screener',0.5,{opacity:1,x:"70%",ease:"none"})

        const scene = new ScrollMagic.Scene({
            triggerElement:".falling-categories-absolute",
            triggerHook:"onLeave",
            duration:"100%"
        })
        .setPin('.falling-categories-absolute')
        .setTween(tl)
            .addTo(controller)

    },[])
    
    return (
        <div className='home'>
            <div className="falling-categories-absolute">
                <div className="products-title">
                    <h2> Products </h2>
                </div>

                <div className="box-screener"></div>

            </div>
            <div className="LowerBound">

            </div>
        </div>
    )
}

export default Home

对于css来说，它是这样的

.home {
    /* position: relative; */
    /* overflow: hidden; */
    display: block;
    height: 100%;
}

.LowerBound {
    width: 100%;
    height: 100vh;
    background: rgba(128, 128, 128, 0.233);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
}

.falling-categories-absolute {
    /* width: 100%; */
    background: orange;
    height: 100vh;
    position: relative;    
    overflow: hidden;
    box-sizing: border-box;
}
.products-title {
    position: absolute;
    top: 30%;
    left: 20%;
    z-index: 1000;
    font-size: 45px;
    font-style: italic;
}

.box-screener {
    position: absolute;
    width:200px;
    height:200px;
    background: black;
    top: 45%;
    left: 45%;
    transition: all 0.5s ease-in-out;
}

这里的错误就在我的useLayoutEffect()中setPin的某个部分，其中我不知道为什么当我向下滚动时不会跟踪scroll..but，只有当滚动在这一部分中完成时，scroll..but才会停止。

要指出这是我所关注的事情，但它在反应中不正常工作，我不知道为什么T_T..This在我的屁股上很痛苦，我一直困扰着scrollTrigger和scrollMagic，因为scrollTrigger没有一个滚动条，直到在这个part..Anyway上完成滚动，这是普通html部分中的代码。

​

var tl = new TimelineMax({onUpdate:updatePercentage});
var tl2 = new TimelineMax();
const controller = new ScrollMagic.Controller();

tl.from('blockquote', .5, {x:200, opacity: 0});
tl.from('span', 1, { width: 0}, "=-.5");
tl.from('#office', 1, {x:-200, opacity: 0,ease: Power2.easeInOut}, "=-1");
// tl.to('span', 1, { width: "50%"}, "=-.5");
tl.from('#building', 1, {x:200, opacity: 0, ease: Power2.easeInOut}, "=-.7");

tl2.from("#box", 1, {opacity: 0, scale: 0});
tl2.to("#box", .5, {left: "20%", scale: 1.3, borderColor: 'white', borderWidth: 12, boxShadow: '1px 1px 0px 0px rgba(0,0,0,0.09)'})

const scene = new ScrollMagic.Scene({
  triggerElement: ".sticky",
            triggerHook: "onLeave",
            duration: "100%"
})
  .setPin(".sticky")
  .setTween(tl)
        .addTo(controller);

const pogi = []

const scene2 = new ScrollMagic.Scene({
  triggerElement: "blockquote"
})
  .setTween(tl2)
        .addTo(controller);


function updatePercentage() {
  //percent.innerHTML = (tl.progress() *100 ).toFixed();
  tl.progress();
  console.log(tl.progress());
}

@import url("https://fonts.googleapis.com/css?family=Arapey");
body {
  margin: 0;
  font-family: "Arapey";
}
body h1 {
  font-size: 2em;
  text-align: center;
  margin-top: 30%;
}

section {
  padding: 3em;
  height: 100vh;
  position: relative;
  box-sizing: border-box;
}
section blockquote {
  font-size: 2.3em;
  width: 30%;
  margin-top: 17%;
  position: absolute;
}
section blockquote span {
  width: 100%;
  background: red;
  display: block;
  height: 5px;
  margin-top: 20px;
}
section img {
  position: absolute;
}
section img:nth-of-type(1) {
  width: 40%;
  right: 0;
  top: 20%;
}
section img:nth-of-type(2) {
  width: 25%;
  right: 40%;
  top: 29%;
  margin-top: 15%;
}

section:nth-child(odd) {
  background: #f1f1f1;
}

.sticky {
  background: white !important;
}


#box {
  width: 100px;
  height: 100px;
  position: absolute;
  border: 5px solid lightgray;
  margin: auto;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
}

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="style.css">
    <script src="https://cdnjs.cloudflare.com/ajax/libs/ScrollMagic/2.0.8/ScrollMagic.min.js" integrity="sha512-8E3KZoPoZCD+1dgfqhPbejQBnQfBXe8FuwL4z/c8sTrgeDMFEnoyTlH3obB4/fV+6Sg0a0XF+L/6xS4Xx1fUEg==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/ScrollMagic/2.0.8/plugins/debug.addIndicators.min.js" integrity="sha512-RvUydNGlqYJapy0t4AH8hDv/It+zKsv4wOQGb+iOnEfa6NnF2fzjXgRy+FDjSpMfC3sjokNUzsfYZaZ8QAwIxg==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/ScrollMagic/2.0.8/plugins/animation.gsap.min.js" integrity="sha512-5/OHwmQzDSBS0Ous4/hlYoWLHd06/d2r7LdKZQVBXOA6PvOqWVXtdboiLTU7lQTGyVoKVTNkwi0ol4gHGlw5ww==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
    <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/gsap/2.1.3/TweenMax.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/2.1.3/TimelineMax.min.js"></script>
    <title>Document</title>
</head>
<body>
    <section>
        <h1>Scroll down</h1>
    </section>

    <section class="sticky">
        <blockquote>"You should totally subscribe to my channel now"<span></span></blockquote>
        <img id="office" src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/2621168/office1.png">
        <img id="building" src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/2621168/sky.jpg">
        <div id="box"></div>
    </section>

    <section>
        <h1>Scroll up</h1>
    </section>

    <script src="./index.js"></script>

</body>
</html>

​

Answer 1

首先，

请务必使用最新的GSAP版本(3+) --这看起来像很旧的代码

第二

如果可能的话，我强烈建议使用https://greensock.com/docs/v3/Plugins/ScrollTrigger

它是为使用GSAP而构建的，并且执行ScrollMagic所做的相同的事情--这将消除所有与遗留相关的问题，并使您的代码防弹。