Scroll Magic Parallax Problem

Question

Я просто пытаюсь создать базовый 2-слойный эффект параллакса с scrollmagic на моей индексной странице с гигантским изображением и содержимым под ним. Я смотрел несколько раз по документации и исходного кода, но это не похоже на работу, и я не знаю, что я пропускаю:

HTML:

<div class="row zero-padding parallaxParent" id="parallax1"> 
    <div class="col-xs-12 zero-padding index--background" style="background-image: url('{{ backgroundimage.picture.url }}')"> 
    <h1>MACRO FOODS</h1> 
    <h2>Healthy made easy</h2> 
    </div> 
</div> 


<div class="row zero-padding"> 
    <div class="col-xs-12 index--title"> 
    <p> What is Macro Foods?</p> 
    </div> 
</div> 
<div class="row zero-padding index--blockwrap"> 
    <div class="col-xs-12 col-md-8"> 
    <p class="index--body">{{ whatismacrofoods.text }} 
    </div> 
    <div class="col-xs-12 col-md-4"> 
    <img class="index--image" src="{{ imagesindex1.picture.url }}"> 
    </div> 
</div> 

<script src="//cdnjs.cloudflare.com/ajax/libs/ScrollMagic/2.0.5/ScrollMagic.min.js"></script> 
<script src="//cdnjs.cloudflare.com/ajax/libs/ScrollMagic/2.0.5/plugins/debug.addIndicators.min.js"></script> 
<!--Custom--> 
<script src="{% static 'scripts/main.js' %}"></script> 
<script src="{% static 'scripts/parallax.js' %}"></script> 

CSS:

.parallaxParent { 
    height: 100vh; 
    overflow: hidden; 
} 

.parrallaxParent > * { 
    height: 200%; 
    position: relative; 
    top: -100%; 
} 

parallax.js:

//Parallax Scrollmagic 
var controller = new ScrollMagic.Controller({globalSceneOptions: {triggerHook: "onEnter", duration: "200%"}}); 

new ScrollMagic.Scene({triggerElement: "#parallax1", duration: "120%"}) 
.setTween("#parallax1 > div", {y: "80%", ease: Linear.easeNone}) 
.addIndicators() 
.addTo(controller); 

new ScrollMagic.Scene({triggerElement: "#parallax2"}) 
.setTween("#parallax2 > div", {y: "80%", ease: Linear.easeNone}) 
.addIndicators() 
.addTo(controller); 

new ScrollMagic.Scene({triggerElement: "#parallax3"}) 
.setTween("#parallax3 > div", {y: "80%", ease: Linear.easeNone}) 
.addIndicators() 
.addTo(controller); 

Answer 1

EDIT после редактирования оригинального поста:

Я не вижу TweenMax.js и animation.gsap.js в вашем коде - или это как-то включено в другие скрипты?

---

Еще одно дополнение после второй комментарий:

TweenMax.js можно ссылаться как этот

<script src="http://cdnjs.cloudflare.com/ajax/libs/gsap/latest/TweenMax.min.js"></script> 

animation.gsap.js как это:

<script src="http://cdnjs.cloudflare.com/ajax/libs/gsap/1.18.0/plugins/CSSPlugin.min.js"></script> 

но вы также должны найти его в " плагинов "вашей папки" scrollmagic ".