Add Scrollmagic to Greensock code

Question

Hallo I am pretty new to GreenSock and I need some help...

I would like to apply Scrollmagic at this Greensock code: codepen.io/GreenSock/pen/FqrEv

I was looking to: https://ihatetomatoes.net/svg-scrolling-animation-triggered-scrollmagic/

Like point 2 I need to fire the animation when the element is at the middle of the viewport, but I did something wrong and doesn't work, it still starts at pageload by default.

Here the fiddle: https://jsfiddle.net/tk8k9g8u/3/

Here my 'Frankenstein' code: maybe the error is someting related to the timeline?

<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

I think mainly you were missing the animation.gsap plugin, but I did some other little change (I don't know if jsfiddle show the diffs somewhere), can you see this fork?

https://jsfiddle.net/tmaf3y8x/

changes:

added debug.addIndicators.js (only for debug purpose)

replaced Scrollmagic with the non-minified version (so it show error messages in console, like the missing animation gsap plugin)

added animation.gsap.js

see some comment annotation too

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