{"id":4812,"date":"2020-08-30T17:56:00","date_gmt":"2020-08-30T17:56:00","guid":{"rendered":"https:\/\/azoora.com\/blog\/?p=4812"},"modified":"2020-08-17T18:17:20","modified_gmt":"2020-08-17T18:17:20","slug":"butterjs-create-smooth-momentum-scrolling-effects","status":"publish","type":"post","link":"https:\/\/azoora.com\/blog\/code\/butterjs-create-smooth-momentum-scrolling-effects\/","title":{"rendered":"ButterJs: Create Smooth Momentum Scrolling Effects"},"content":{"rendered":"\n<h2>Description:<\/h2>\n\n\n\n<p>Butter.js is a plain JavaScript library that applies a smooth momentum scrolling (also called inertial rolling) to any scrollable elements on the web.<\/p>\n\n\n\n<p>Inspired by luxy.js library. Use this library to bring an iOS scroll experience to your web app.<\/p>\n\n\n\n<!--more-->\n\n\n\n<h2>How to use it:<\/h2>\n\n\n\n<p>1. Download and import the butter.js library into the document.<\/p>\n\n\n\n<pre class=\"wp-block-preformatted\">&lt;script src=\".\/butter.js\"&gt;&lt;\/script&gt;<\/pre>\n\n\n\n<p>2. Add your scrollable element into a container with the ID of \u2018butter\u2019. That\u2019s it.<\/p>\n\n\n\n<pre class=\"wp-block-preformatted\">&lt;div id=\"butter\"&gt;\n  List Or Grid Item 1\n  List Or Grid Item 2\n  List Or Grid Item 3\n  ...\n&lt;\/div&gt;<\/pre>\n\n\n\n<p>3. Override the default wrapper ID.<\/p>\n\n\n\n<pre class=\"wp-block-preformatted\">butter.init({\n  wrapperId: 'butter'\n});<\/pre>\n\n\n\n<p>4. Disable the Momentum Scrolling Effects on mobile devices. Default: false.<\/p>\n\n\n\n<pre class=\"wp-block-preformatted\">butter.init({\n  cancelOnTouch: true\n});<\/pre>\n\n\n\n<p>5. Set the damping factor. Default: 0.08<\/p>\n\n\n\n<pre class=\"wp-block-preformatted\">butter.init({\n  wrapperDamper: 0.06\n});<\/pre>\n\n\n\n<blockquote class=\"wp-block-quote\"><p><strong>Author<\/strong>: BCJdevelopment<\/p><p><strong>Official Page<\/strong>: <a href=\"https:\/\/github.com\/BCJdevelopment\/butter.js\">GitHub<\/a><\/p><p><strong>Download<\/strong>: <a href=\"https:\/\/github.com\/BCJdevelopment\/butter.js\/archive\/master.zip\">Link<\/a><\/p><\/blockquote>\n","protected":false},"excerpt":{"rendered":"<p>Description: Butter.js is a plain JavaScript library that applies a smooth momentum scrolling (also called inertial rolling) to any scrollable elements on the web. Inspired by luxy.js library. Use this library to bring an iOS scroll experience to your web app.<\/p>\n","protected":false},"author":2,"featured_media":4813,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"spay_email":"","jetpack_publicize_message":"","jetpack_is_tweetstorm":false},"categories":[4,145,12],"tags":[25,146,87,90],"jetpack_featured_media_url":"https:\/\/azoora.com\/blog\/wp-content\/uploads\/2020\/08\/Create-Smooth-Momentum-Scrolling-Effects-Butter.js.png","jetpack_publicize_connections":[],"jetpack_shortlink":"https:\/\/wp.me\/p7FQPL-1fC","jetpack-related-posts":[],"jetpack_sharing_enabled":true,"jetpack_likes_enabled":true,"_links":{"self":[{"href":"https:\/\/azoora.com\/blog\/wp-json\/wp\/v2\/posts\/4812"}],"collection":[{"href":"https:\/\/azoora.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/azoora.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/azoora.com\/blog\/wp-json\/wp\/v2\/users\/2"}],"replies":[{"embeddable":true,"href":"https:\/\/azoora.com\/blog\/wp-json\/wp\/v2\/comments?post=4812"}],"version-history":[{"count":1,"href":"https:\/\/azoora.com\/blog\/wp-json\/wp\/v2\/posts\/4812\/revisions"}],"predecessor-version":[{"id":4814,"href":"https:\/\/azoora.com\/blog\/wp-json\/wp\/v2\/posts\/4812\/revisions\/4814"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/azoora.com\/blog\/wp-json\/wp\/v2\/media\/4813"}],"wp:attachment":[{"href":"https:\/\/azoora.com\/blog\/wp-json\/wp\/v2\/media?parent=4812"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/azoora.com\/blog\/wp-json\/wp\/v2\/categories?post=4812"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/azoora.com\/blog\/wp-json\/wp\/v2\/tags?post=4812"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}