test1をスクロールに合わせて、画面内にでてきたらfadeInさせたいです。
ブラウザを読み込み、そのままスクロールするだけでしたら問題ないですが、
スクロールしたい要素の上にある.accordion-title 詳しくはこちら を開いた状態でスクロールすると、開閉により高さが変わり、test1がブラウザに出て来る前にfadein済みになってしまいます。
invalidateOnRefreshの使い方に誤りがあると思うのですが、解決できません。
よろしくお願い致します。
<section class="sotowaku">
<h1>テスト</h1>
<div class="container">
<div class="click accordion-title">詳しくはこちら</div>
<div class="show">
</div>
</div>
</section>
<section class="apple"></section>
<section class="voice">
<ul class="js-trigger1">
<li class="test1"></li>
<li class="test2"></li>
</ul>
</section>
.sotowaku {
background-color: #d0e7ff;
padding: 2.5rem 2rem;
}
.show {
height: 225rem;
display: none;
}
.apple{
height: 58rem;
}
.voice .test1 {
background-color: blue;
width: 100%;
height: 20rem;
margin: 0 auto;
}
.voice .test2{
background-color: red;
}
$('.accordion-title').on('click', function(e) {
var content = $(this).next();
content.slideToggle();
$(this).toggleClass('open');
setTimeout(function () {
invalidateOnRefresh();
}, 500);
});
gsap.fromTo(
".test1",
{
x: -100,
autoAlpha: 0,
},
{
x: 0,
autoAlpha: 1,
scrollTrigger: {
trigger: ".js-trigger1",
start: "top 80%",
markers: true,
},
}
);