添加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); 
});