0

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,
    },
  }
);

1 件の回答 1

0

自己解決いたしました。
使用するプロパティに誤りがありました。
ScrollTrigger.refresh()にて、できるようになりました。

この質問に回答するには、ログインする必要があります。

求めていた回答ではありませんか? のタグが付いた他の質問を参照する。