

test1をスクロールに合わせて、画面内にでてきたらfadeInさせたいです。  
ブラウザを読み込み、そのままスクロールするだけでしたら問題ないですが、  
スクロールしたい要素の上にある.accordion-title 詳しくはこちら
を開いた状態でスクロールすると、開閉により高さが変わり、test1がブラウザに出て来る前にfadein済みになってしまいます。  
invalidateOnRefreshの使い方に誤りがあると思うのですが、解決できません。  
よろしくお願い致します。

[code]

      <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,
        },
      }
    );
    
[/code]


CC BY-SA 4.0
2023-08-30T05:04:17.577
96074
2023-08-30T06:38:52.420
2023-08-30T06:27:48.727
59156
59156
question
javascript html css
アコーディオンの開閉によって変わる高さをgsapに伝えたい


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


CC BY-SA 4.0
2023-08-30T06:38:52.420
96077
2023-08-30T06:38:52.420
59156
96074
answer