Я пытался создать боковую панель навигации, используя scrollmagic и tweenlite-timelinelite (для анимации). Все работает нормально в моем коде, когда я прокручиваю вниз, но когда я прокручиваю вверх, вся анимация портится. Есть идеи, почему это происходит?
Вот пример моего кода, где я воспроизвожу мою проблему. https://codepen.io/b10z/pen/poowWzo
var controller = new ScrollMagic.Controller();
var timeline1 = new TimelineLite();
var timeline2 = new TimelineLite();
var timeline3 = new TimelineLite();
var dotBack1 = TweenLite.fromTo("#about_b", 0.2, {backgroundColor:"#555556"}, { backgroundColor: "#100C3C" } );
var dotsBack11 = TweenLite.fromTo(["#services_b", "#contact_b"], 0.2, {
backgroundColor: "#555556"
},{ backgroundColor: "#555556", overwrite:false });
timeline1.add(dotBack1).add(dotsBack11);
var scene0 = new ScrollMagic.Scene({
triggerElement: "#about",
triggerHook: "0.9"
})
.setTween(timeline1)
.setClassToggle("#about", "fade-in")
.addTo(controller);
/*----------------------------------------*/
var dotBack2 = TweenLite.fromTo("#services_b",0.2, {backgroundColor:"#555556"}, { backgroundColor: "#100C3C", overwrite:false } );
var dotsBack22 = TweenLite.fromTo(["#about_b", "#contact_b"], 0.2, {
backgroundColor: "#555556"
},{ backgroundColor: "#555556", overwrite:false });
timeline2.add(dotBack2).add(dotsBack22);
var scene0 = new ScrollMagic.Scene({
triggerElement: "#s_id",
triggerHook: "0.9"
})
.setTween(timeline2)
.setClassToggle("#s_id", "fade-out")
.addTo(controller);
var dotBack3 = TweenLite.fromTo("#contact_b", 0.2, {backgroundColor:"#555556"}, { backgroundColor: "#100C3C",overwrite:false } );
var dotsBack33 = TweenLite.fromTo(["#about_b", "#services_b"], 0.2, {
backgroundColor: "#555556"
},{ backgroundColor: "#555556", overwrite:false });
timeline3.add(dotBack3).add(dotsBack33);
var scene0 = new ScrollMagic.Scene({
triggerElement: "#c_id",
triggerHook: "0.9"
})
.setTween(timeline3)
.setClassToggle("#c_id", "fade-out")
.addTo(controller);
#about{
height:1000px;
}
#s_id{
height:1000px;
}
#c_id{
height:1000px;
}
.sidebar {
position:absolute;
right:0;
}
.dot {
display:inline-block;
width:20px;
height:20px;
background-color:rgba(255,255,255,.3);
border-radius:10px;
z-index:999; content:'';
color:transparent;
font-size:14px;
line-height:10px;
vertical-align:middle;
margin:5px 0 5px 0;
font-weight:300;
}
.dot:hover {
background-color:rgba(255,255,255,.8);
color:rgba(255,255,255,.8);
}
.dot span {
margin:0px 0px 20px 15px;
position:relative;
top:0px;
left:-80px;
}
.name-inactive{
background-color:#555556;
transition: all 0.2s ease-out;
}
nav[role="sub"] {
display: inline;
width:100px;
height:200px;/*background-color:rgb(240,240,240); border:solid 1px rgb(220,220,220);*/
padding:0 0px; position:fixed;
top:50%;
right:20px;
transform:
translate(0, -50%);
z-index: 25;
text-align:right;
}
nav[role="sub"] ul li a {
text-decoration:none;
}
nav[role="sub"] ul {
list-style-type:none;
margin:0; padding:0;
}
#about{
opacity: 0;
transition: all 1s ease-out;
}
#about.fade-in{
opacity: 1;
}
#s_id{
opacity: 0;
transition: all 1s ease-out;
}
#s_id.fade-out{
opacity: 1;
}
#c_id{
opacity: 0;
transition: all 1s ease-out;
}
#c_id.fade-out{
opacity: 1;
}
<div class="container">
<!-- SIDEBAR -->
<div class="sidebar">
<nav role="sub">
<ul>
<li><a href="#about" id="about_b" class="dot name-inactive"><i id="bt2"><span>About</span></i></a></li>
<li><a href="#s_id" id="services_b" class="dot name-inactive"><i id="bt3"><span>Services</span></i></a></li>
<li><a href="#c_id" id="contact_b" class="dot name-inactive"><i id="bt4"><span>Contact</span></i></a></li>
</ul>
</nav>
</div>
</div>
<div class="about-item" id="about">
Compliment interested discretion estimating on stimulated apartments oh. Dear so sing when in find read of call. As distrusts behaviour abilities defective is. Never at water me might. On formed merits hunted unable merely by mr whence or. Possession the unpleasing simplicity her uncommonly.
Difficulty on insensible reasonable in. From as went he they. Preference themselves me as thoroughly partiality considered on in estimating. Middletons acceptance discovered projecting so is so or. In or attachment inquietude remarkably comparison at an. Is surrounded prosperous stimulated am me discretion expression. But truth being state can she china widow. Occasional preference fat remarkably now projecting uncommonly dissimilar. Sentiments projection particular companions interested do at my delightful. Listening newspaper in advantage frankness to concluded unwilling.
Scarcely on striking packages by so property in delicate. Up or well must less rent read walk so be. Easy sold at do hour sing spot. Any meant has cease too the decay. Since party burst am it match. By or blushes between besides offices noisier as. Sending do brought winding compass in. Paid day till shed only fact age its end.
Man request adapted spirits set pressed. Up to denoting subjects sensible feelings it indulged directly. We dwelling elegance do shutters appetite yourself diverted. Our next drew much you with rank. Tore many held age hold rose than our. She literature sentiments any contrasted. Set aware joy sense young now tears china shy.
</div>
<div class="services_class" id=s_id>
Compliment interested discretion estimating on stimulated apartments oh. Dear so sing when in find read of call. As distrusts behaviour abilities defective is. Never at water me might. On formed merits hunted unable merely by mr whence or. Possession the unpleasing simplicity her uncommonly.
Difficulty on insensible reasonable in. From as went he they. Preference themselves me as thoroughly partiality considered on in estimating. Middletons acceptance discovered projecting so is so or. In or attachment inquietude remarkably comparison at an. Is surrounded prosperous stimulated am me discretion expression. But truth being state can she china widow. Occasional preference fat remarkably now projecting uncommonly dissimilar. Sentiments projection particular companions interested do at my delightful. Listening newspaper in advantage frankness to concluded unwilling.
Scarcely on striking packages by so property in delicate. Up or well must less rent read walk so be. Easy sold at do hour sing spot. Any meant has cease too the decay. Since party burst am it match. By or blushes between besides offices noisier as. Sending do brought winding compass in. Paid day till shed only fact age its end.
Man request adapted spirits set pressed. Up to denoting subjects sensible feelings it indulged directly. We dwelling elegance do shutters appetite yourself diverted. Our next drew much you with rank. Tore many held age hold rose than our. She literature sentiments any contrasted. Set aware joy sense young now tears china shy.
</div>
<div class="contact-item" id="c_id">
<br>
Compliment interested discretion estimating on stimulated apartments oh. Dear so sing when in find read of call. As distrusts behaviour abilities defective is. Never at water me might. On formed merits hunted unable merely by mr whence or. Possession the unpleasing simplicity her uncommonly.
Difficulty on insensible reasonable in. From as went he they. Preference themselves me as thoroughly partiality considered on in estimating. Middletons acceptance discovered projecting so is so or. In or attachment inquietude remarkably comparison at an. Is surrounded prosperous stimulated am me discretion expression. But truth being state can she china widow. Occasional preference fat remarkably now projecting uncommonly dissimilar. Sentiments projection particular companions interested do at my delightful. Listening newspaper in advantage frankness to concluded unwilling.
Scarcely on striking packages by so property in delicate. Up or well must less rent read walk so be. Easy sold at do hour sing spot. Any meant has cease too the decay. Since party burst am it match. By or blushes between besides offices noisier as. Sending do brought winding compass in. Paid day till shed only fact age its end.
Man request adapted spirits set pressed. Up to denoting subjects sensible feelings it indulged directly. We dwelling elegance do shutters appetite yourself diverted. Our next drew much you with rank. Tore many held age hold rose than our. She literature sentiments any contrasted. Set aware joy sense young now tears china shy.
</div>