Обратная анимация с помощью ScrollMagic - PullRequest
Новая
       92

Обратная анимация с помощью ScrollMagic

0 голосов
/ 30 ноября 2018

Я хочу, чтобы раздел веб-страницы контролировался ScrollMagic.Будет набор слайдов, закрепленных и с эффектом затухания, изменяющими их при прокрутке страницы.

Это работает, когда я прокручиваю сверху вниз, но когда достигаю конца страницы и прокручиваю вверх,анимации нет.

Как мне добиться такого же поведения в обратном направлении? 

	$(function () { 
		var controller = new ScrollMagic.Controller({
			globalSceneOptions: {
				triggerHook: 'onLeave'
			}
		});

		var slides = document.querySelectorAll("section.panel");

		for (var i=0; i<slides.length; i++) {
            var animation = TweenMax.to(slides[i], 1, { autoAlpha: 1, ease: Quad.easeInOut});
            var options = { triggerElement: slides[i] };
            if(i === slides.length-1){
                options['duration'] = 0;
            }
			var scene = new ScrollMagic.Scene(options)
				.setPin(slides[i])
                .setTween(animation)
                .addIndicators();
            scene.addTo(controller);
		}
	});
.panel {
  display: flex;
  height: 100vh;
  width: 100%;
  background-color: white;
  opacity: 0;
}
.panel.first {
  opacity: 1;
}
.panel.last{
margin-bottom: 400px;
}
.panel .column {
  width: 50%;
}
.panel .column.vertical-center {
  margin: auto 0;
  padding: 0 5em;
}
.panel .column .section-title {
  font-size: 2.5rem;
  font-weight: 700;
  margin-bottom: 1rem;
  color: black;
  line-height: 1.1;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<section id="slide1" class="panel first">
  <div class="column left"></div>
  <div class="column vertical-center">
    <div class="section-title">
      SLIDE 1
    </div>
    <p>Description</p>
  </div>
</section>
<section id="slide1" class="panel">
  <div class="column left"></div>
  <div class="column vertical-center">
    <div class="section-title">
      SLIDE 2
    </div>
    <p>Description</p>
  </div>
</section>
<section id="slide1" class="panel">
  <div class="column left"></div>
  <div class="column vertical-center">
    <div class="section-title">
      SLIDE 3
    </div>
    <p>Description</p>
  </div>
</section>
<section id="slide1" class="panel">
  <div class="column left"></div>
  <div class="column vertical-center">
    <div class="section-title">
      SLIDE 4
    </div>
    <p>Description</p>
  </div>
</section>
<section id="slide1" class="panel">
  <div class="column left"></div>
  <div class="column vertical-center">
    <div class="section-title">
      SLIDE 5
    </div>
    <p>Description</p>
  </div>
</section>
<section id="slide6" class="panel last">
  <div class="column left"></div>
  <div class="column vertical-center">
    <div class="section-title">
      SLIDE 6
    </div>
    <p>Description</p>
  </div>
</section>
<script src="//cdnjs.cloudflare.com/ajax/libs/ScrollMagic/2.0.6/ScrollMagic.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/gsap/2.0.2/TweenMax.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/ScrollMagic/2.0.6/plugins/animation.gsap.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/ScrollMagic/2.0.6/plugins/debug.addIndicators.min.js"></script>

1 Ответ

0 голосов
/ 18 января 2019

Параметр сцены reverse должен обработать это.По умолчанию он установлен на true и должен воспроизводить анимацию в обратном порядке при прокрутке вверх.Вот где вы устанавливаете параметр: 

var scene = new ScrollMagic.Scene({
    duration: 100,
    triggerHook: 1,
    reverse: true
    });

или добавляете его здесь: 

var scene = new ScrollMagic.Scene({
    duration: 100,
    triggerHook: 1
    }).reverse(true)
...