添加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显示diff文件的地方），你可以看到这个叉？

https://jsfiddle.net/tmaf3y8x/

变化：

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

取代Scrollmagic与非精缩版（所以它显示在控制台错误信息，如缺少动画GSAP的插件）

添加animation.gsap.js

SE e一些注释注释

$(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); 
});