Добавить Scrollmagic в код Гринсок

Question

Привет, я новичок в GreenSock и мне нужна помощь...

Я хотел бы применить Scrollmagic в этом коде Greensock: 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), вы можете увидеть этот форк?

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