スマホ フリックスライダーでの緩急の付け方

Question

フリック距離からスピード等を計算してスライダーを作っています。
slideX1 に座標を入れて基本的な動きは問題ないのですが

$('#slider').css({'transform':'translate3d('+slideX1+'px, 0,0)'});

animation-timing-function：ease-out

求められるのがAmazonのスマホ版の様な止まり方で ease-out とかで指定するよりも緩急が多く
停止後にまた余韻の様なアニメーションを追加しても「かっくん」と言った感じで不自然になります。

Keyflame で ％毎に移動距離を指定しても やはり境目が不自然になります。
setTimeout で終了を見計らって アニメーションを繋げても 不自然なパターンが出ます。

現在 setInterval で監視をして 指定座標を超えたらアニメーションを差し替える と言う感じのことをしていますが、こちらも $('#slider').css({'transform':'none'}); のタイミングで不自然になります。

					if( $('#slider').position().left <= slideX2 ){
						if( ivf == 0 ){

			 				 $('#slider').css({'transform':'none'});



							$('#slider').css({
									'transition-duration':'900ms',
									'animation-timing-function':'cubic-bezier(0.6, 0.9, 0.1, 0.9) '
						//			'animation-timing-function':'linear'

								});



							setTimeout(function(){
								$('#slider').css({'transform':'translate3d('+slideX1+'px, 0,0)'});
								$('#vartest').html("★>>"+$('#slider').position().left+"<br>siv1:"+ivf+"/X2:"+slideX2+"/X1:"+slideX1);

								ivf = 1;



							},1);
						}
					}

停止後の余韻を追加したいのですが、根本的な考え方が違うのか、何か良い方法は無いでしょうか？

Answer 1

amazonのスマホ版（webブラウザ）の「新商品情報」の部分の横スライドのような動きを実装されるようでしたら、
cssアニメーションで実装されるのではなくoverflow:scroll-x;を使用されたほうがいいのではないかと思います。
実際にamazonのソースコードを読んでもoverflowで実装されていました。

スライドさせたい親要素に

.l-wrap{
  overflow:hidden;/* スライドを囲うものなのでoverflow:hidden;で画面外は見えないようにする */
}

.l-items{
  overflow-x: scroll; /* 横にスクロールするようにする */
}

こういう感じで実装できると思います。

見当違いだったらごめんなさい！

Comments

[nahisa]

こちらの回答をヒントにして進めた結果、「-webkit-overflow-scrolling: touch;」で理想の挙動となりました。
わざわざjsでCSSアニメーション処理を書く必要すらありませんでした。
こんなCSSがあるとは目からウロコでした。
ありがとうございます！

[MasakazuFukami]

僕の答えちょっと違ったんですね（笑）
とりあえず解決してよかったです！