ScrollMagic 控制器不是构造函数错误

问题描述

我一直在关注 Dev ED (youtuber) scrollmagic 教程，然后我收到了一个错误我已经尝试了多种解决方案和教程，但我一直被卡住 main.js:9 Uncaught TypeError: ScrollMagic.controller 不是构造函数在 main.js:9 html

    <!DOCTYPE html>
<html lang="en">
<head>
    <Meta charset="UTF-8">
    <Meta name="viewport" content="width=device-width,initial-scale=1.0">
    <link rel="stylesheet" href="style.css">
    <title>Ezy Virtual</title>
</head>
<body>
    <header>
        <img class="logo" src="images/1280px-EasyJet_logo.png" height="34px" width="150px" alt="logo">
        <nav>
            <ul class="nav_links">
                <li><a href="# ">About Us</a></li>
                <li><a href="#">Our vision</a></li>
                <li><a href="#">Contact Us</a></li>
            </ul>
        </nav>
        <a class="cta" href="#"><button>Join us</button></a>
    </header>
    <section>
        <div class="intro">
        <h1>EasyJet virtual</h1>
        <video id="video" src="../FP/vids/landing.mp4">
        </video>
        <div id="long"></div>
        </div>
    </section>
    <section class="section2">
        <h1>Hello</h1>
    </section>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/2.1.3/TweenMax.min.js" integrity="sha512-DkPsH9LzNzZaZjCszwKrooKwgjArjdiEjA5tTgr3YX4E6TYv93ICS8T41yFHJnnSmGpnf0Mvb5NhScYbwvhn2w==" crossorigin="anonymous"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/ScrollMagic/2.0.8/ScrollMagic.js" integrity="sha512-UgS0SVyy/0fZ0i48Rr7gKpnP+Jio3oC7M4XaKP3BJUB/guN6Zr4BjU0Hsle0ey2HJvPLHE5YQCXTDrx27Lhe7A==" crossorigin="anonymous"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/ScrollMagic/2.0.8/plugins/animation.gsap.js" integrity="sha512-judXDFLnOTJsUwd55lhbrX3uSoSQSOZR6vNrsll+4ViUFv+XOIr/xaIK96soMj6s5jVszd7I97a0H+WhgFwTEg==" crossorigin="anonymous"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/ScrollMagic/2.0.8/plugins/debug.addindicators.js" integrity="sha512-mq6TSOBEH8eoYFBvyDQOQf63xgTeAk7ps+MHGLWZ6Byz0BqQzrP+3GIgYL+KvLaWgpL8XgDVbIRYQeLa3Vqu6A==" crossorigin="anonymous"></script>
    <script src="main.js"></script>
</body>
</html>

css

    .section2 {
    height: 100vh;
    color: black;
}

.intro {
    height: 100vh;
}

.intro video{
    height: 100%;
    width: 100%;
    object-fit: cover;
}

.intro h1 {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%,-50%);
    font-size: 50px;
    color: white;
}

Javascript

    const intro = document.querySelector('.intro');
const video = intro.querySelector('video');
const text = intro.querySelector('h1');
//end
const section = document.querySelector('section');
const end = section.querySelector('h1');

//scroll magic
let controller = new ScrollMagic.controller();
//scene
const scene = new ScrollMagic.scene({
    duration:9000,triggerElement: intro,triggerHook: 0
})
.addindicators
.setPin(intro)
.addTo(controller);

let scene2 = new ScrollMagic.scene({
    duration: 3000,triggerHook: 0
})
.setTween(textAnim)
.addTo(controller);

//text animation
const textAnim = TweenMax.fromTo(text,3,{opacity: 1},{opacity: 0});

//vid animation
let accelamount = 0.1;
let scrollpos = 0;
let delay = 0;

scene.on('update',e =>{
    scrollpos = e.scrollPos / 1000;
});

setInterval(() => {
    delay += (scrollpos - delay) * accelamount;
    console.log(scrollpos,delay);

    Video.currentTime = delay;
},33.3);

请帮助我是编程新手，需要快速排序，谢谢

解决方法

控制器需要用大写的“C”写

let controller = new ScrollMagic.Controller();

javascript scrollmagic