スクロールでCSSがアニメーションをスクロールするとジッタが発生する

Question

EDIT：CSSトランジションの代わりにJavaScriptアニメーションを使用していました。コードサンプルは、JSが要素の翻訳にのみ使用され、CSSはそれをアニメーション化するために使用される実際の例を示しています。

私はこのウェブサイトで見た特定の効果：https://draft.co.jp/en/projects/page/geechsを達成しようとしています。

高さが固定されたボディエレメント内に固定されたメインセクションを使用します（スクロールバーを生成するため）。スクロールした後、メイン要素内のすべての要素を$（window）.scrollTop（）の比率で変換します。この効果を滑らかにするアニメーションを使用します。

私はこのエフェクトを再作成しようとしていましたが、コードをスクロールした後にジッタ付きのエクスペリエンスが生成されます。 （例としてhttps://codepen.io/blauwhelm/pen/LRorNAを参照）。

多くのアニメーションを生成すると（この例ではjqueryプラグインを使って変換プロパティをアニメーション化しています）、この問題が発生しているようです。トリガーの量を制限するためにスロットルを使ってみましたが、これで問題は解決されません。

私のjavascript：

$(document).ready(function() { 

var $mainElement = $('.main__element'); 

function smoothScroller(e) { 
    var scrollTop = $(window).scrollTop(); 
    console.log('scroll trigger'); 
    $mainElement.stop(true, false).transition({y: -scrollTop}, 3000, "cubic-bezier(.19,0.88,0,.99)", function() { 
     console.log('end animation'); 
    }); 
} 

$(window).bind('scroll', smoothScroller); 
}); 

は、どういうわけか私も理解していない「スクロールトリガ」より多くの「末端アニメーション」メッセージがあります。

私はジッタのあるアニメーションをどのように修正できますか？

ありがとうございます！

Answer 1

彼らはGreensockのGSAPを大きく使用しています。これは素晴らしいlibですが、エンタープライズソリューションとまともな学習曲線です。

開始するには、​​と調整方法（この例ではlodashを使用しています）をチェックしてください。 translateY（またはX、または3D）を使用して

は、ここでHTML/CSS/JSとJSBinデモだあまりにも代わりtop

を使用することができますが、ここでは、関連するビットです：

JS

var ticking = false, 
    item = document.querySelectorAll('.item'); 


// RAF 
function update() { 
    ticking = false; 
    item[0].style.transform = 'translateY('+window.scrollY+'px)'; 
} 

function onScroll() { 
    ticking = ticking || requestAnimationFrame(update); 
} 

window.addEventListener('scroll', onScroll, false); 


// Scroll Throttle 
function throttled_version() { 
    item[1].style.transform = 'translateY('+window.scrollY+'px)'; 
} 

window.addEventListener('scroll', _.throttle(throttled_version, 16), false); 

CSSを付与すると、transitionも流動性を助けることができます。この場合は50msだけ繰り返し発生します。それは速度/運動量の効果をシミュレートします。