Анимация перед изменением Screne с помощью Scrollmagic - PullRequest
Новая
       74

Анимация перед изменением Screne с помощью Scrollmagic

0 голосов
/ 08 мая 2020

Возможно ли каким-то образом запускать анимацию в конце каждой сцены, например, затухание текста, и чтобы следующая сцена запускалась только после того, как это затухание завершено?

Текущая попытка ниже, но он только добавляет класс и не дожидается его завершения. В основном анимация движения была бы идеальной, если, например, в этом случае непрозрачность изменяется при прокрутке, и после этого будет запущена следующая сцена 

    var controller = new ScrollMagic.Controller({
        globalSceneOptions: {
            triggerHook: 'onLeave',
            duration: "200%" // this works just fine with duration 0 as well
            // However with large numbers (>20) of pinned sections display errors can occur so every section should be unpinned once it's covered by the next section.
            // Normally 100% would work for this, but here 200% is used, as Panel 3 is shown for more than 100% of scrollheight due to the pause.
        }
    });

    // get all slides
    var slides = document.querySelectorAll("section");

    // create scene for every slide
    for (var i = 0; i < slides.length; i++) {
        new ScrollMagic.Scene({
            triggerElement: slides[i]
        })
            .setPin(slides[i], { pushFollowers: false })
            .addTo(controller)
            .setClassToggle(slides[i], "animate");
    }
/*
	Demo Styles: NOT REQUIRED
*/
html,
body {
  margin: 0;
  height: 100%
}

h1,
p {
  margin: 0;
  padding: 0;
}

header {
  position: fixed;
  top: 10px;
  left: 10px;
}

section {
  text-align: center;
  color: #EFEFEF;
}

section.animate p {
  opacity: 0.2;
  transition: all ease 2.5s;
}

section p {
  transition: all ease 2.5s;
}

.full-screen {
  height: 100%; /* makes panels the entire window height */
}

.blue {
  display: flex;
  justify-content: center;
  align-items: center;
}

.blue {
	background-color: #3883d8;
}
.red {
	background-color: #cf3535;
}
.orange {
	background-color: #ea6300;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/ScrollMagic/2.0.1/ScrollMagic.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<main class="full-screen" role="main">
  <section class="full-screen blue">
    <div>
      <h1>Basic Pin</h1>
      <p>Elements are pinned for their respective pixel value set as the duration and released again.</p>
    </div>
  </section>

  <section id="pinned-trigger1" class="full-screen orange">
    <div id="pinned-element1">
      <p>This element will be pinned once it's trigger hits the top of the viewport and will have a duration of window height minus 100</p>
    </div> 
  </section>

  <section id="pinned-trigger2" class="full-screen red">
    <div id="pinned-element2">
      <p>This element will be pinned for a duration of 150px</p>
    </div>
  </section>
  
  <section class="full-screen blue">
    <div>
      <p>Section Four!</p>
    </div>
  </section>
</main>
...