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

Question

所以基本上我有一個問題，我嘗試使用 scrollMagic 在我的滾動動畫中制作動畫。我的代碼是用 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;
}

這里的錯誤是在 setPin 部分的setPin useLayoutEffect()中的某個地方，我不知道為什么當我向下滾動時不會跟隨滾動..但只有在該部分完成滾動時才會停止。

指出這是我正在關注的事情，但它在反應中無法正常工作，我不知道為什么 T_T ..這真的讓我很痛苦，我一直在為 scrollTrigger 和 scrollMagic 煩惱，因為 scrollTrigger在滾動完成該部分之前，沒有滾動不會移動該部分..無論如何這是普通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 做同樣的事情 - 這應該消除所有與遺留相關的問題，並使您的代碼防彈