{"id":25538,"date":"2016-01-26T21:01:44","date_gmt":"2016-01-26T13:01:44","guid":{"rendered":"https:\/\/www.hongkiat.com\/blog\/?p=25538"},"modified":"2020-06-29T02:08:58","modified_gmt":"2020-06-28T18:08:58","slug":"scrolling-effects-js-libraries","status":"publish","type":"post","link":"https:\/\/www.hongkiat.com\/blog\/scrolling-effects-js-libraries\/","title":{"rendered":"JavaScript Libraries for Cool Scrolling Effects"},"content":{"rendered":"

A website design comes to life<\/a> with well-executed animation<\/a>. If you\u2019re looking for the proper libraries to add effects to your project, here I\u2019ve made a list of some of the libraries that you can use to give effects based on the scroll event<\/strong>.<\/p>\n

When a user scrolls down your webpage, the action can be designed to trigger a variety of animation options<\/strong> such as fade effects, blur, 3D, parallax<\/a>, and more. There are 25 JS libraries here that can help you achieve that sort of response in your site design.<\/p>\n

Read more: <\/strong>15 examples of scrolling done right in website design<\/a><\/p>\n

Scroll Reveal<\/a><\/h2>\n

A library that makes it easy to add scroll animation for both web and mobile. You can set custom easing, 3D rotations, duration and many mor parameters to the element you want to animate.<\/p>\n

Dependencies:<\/strong> none | Size: <\/strong>2.9kb | Licence:<\/strong> MIT<\/p>\n

\"scroll<\/figure>\n

Aniview<\/a><\/h2>\n

A plugin that works together with Animate.CSS<\/a> to enable the animations only when your element comes into viewport.<\/p>\n

Dependencies:<\/strong> jQuery | Size: <\/strong>1kb | Licence: <\/strong>N\/A<\/p>\n

\"aniview\"<\/figure>\n

Fade Into View<\/a><\/h2>\n

A plugin that adds the fade in\/out effect to elements when they enter or exit predetermined viewports.<\/p>\n

Dependencies:<\/strong> jQuery | Size: <\/strong>3.81kb | Licence: <\/strong>N\/A<\/p>\n

\"fade<\/figure>\n

WOW<\/a><\/h2>\n

WOW will reveal Animate.css animations upon scroll event. You can setup the animation duration, delays, offsets and iterations right from the HTML markup, then just call the element\u2019s class from JS.<\/p>\n

Dependencies:<\/strong> Animate.css | Size: <\/strong>8.23kb | Licence:<\/strong> MIT<\/p>\n

\"wow\"<\/figure>\n

ScrollMagic<\/a><\/h2>\n

This plugin will show a \u2018Magical\u2019 effect when a user scrolls the page. It\u2019s perfect for animating, pinning an element, or toggling CSS class, all based on scroll position. ScrollMagic can work together with GSAP and VelocityJS in creating an animation scene. See the complete demos here<\/a>.<\/p>\n

Dependencies:<\/strong> jQuery, GSAP, Velocity.js | Size: <\/strong>16.9kb | Licence:<\/strong> MIT<\/p>\n

\"ScrollMagic\"<\/figure>\n

jScrollability<\/a><\/h2>\n

jScrollability lets you create single web pages with complex scroll-based animations. Upon user sroll, the element will animate based on the scroll positions. Animations run based on the scroll depth, and of course you can set the start and end of the animation.<\/p>\n

Dependencies:<\/strong> jQuery | Size: <\/strong>1.86kb | Licence:<\/strong> MIT<\/p>\n

\"jScrollability\"<\/figure>\n

pushIn.js<\/a><\/h2>\n

A simple library to add the dolly-in or push-in effect to any element that works when a user scrolls through the page. It\u2019s easy to implement: just add the start, stop and speed parameters to data-params<\/code> to your HTML element.<\/p>\n

Dependencies:<\/strong> none | Size: <\/strong>4.94kb | Licence: <\/strong>N\/A<\/p>\n

\"pushin.js\"<\/figure>\n

Scrollissimo<\/a><\/h2>\n

This is a JS library to add smooth scroll-controlled animations. It utilizes the Greensock\u2019s tweens and timelines to generate smoother animations.<\/p>\n

Dependencies:<\/strong> GreenShock TweenLite\/TweenMax | Size: <\/strong>2.94kb | Licence: <\/strong>N\/A<\/p>\n

\"scrollissimo\"<\/figure>\n

jQuery Animation Scroll Plugin<\/a><\/h2>\n

This is a jQuery plugin to add viewport-triggered animation using Greensock. It makes it easy to animate elements with easing, transform, scale, rotation and 3D animations.<\/p>\n

Dependencies:<\/strong> jQuery, GreenShock | Size: <\/strong>14kb | Licence:<\/strong> GNU GPL<\/p>\n

\"jquery<\/figure>\n

Circlr<\/a><\/h2>\n

Circlr allows you to create the rotation animation to an element, triggered by scrolling, mouse events or touch events. It\u2019s perfect to make a showcase of a product which can be viewed from all 360 degrees, activated by user scroll.<\/p>\n

Dependencies:<\/strong> none | Size: <\/strong>6.05kb | Licence:<\/strong> MIT<\/p>\n

\"circlr\"<\/figure>\n

Scrollimator<\/a><\/h2>\n

Scrollimator will show you the position and scroll progress, and return values that you can use to change tween animations attached to user scrolling behavior. It supports vertical and horizontal scrolling.<\/p>\n

Dependencies:<\/strong> none | Size: <\/strong>37.7kb | Licence:<\/strong> N\/A<\/p>\n

\"scrollimator\"<\/figure>\n

Crossfade<\/a><\/h2>\n

Crossfade is a plugin to add the crossfade effect to an image. The blurry effect will continue as a user scrolls further down.<\/p>\n

Dependencies:<\/strong> jQuery | Size: <\/strong>3.19kb | Licence:<\/strong> MIT<\/p>\n

\"crossfade\"<\/figure>\n

Page Scroll Effect<\/a><\/h2>\n

This one is a library for experimental page scroll effects created by CodyHouse. It utilizes velocitey.js<\/strong> animations.<\/p>\n

Dependencies:<\/strong> jQuery, Velocity.js | Size: <\/strong>17.6kb | Licence: <\/strong>N\/A<\/p>\n

\"page<\/figure>\n

jquery.parallax-scroll<\/a><\/h2>\n

This library allows you to add smooth a parallax effect to vertical page scrolling. Just import jQuery and jquery.easing.1.3.js<\/a>, then add the 'data-parallax'<\/code> attribute and optional patameters to your element to customize the effect.<\/p>\n

Dependencies:<\/strong> jQuery, jQuery.easing | Size: <\/strong>8.72kb | Licence:<\/strong> GNU GPL<\/p>\n

\"jquery<\/figure>\n

parallax.js<\/a><\/h2>\n

Parallax.js is a simple plugin that adds the parallax scrolling effect, inspired by the Spotify website.<\/p>\n

Dependencies:<\/strong> jQuery | Size: <\/strong>6.63kb | Licence:<\/strong> MIT<\/p>\n

\"parallax.js\"<\/figure>\n

Enllax<\/a><\/h2>\n

Enllax is a super lightweight library for use on applying the parallax effect to any scrolling element. You can set background or foreground elements to hav ethis effect. It works for both vertical and horizontal scrolling.<\/p>\n

Dependencies:<\/strong> jQuery | Size: <\/strong>1.53kb | Licence:<\/strong> MIT<\/p>\n

\"enlax\"<\/figure>\n

Blur on scroll<\/a><\/h2>\n

This library helps you to add the blur effect to an image, which will be triggered by page scrolling. The deeper you scroll down the page, the more blurry the image gets.<\/p>\n

Dependencies:<\/strong> none | Size: <\/strong>1.1kb | Licence: <\/strong>N\/A<\/p>\n

\"blur<\/figure>\n

boxLoader<\/a><\/h2>\n

boxLoader is a simple plugin to load elements upon page scrolling. The parameter you should set are the directions (x or y), position on percent, effect and also duration.<\/p>\n

Dependencies:<\/strong> jQuery | Size: <\/strong>3.42kb | Licence: <\/strong>N\/A<\/p>\n

\"boxloader\"<\/figure>\n

Tilted Page Scroll<\/a><\/h2>\n

As a user scrolls through a page, this plugin will reveal an awesome 3D tilted effect to the element you set up.<\/p>\n

Dependencies:<\/strong> jQuery | Size: <\/strong>1.5kb | Licence:<\/strong> GNU GPL<\/p>\n

\"tilted<\/figure>\n

AhRelax<\/a><\/h2>\n

AhRelax provides a way to make quick scroll-based animations. It\u2019s lighweight and also has great performance. You can read more about it here<\/a>.<\/p>\n

Dependencies:<\/strong> jQuery | Size: <\/strong>1.6kb | Licence:<\/strong> MIT<\/p>\n

\"ahrelax\"<\/figure>\n

Fancy Scroll<\/a><\/h2>\n

If you ever see the overflow scroll effect on Android or iOS, with this plugin you can now apply this to your site. You can add an animation, either a bounce or glow, when a user reaches the top\/bottom of page.<\/p>\n

Dependencies:<\/strong> jQuery | Size: <\/strong>2.64kb | Licence:<\/strong> GNU GPL<\/p>\n

\"fancy<\/figure>\n

Parallax image scroll<\/a><\/h2>\n

This plugin will make elements float and move as a user scrolls down or up the page.<\/p>\n

Dependencies:<\/strong> jQuery | Size: <\/strong>8.69kb | Licence:<\/strong> MIT<\/p>\n

\"parallax<\/figure>\n

Rlsmooth<\/a><\/h2>\n

This is a small plugin to create the flowing effect when a user scolls down or up the page. There are three effects available: slide, fade and show.<\/p>\n

Dependencies:<\/strong> jQuery | Size: <\/strong>1.95kb | Licence:<\/strong> MIT<\/p>\n

\"rlsmooth\"<\/figure>\n

Scrollme<\/a><\/h2>\n

Adds simple effects to page scrolling such as scale, rotate, translate and changing the opacity of elements. It\u2019s easy to setup: just import the jQuery, this plugin, and set the animation parameters on the element\u2019s markup.<\/p>\n

Dependencies:<\/strong> jQuery | Size: <\/strong>5.45kb | Licence:<\/strong> N\/A<\/p>\n

\"scrollme\"<\/figure>\n

Parallax ImageScroll<\/a><\/h2>\n

This plugin allows you to give a parallax effect to any image on your page. It make use of CSS3 Transform<\/a> to make the effect work. This plugin has support for jQuery and AMD<\/a>.<\/p>\n

Dependencies:<\/strong> jQuery | Size: <\/strong>8.01kb | Licence:<\/strong> MIT<\/p>\n

\"parallax<\/figure>","protected":false},"excerpt":{"rendered":"

A website design comes to life with well-executed animation. If you\u2019re looking for the proper libraries to add effects to your project, here I\u2019ve made a list of some of the libraries that you can use to give effects based on the scroll event. When a user scrolls down your webpage, the action can be…<\/p>\n","protected":false},"author":141,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_jetpack_memberships_contains_paid_content":false,"footnotes":""},"categories":[3393],"tags":[1096,3497,4117,2908],"topic":[4520],"class_list":["entry-content","is-maxi"],"acf":[],"yoast_head":"\n25 JavaScript Libraries for Cool Scrolling Effects<\/title>\n<meta name=\"description\" content=\"A website design comes to life with well-executed animation. If you're looking for the proper libraries to add effects to your project, here I've made a\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/www.hongkiat.com\/blog\/scrolling-effects-js-libraries\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"JavaScript Libraries for Cool Scrolling Effects\" \/>\n<meta property=\"og:description\" content=\"A website design comes to life with well-executed animation. If you're looking for the proper libraries to add effects to your project, here I've made a\" \/>\n<meta property=\"og:url\" content=\"https:\/\/www.hongkiat.com\/blog\/scrolling-effects-js-libraries\/\" \/>\n<meta property=\"og:site_name\" content=\"Hongkiat\" \/>\n<meta property=\"article:publisher\" content=\"https:\/\/www.facebook.com\/hongkiatcom\" \/>\n<meta property=\"article:published_time\" content=\"2016-01-26T13:01:44+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2020-06-28T18:08:58+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/assets.hongkiat.com\/uploads\/scrolling-effects-js-libraries\/scrollreveal.jpg\" \/>\n<meta name=\"author\" content=\"Agus\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:creator\" content=\"@bagusdesain\" \/>\n<meta name=\"twitter:site\" content=\"@hongkiat\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"Agus\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"5 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\\\/\\\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/scrolling-effects-js-libraries\\\/#article\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/scrolling-effects-js-libraries\\\/\"},\"author\":{\"name\":\"Agus\",\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/#\\\/schema\\\/person\\\/b23dad06815dff0bcc222088bed549dd\"},\"headline\":\"JavaScript Libraries for Cool Scrolling Effects\",\"datePublished\":\"2016-01-26T13:01:44+00:00\",\"dateModified\":\"2020-06-28T18:08:58+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/scrolling-effects-js-libraries\\\/\"},\"wordCount\":1075,\"commentCount\":6,\"publisher\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/#organization\"},\"image\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/scrolling-effects-js-libraries\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/assets.hongkiat.com\\\/uploads\\\/scrolling-effects-js-libraries\\\/scrollreveal.jpg\",\"keywords\":[\"Animation UI\",\"Javascript Library\",\"Javascripts\",\"scrolling\"],\"articleSection\":[\"Toolkit\"],\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/scrolling-effects-js-libraries\\\/#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/scrolling-effects-js-libraries\\\/\",\"url\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/scrolling-effects-js-libraries\\\/\",\"name\":\"25 JavaScript Libraries for Cool Scrolling Effects\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/scrolling-effects-js-libraries\\\/#primaryimage\"},\"image\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/scrolling-effects-js-libraries\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/assets.hongkiat.com\\\/uploads\\\/scrolling-effects-js-libraries\\\/scrollreveal.jpg\",\"datePublished\":\"2016-01-26T13:01:44+00:00\",\"dateModified\":\"2020-06-28T18:08:58+00:00\",\"description\":\"A website design comes to life with well-executed animation. If you're looking for the proper libraries to add effects to your project, here I've made a\",\"breadcrumb\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/scrolling-effects-js-libraries\\\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/scrolling-effects-js-libraries\\\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/scrolling-effects-js-libraries\\\/#primaryimage\",\"url\":\"https:\\\/\\\/assets.hongkiat.com\\\/uploads\\\/scrolling-effects-js-libraries\\\/scrollreveal.jpg\",\"contentUrl\":\"https:\\\/\\\/assets.hongkiat.com\\\/uploads\\\/scrolling-effects-js-libraries\\\/scrollreveal.jpg\"},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/scrolling-effects-js-libraries\\\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"JavaScript Libraries for Cool Scrolling Effects\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/#website\",\"url\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/\",\"name\":\"Hongkiat\",\"description\":\"Tech and Design Tips\",\"publisher\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"en-US\"},{\"@type\":\"Organization\",\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/#organization\",\"name\":\"Hongkiat.com\",\"url\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/#\\\/schema\\\/logo\\\/image\\\/\",\"url\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/wp-content\\\/uploads\\\/hkdc-logo-rect-yoast.jpg\",\"contentUrl\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/wp-content\\\/uploads\\\/hkdc-logo-rect-yoast.jpg\",\"width\":1200,\"height\":799,\"caption\":\"Hongkiat.com\"},\"image\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/#\\\/schema\\\/logo\\\/image\\\/\"},\"sameAs\":[\"https:\\\/\\\/www.facebook.com\\\/hongkiatcom\",\"https:\\\/\\\/x.com\\\/hongkiat\",\"https:\\\/\\\/www.pinterest.com\\\/hongkiat\\\/\"]},{\"@type\":\"Person\",\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/#\\\/schema\\\/person\\\/b23dad06815dff0bcc222088bed549dd\",\"name\":\"Agus\",\"description\":\"Agus is a music enthusiast, backpacker and code writer. He has an ambition to build a Skynet on top of HTML and CSS.\",\"sameAs\":[\"https:\\\/\\\/x.com\\\/bagusdesain\"],\"url\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/author\\\/agus\\\/\"}]}<\/script>\n<!-- \/ Yoast SEO Premium plugin. -->","yoast_head_json":{"title":"25 JavaScript Libraries for Cool Scrolling Effects","description":"A website design comes to life with well-executed animation. If you're looking for the proper libraries to add effects to your project, here I've made a","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/www.hongkiat.com\/blog\/scrolling-effects-js-libraries\/","og_locale":"en_US","og_type":"article","og_title":"JavaScript Libraries for Cool Scrolling Effects","og_description":"A website design comes to life with well-executed animation. If you're looking for the proper libraries to add effects to your project, here I've made a","og_url":"https:\/\/www.hongkiat.com\/blog\/scrolling-effects-js-libraries\/","og_site_name":"Hongkiat","article_publisher":"https:\/\/www.facebook.com\/hongkiatcom","article_published_time":"2016-01-26T13:01:44+00:00","article_modified_time":"2020-06-28T18:08:58+00:00","og_image":[{"url":"https:\/\/assets.hongkiat.com\/uploads\/scrolling-effects-js-libraries\/scrollreveal.jpg","type":"","width":"","height":""}],"author":"Agus","twitter_card":"summary_large_image","twitter_creator":"@bagusdesain","twitter_site":"@hongkiat","twitter_misc":{"Written by":"Agus","Est. reading time":"5 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/www.hongkiat.com\/blog\/scrolling-effects-js-libraries\/#article","isPartOf":{"@id":"https:\/\/www.hongkiat.com\/blog\/scrolling-effects-js-libraries\/"},"author":{"name":"Agus","@id":"https:\/\/www.hongkiat.com\/blog\/#\/schema\/person\/b23dad06815dff0bcc222088bed549dd"},"headline":"JavaScript Libraries for Cool Scrolling Effects","datePublished":"2016-01-26T13:01:44+00:00","dateModified":"2020-06-28T18:08:58+00:00","mainEntityOfPage":{"@id":"https:\/\/www.hongkiat.com\/blog\/scrolling-effects-js-libraries\/"},"wordCount":1075,"commentCount":6,"publisher":{"@id":"https:\/\/www.hongkiat.com\/blog\/#organization"},"image":{"@id":"https:\/\/www.hongkiat.com\/blog\/scrolling-effects-js-libraries\/#primaryimage"},"thumbnailUrl":"https:\/\/assets.hongkiat.com\/uploads\/scrolling-effects-js-libraries\/scrollreveal.jpg","keywords":["Animation UI","Javascript Library","Javascripts","scrolling"],"articleSection":["Toolkit"],"inLanguage":"en-US","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/www.hongkiat.com\/blog\/scrolling-effects-js-libraries\/#respond"]}]},{"@type":"WebPage","@id":"https:\/\/www.hongkiat.com\/blog\/scrolling-effects-js-libraries\/","url":"https:\/\/www.hongkiat.com\/blog\/scrolling-effects-js-libraries\/","name":"25 JavaScript Libraries for Cool Scrolling Effects","isPartOf":{"@id":"https:\/\/www.hongkiat.com\/blog\/#website"},"primaryImageOfPage":{"@id":"https:\/\/www.hongkiat.com\/blog\/scrolling-effects-js-libraries\/#primaryimage"},"image":{"@id":"https:\/\/www.hongkiat.com\/blog\/scrolling-effects-js-libraries\/#primaryimage"},"thumbnailUrl":"https:\/\/assets.hongkiat.com\/uploads\/scrolling-effects-js-libraries\/scrollreveal.jpg","datePublished":"2016-01-26T13:01:44+00:00","dateModified":"2020-06-28T18:08:58+00:00","description":"A website design comes to life with well-executed animation. If you're looking for the proper libraries to add effects to your project, here I've made a","breadcrumb":{"@id":"https:\/\/www.hongkiat.com\/blog\/scrolling-effects-js-libraries\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/www.hongkiat.com\/blog\/scrolling-effects-js-libraries\/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.hongkiat.com\/blog\/scrolling-effects-js-libraries\/#primaryimage","url":"https:\/\/assets.hongkiat.com\/uploads\/scrolling-effects-js-libraries\/scrollreveal.jpg","contentUrl":"https:\/\/assets.hongkiat.com\/uploads\/scrolling-effects-js-libraries\/scrollreveal.jpg"},{"@type":"BreadcrumbList","@id":"https:\/\/www.hongkiat.com\/blog\/scrolling-effects-js-libraries\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/www.hongkiat.com\/blog\/"},{"@type":"ListItem","position":2,"name":"JavaScript Libraries for Cool Scrolling Effects"}]},{"@type":"WebSite","@id":"https:\/\/www.hongkiat.com\/blog\/#website","url":"https:\/\/www.hongkiat.com\/blog\/","name":"Hongkiat","description":"Tech and Design Tips","publisher":{"@id":"https:\/\/www.hongkiat.com\/blog\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/www.hongkiat.com\/blog\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"},{"@type":"Organization","@id":"https:\/\/www.hongkiat.com\/blog\/#organization","name":"Hongkiat.com","url":"https:\/\/www.hongkiat.com\/blog\/","logo":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.hongkiat.com\/blog\/#\/schema\/logo\/image\/","url":"https:\/\/www.hongkiat.com\/blog\/wp-content\/uploads\/hkdc-logo-rect-yoast.jpg","contentUrl":"https:\/\/www.hongkiat.com\/blog\/wp-content\/uploads\/hkdc-logo-rect-yoast.jpg","width":1200,"height":799,"caption":"Hongkiat.com"},"image":{"@id":"https:\/\/www.hongkiat.com\/blog\/#\/schema\/logo\/image\/"},"sameAs":["https:\/\/www.facebook.com\/hongkiatcom","https:\/\/x.com\/hongkiat","https:\/\/www.pinterest.com\/hongkiat\/"]},{"@type":"Person","@id":"https:\/\/www.hongkiat.com\/blog\/#\/schema\/person\/b23dad06815dff0bcc222088bed549dd","name":"Agus","description":"Agus is a music enthusiast, backpacker and code writer. He has an ambition to build a Skynet on top of HTML and CSS.","sameAs":["https:\/\/x.com\/bagusdesain"],"url":"https:\/\/www.hongkiat.com\/blog\/author\/agus\/"}]}},"jetpack_featured_media_url":"https:\/\/","jetpack_shortlink":"https:\/\/wp.me\/p4uxU-6DU","jetpack_sharing_enabled":true,"_links":{"self":[{"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/posts\/25538","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/users\/141"}],"replies":[{"embeddable":true,"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/comments?post=25538"}],"version-history":[{"count":3,"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/posts\/25538\/revisions"}],"predecessor-version":[{"id":51778,"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/posts\/25538\/revisions\/51778"}],"wp:attachment":[{"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/media?parent=25538"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/categories?post=25538"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/tags?post=25538"},{"taxonomy":"topic","embeddable":true,"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/topic?post=25538"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}