Возможно ли каким-то образом запускать анимацию в конце каждой сцены, например, затухание текста, и чтобы следующая сцена запускалась только после того, как это затухание завершено?
Текущая попытка ниже, но он только добавляет класс и не дожидается его завершения. В основном анимация движения была бы идеальной, если, например, в этом случае непрозрачность изменяется при прокрутке, и после этого будет запущена следующая сцена
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>