GSAP ScrollMagic - setPin() 有问题

问题描述

我在这里问是因为我无法调试我的程序。我想做一个页面来垂直滚动，然后水平滚动到“测试”部分的末尾，然后再次垂直滚动。问题是 setPin() 不起作用......它完全是窃听

有人可以帮我吗？

<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="https://use.typekit.net/qua3omc.css">
    <link rel="stylesheet" href="style.css">

    <script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/latest/TweenMax.min.js"></script>

    <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/animation.gsap.js" integrity="sha512-judXDFLnOTJsUwd55lhbrX3uSoSQSOZR6vNrsll+4ViUFv+XOIr/xaIK96soMj6s5jVszd7I97a0H+WhgFwTEg==" 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/gsap/2.1.2/TweenLite.min.js" integrity="sha512-pvDW4tehKKsohH97164HwKwRGFpzayEFWTVbk8HuUoLIQ7Jp+WLN5XYokVuoCj2aT6dy8ihbW8SRTG1k0W4mSQ==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>

    <script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/2.1.2/TimelineLite.min.js" integrity="sha512-tSIDeirKC6suYILHqqPuZH3s0MvD4a5vCHXhBIcdmq4gQXZ2IB3fEYA5x2f3D2p/CbSqzKEvuTEVbS5VZ2u+ew==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>

    <script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/2.1.2/plugins/Cssplugin.min.js" integrity="sha512-ocsFo48WU8Xq6Y1Lwi7psXRAujG9E4TKNR4q1DbrKzaaxOMTEoao/a+mdob+cYzY4lwbyxvqjkp/ZA1/MNlfsg==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>

    <title>Document</title>
</head>

<body>


    <section id="test">
        <div class="big-bloc">
            <div class="bloc">

            </div>
            <div class="bloc">

            </div>
            <div class="bloc">

            </div>
            <div class="bloc">

            </div>
        </div>


    </section>


</body>

</html>

    <script>

const tweenbloc = new TimelineLite();

var bigbloc = document.getElementsByClassName('.big-bloc');
var width_bigbloc = bigbloc.offsetWidth;

tweenbloc.add(
    TweenLite.to('.bloc',1,{
        xPercent: -400,})
)

const controller = new ScrollMagic.Controller();

const bloc_scene = new ScrollMagic.Scene({
        triggerElement: '.big-bloc',duration: 500,triggerHook: 0.2
    })
    .setTween(tweenbloc)
    .addindicators()
    .setPin('#test')
    .addTo(controller);

</script>

我的 CSS

#test {
    width: 100%;
    height: 100vh;
    background-color: springgreen;
    overflow: hidden;
}

#test .big-bloc {
    background-color: wheat;
    overflow: hidden;
    display: flex;
}

#test .bloc {
    flex-shrink: 0;
    width: 300px;
    height: 300px;
    margin: 10px;
    background-color: violet;
}

非常感谢 :)

解决方法

暂无找到可以解决该程序问题的有效方法，小编努力寻找整理中！

如果你已经找到好的解决方法，欢迎将解决方案带上本链接一起发送给小编。

小编邮箱:dio#foxmail.com (将#修改为@）

gsap javascript scrollmagic