JQuery ScrollLeft with easing

Question

I am trying to scrollLeft with an easing applied.

It scrolls just fine if I took out the ease

$("#content").animate({ 
    scrollLeft: '+=' + $(window).width()
}, "slow");

But when I try to add an easing to the animation

$("#content").animate({ 
    scrollLeft: '+=' + $(window).width()
}, "slow", "easeInOutBounce");

I get an error that looks like: TypeError: m.easing[this.easing] is not a function

Any help would be appreciated

`easeInOutBounce` is a part of jQuery UI, it is not in the standard jQuery, only `linear` and `swing` are. See [jQuery Easing](http://api.jqueryui.com/easings/) — Alexander O'Mara, Jan 02 '15 at 20:18

score 2 · Answer 1 · answered Jan 02 '15 at 20:20

easeInOutBounce is not part of the default set of jQuery easings. You’ll need to include jQuery UI’s easing library to have access to this. Either just include the whole of jQuery UI, or build yourself a custom version of the library containing just the easing components. Include this after including jQuery and before your code.

score 1 · Answer 2 · answered Jan 02 '15 at 20:19

1

You have to add 'easeInOutBounce' to jquery easing array, otherwise you only can use 'linear' or 'swing'.

There are plugins to add easing curves to jquery, jquery-ui adds many of them including 'easeInOutBounce'

answered Jan 02 '15 at 20:19

Manolo Carrasco Moñino

9,723
1
22
27

score 1 · Answer 3 · edited Jun 20 '20 at 09:12

I think you need the JQuery UI to have access to this kind of easing.

Source (JQuery documentation):

Easing

The remaining parameter of .animate() is a string naming an easing function to use. An easing function specifies the speed at which the animation progresses at different points within the animation. The only easing implementations in the jQuery library are the default, called swing, and one that progresses at a constant pace, called linear. More easing functions are available with the use of plug-ins, most notably the jQuery UI suite.

JQuery ScrollLeft with easing

3 Answers3