将 Scrollmagic 添加到 Greensock 代码

Question

您好，我是 GreenSock 的新手，我需要一些帮助...

我想在这个 Greensock 代码中应用 Scrollmagic： codepen.io/GreenSock/pen/FqrEv

我希望： https://ihatetomatoes.net/svg-scrolling-animation-triggered-scrollmagic/

像第 2 点一样，我需要在元素位于视口中间时触发动画，但我做错了什么并且不起作用，默认情况下它仍然从页面加载开始。

这里是小提琴： https://jsfiddle.net/tk8k9g8u/3/

这是我的“弗兰肯斯坦”代码： 也许错误与时间线有关？

<script src='https://s3-us-west-2.amazonaws.com/s.cdpn.io/16327/SplitText.min.js'></script>
<script src='https://cdnjs.cloudflare.com/ajax/libs/gsap/1.19.0/TweenMax.min.js'></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/ScrollMagic/2.0.5/ScrollMagic.min.js"></script>

<script>

// 1. Controller
var controller = new ScrollMagic();


// 2. Timeline of effect

var quote = document.getElementById("quote"),
    mySplitText = new SplitText(quote, {type:"words"}),
    tl = new TimelineMax(),
    numWords = mySplitText.words.length;

//prep the quote div for 3D goodness
TweenLite.set(quote, {transformPerspective:600, perspective:300, transformStyle:"preserve-3d", autoAlpha:1});

//intro sequence
for(var i = 0; i < numWords; i++){
  tl.from(mySplitText.words[i], 1.5, {z:randomNumber(-500,300), opacity:0, rotationY:randomNumber(-40, 40)}, Math.random()*1.5);
}
tl.from(quote, tl.duration(), {rotationY:180, transformOrigin:"50% 75% 200", ease:Power2.easeOut}, 0);

//some helper functions
function randomNumber(min, max){
    return Math.floor(Math.random() * (1 + max - min) + min);
}

function rangeToPercent(number, min, max){
    return ((number - min) / (max - min));
}


// 3. Scene

var scene = new ScrollScene({triggerElement: "#testcontainer"})
    .addTo(controller)
    .setTween(tl);

</script>

Answer 1

我想主要是你错过了 animation.gsap 插件，但我做了一些其他的小改动（我不知道 jsfiddle 是否在某处显示差异），你能看到这个 fork 吗？

https://jsfiddle.net/tmaf3y8x/

变化：

添加了debug.addIndicators.js（仅用于调试目的）

将 Scrollmagic 替换为非缩小版本（因此它会在控制台中显示错误消息，例如缺少动画 gsap 插件）

已添加animation.gsap.js

也可以查看一些评论注释

$(function () { // ** wrap within onready **

    // 1. Controller
    // ** .Controller missing? **
    var controller = new ScrollMagic.Controller({addIndicators: true}); 

    // 2. Timeline of effect
    var quote = document.getElementById("quote"),
        mySplitText = new SplitText(quote, {type:"words"}),
        tl = new TimelineMax(),
        numWords = mySplitText.words.length;

    //prep the quote div for 3D goodness
    TweenLite.set(quote, {transformPerspective:600, perspective:300, transformStyle:"preserve-3d", autoAlpha:1});

    //intro sequence
    for(var i = 0; i < numWords; i++){
        tl.from(mySplitText.words[i], 1.5, {z:randomNumber(-500,300), opacity:0, rotationY:randomNumber(-40, 40)}, Math.random()*1.5);
    }
    tl.from(quote, tl.duration(), {rotationY:180, transformOrigin:"50% 75% 200", ease:Power2.easeOut}, 0);

    //some helper functions
    function randomNumber(min, max){
        return Math.floor(Math.random() * (1 + max - min) + min);
    }

    function rangeToPercent(number, min, max){
        return ((number - min) / (max - min));
    }


    // 3. Scene // ** ScrollScene or Scrollmagic.Scene? **
    var scene = new ScrollMagic.Scene({triggerElement: "#testcontainer"})
        .setTween(tl)
        .loglevel(3)
        .addIndicators()
        .addTo(controller);
});