{"id":38163,"date":"2017-10-02T21:01:12","date_gmt":"2017-10-02T13:01:12","guid":{"rendered":"https:\/\/www.hongkiat.com\/blog\/?p=38163"},"modified":"2017-11-24T19:11:35","modified_gmt":"2017-11-24T11:11:35","slug":"forcejs-animation-library-webdev","status":"publish","type":"post","link":"https:\/\/www.hongkiat.com\/blog\/forcejs-animation-library-webdev\/","title":{"rendered":"Scroll and Animate Your Page Easily With Force.js"},"content":{"rendered":"<p>Web animation is easier than ever before, with <strong><a href=\"https:\/\/www.hongkiat.com\/blog\/creative-css-animations\/\">pure CSS3 animations<\/a><\/strong> becoming the norm. But, <strong>JavaScript is still incredibly valuable<\/strong> and it\u2019s one of the few reliable languages for technical animations.<\/p>\n<p>The <strong><a rel=\"nofollow\" target=\"_blank\" href=\"https:\/\/force-js.com\/\">Force.js library<\/a><\/strong> is a free open-source script built around <strong>dynamic page animations<\/strong>.<\/p>\n<p>You can build scrolling jump animations <strong>inside the page itself<\/strong>, or you can animate elements <strong>around the page<\/strong>. Both are equally simple to set up and the library comes with a ton of features.<\/p>\n<p>By default, Force.js <strong>relies on <a href=\"https:\/\/www.hongkiat.com\/blog\/visualizing-change-css-transitions-animations\/\">CSS transitions<\/a><\/strong> whenever possible. These <strong>work in all modern browsers<\/strong> and the code is a lot simpler, plus it offers wider support for users who <strong>don\u2019t allow JavaScript<\/strong>.<\/p>\n<p class=\"note\"><strong>Read Also:<\/strong> <a href=\"https:\/\/www.hongkiat.com\/blog\/css3-animation-tools\/\">10 CSS3 Animation Tools You Should Bookmark<\/a><\/p>\n<p>The library uses a <strong><a href=\"https:\/\/www.hongkiat.com\/blog\/css-javascript-fallback-methods\/\">natural fallback method<\/a> with JavaScript code<\/strong>, so it\u2019s safe for older browsers, too.<\/p>\n<p>And, Force.js is a vanilla library, so it <strong>doesn\u2019t require any dependencies<\/strong> such as jQuery. But, if you love jQuery you can run that syntax over Force and it\u2019ll still work just fine. Great for versatility with different websites.<\/p>\n<p>The two big animation techniques are <strong>jumps<\/strong> and <strong>moves<\/strong>. You determine where the element is moving, how fast it moves, and over which types of easing methods.<\/p>\n<p>The library also has <strong>a bunch of <a rel=\"nofollow\" target=\"_blank\" href=\"https:\/\/force-js.com\/#options\">custom options<\/a><\/strong> you can tweak for even greater control over the animations. You can <strong>edit the anchor link targets<\/strong> and <strong>set up which easings you\u2019ll need<\/strong>\u2014even if you want different easings on the same page!<\/p>\n<figure><a rel=\"nofollow\" target=\"_blank\" href=\"https:\/\/force-js.com\/\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/assets.hongkiat.com\/uploads\/forcejs-animation-library-webdev\/02-force-move-preview-page.jpg\" width=\"829\" height=\"534\" alt=\"Force.js example animation library\"><\/a><\/figure>\n<p>All of the documentation is <strong>available <a rel=\"nofollow\" target=\"_blank\" href=\"https:\/\/github.com\/gravmatt\/force-js\">on GitHub<\/a><\/strong>, along with the files.<\/p>\n<p>Or, if you prefer npm\/Bower you can <strong>pull files directly<\/strong> that way. You just need to <strong>include the one <code>force.js<\/code> file<\/strong> into your header and you\u2019ll be good to go.<\/p>\n<p>I also recommend skimming the documentation because it\u2019s full of <strong>examples for the <code>jump()<\/code> and <code>move()<\/code> methods<\/strong>.<\/p>\n<p>They both <strong>take arguments for time, easing, and position<\/strong>, so it\u2019s crucial to understand how these work. Although, once you get this down you\u2019ll never look back because it\u2019s the perfect lightweight animation library for any project.<\/p>\n<p class=\"note\"><strong>Read Also:<\/strong> <a href=\"https:\/\/www.hongkiat.com\/blog\/animations-transitions-motion-ui\/\">How to Create Animations and Transitions with Motion UI<\/a><\/p>","protected":false},"excerpt":{"rendered":"<p>Web animation is easier than ever before, with pure CSS3 animations becoming the norm. But, JavaScript is still incredibly valuable and it\u2019s one of the few reliable languages for technical animations. The Force.js library is a free open-source script built around dynamic page animations. You can build scrolling jump animations inside the page itself, or&hellip;<\/p>\n","protected":false},"author":18,"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":[3497],"topic":[4520],"class_list":["entry-content","is-maxi"],"acf":[],"yoast_head":"<!-- This site is optimized with the Yoast SEO Premium plugin v22.8 (Yoast SEO v27.6) - https:\/\/yoast.com\/product\/yoast-seo-premium-wordpress\/ -->\n<title>Scroll and Animate Your Page Easily With Force.js - Hongkiat<\/title>\n<meta name=\"description\" content=\"Web animation is easier than ever before, with pure CSS3 animations becoming the norm. But, JavaScript is still incredibly valuable and it&#039;s one of the\" \/>\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\/forcejs-animation-library-webdev\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Scroll and Animate Your Page Easily With Force.js\" \/>\n<meta property=\"og:description\" content=\"Web animation is easier than ever before, with pure CSS3 animations becoming the norm. But, JavaScript is still incredibly valuable and it&#039;s one of the\" \/>\n<meta property=\"og:url\" content=\"https:\/\/www.hongkiat.com\/blog\/forcejs-animation-library-webdev\/\" \/>\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=\"2017-10-02T13:01:12+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2017-11-24T11:11:35+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/assets.hongkiat.com\/uploads\/forcejs-animation-library-webdev\/02-force-move-preview-page.jpg\" \/>\n<meta name=\"author\" content=\"Jake Rocheleau\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:creator\" content=\"@hongkiat\" \/>\n<meta name=\"twitter:site\" content=\"@hongkiat\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"Jake Rocheleau\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"2 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\\\/\\\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/forcejs-animation-library-webdev\\\/#article\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/forcejs-animation-library-webdev\\\/\"},\"author\":{\"name\":\"Jake Rocheleau\",\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/#\\\/schema\\\/person\\\/966b2daea15283b4145e71aa98a82c2a\"},\"headline\":\"Scroll and Animate Your Page Easily With Force.js\",\"datePublished\":\"2017-10-02T13:01:12+00:00\",\"dateModified\":\"2017-11-24T11:11:35+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/forcejs-animation-library-webdev\\\/\"},\"wordCount\":374,\"commentCount\":0,\"publisher\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/#organization\"},\"image\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/forcejs-animation-library-webdev\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/assets.hongkiat.com\\\/uploads\\\/forcejs-animation-library-webdev\\\/02-force-move-preview-page.jpg\",\"keywords\":[\"Javascript Library\"],\"articleSection\":[\"Toolkit\"],\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/forcejs-animation-library-webdev\\\/#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/forcejs-animation-library-webdev\\\/\",\"url\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/forcejs-animation-library-webdev\\\/\",\"name\":\"Scroll and Animate Your Page Easily With Force.js - Hongkiat\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/forcejs-animation-library-webdev\\\/#primaryimage\"},\"image\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/forcejs-animation-library-webdev\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/assets.hongkiat.com\\\/uploads\\\/forcejs-animation-library-webdev\\\/02-force-move-preview-page.jpg\",\"datePublished\":\"2017-10-02T13:01:12+00:00\",\"dateModified\":\"2017-11-24T11:11:35+00:00\",\"description\":\"Web animation is easier than ever before, with pure CSS3 animations becoming the norm. But, JavaScript is still incredibly valuable and it's one of the\",\"breadcrumb\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/forcejs-animation-library-webdev\\\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/forcejs-animation-library-webdev\\\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/forcejs-animation-library-webdev\\\/#primaryimage\",\"url\":\"https:\\\/\\\/assets.hongkiat.com\\\/uploads\\\/forcejs-animation-library-webdev\\\/02-force-move-preview-page.jpg\",\"contentUrl\":\"https:\\\/\\\/assets.hongkiat.com\\\/uploads\\\/forcejs-animation-library-webdev\\\/02-force-move-preview-page.jpg\"},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/forcejs-animation-library-webdev\\\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Scroll and Animate Your Page Easily With Force.js\"}]},{\"@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\\\/966b2daea15283b4145e71aa98a82c2a\",\"name\":\"Jake Rocheleau\",\"description\":\"Jake is a writer and designer with over 10 years experience working on the web. He writes about user experience design and cool resources for designers\",\"sameAs\":[\"https:\\\/\\\/www.hongkiat.com\"],\"url\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/author\\\/jake\\\/\"}]}<\/script>\n<!-- \/ Yoast SEO Premium plugin. -->","yoast_head_json":{"title":"Scroll and Animate Your Page Easily With Force.js - Hongkiat","description":"Web animation is easier than ever before, with pure CSS3 animations becoming the norm. But, JavaScript is still incredibly valuable and it's one of the","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\/forcejs-animation-library-webdev\/","og_locale":"en_US","og_type":"article","og_title":"Scroll and Animate Your Page Easily With Force.js","og_description":"Web animation is easier than ever before, with pure CSS3 animations becoming the norm. But, JavaScript is still incredibly valuable and it's one of the","og_url":"https:\/\/www.hongkiat.com\/blog\/forcejs-animation-library-webdev\/","og_site_name":"Hongkiat","article_publisher":"https:\/\/www.facebook.com\/hongkiatcom","article_published_time":"2017-10-02T13:01:12+00:00","article_modified_time":"2017-11-24T11:11:35+00:00","og_image":[{"url":"https:\/\/assets.hongkiat.com\/uploads\/forcejs-animation-library-webdev\/02-force-move-preview-page.jpg","type":"","width":"","height":""}],"author":"Jake Rocheleau","twitter_card":"summary_large_image","twitter_creator":"@hongkiat","twitter_site":"@hongkiat","twitter_misc":{"Written by":"Jake Rocheleau","Est. reading time":"2 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/www.hongkiat.com\/blog\/forcejs-animation-library-webdev\/#article","isPartOf":{"@id":"https:\/\/www.hongkiat.com\/blog\/forcejs-animation-library-webdev\/"},"author":{"name":"Jake Rocheleau","@id":"https:\/\/www.hongkiat.com\/blog\/#\/schema\/person\/966b2daea15283b4145e71aa98a82c2a"},"headline":"Scroll and Animate Your Page Easily With Force.js","datePublished":"2017-10-02T13:01:12+00:00","dateModified":"2017-11-24T11:11:35+00:00","mainEntityOfPage":{"@id":"https:\/\/www.hongkiat.com\/blog\/forcejs-animation-library-webdev\/"},"wordCount":374,"commentCount":0,"publisher":{"@id":"https:\/\/www.hongkiat.com\/blog\/#organization"},"image":{"@id":"https:\/\/www.hongkiat.com\/blog\/forcejs-animation-library-webdev\/#primaryimage"},"thumbnailUrl":"https:\/\/assets.hongkiat.com\/uploads\/forcejs-animation-library-webdev\/02-force-move-preview-page.jpg","keywords":["Javascript Library"],"articleSection":["Toolkit"],"inLanguage":"en-US","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/www.hongkiat.com\/blog\/forcejs-animation-library-webdev\/#respond"]}]},{"@type":"WebPage","@id":"https:\/\/www.hongkiat.com\/blog\/forcejs-animation-library-webdev\/","url":"https:\/\/www.hongkiat.com\/blog\/forcejs-animation-library-webdev\/","name":"Scroll and Animate Your Page Easily With Force.js - Hongkiat","isPartOf":{"@id":"https:\/\/www.hongkiat.com\/blog\/#website"},"primaryImageOfPage":{"@id":"https:\/\/www.hongkiat.com\/blog\/forcejs-animation-library-webdev\/#primaryimage"},"image":{"@id":"https:\/\/www.hongkiat.com\/blog\/forcejs-animation-library-webdev\/#primaryimage"},"thumbnailUrl":"https:\/\/assets.hongkiat.com\/uploads\/forcejs-animation-library-webdev\/02-force-move-preview-page.jpg","datePublished":"2017-10-02T13:01:12+00:00","dateModified":"2017-11-24T11:11:35+00:00","description":"Web animation is easier than ever before, with pure CSS3 animations becoming the norm. But, JavaScript is still incredibly valuable and it's one of the","breadcrumb":{"@id":"https:\/\/www.hongkiat.com\/blog\/forcejs-animation-library-webdev\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/www.hongkiat.com\/blog\/forcejs-animation-library-webdev\/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.hongkiat.com\/blog\/forcejs-animation-library-webdev\/#primaryimage","url":"https:\/\/assets.hongkiat.com\/uploads\/forcejs-animation-library-webdev\/02-force-move-preview-page.jpg","contentUrl":"https:\/\/assets.hongkiat.com\/uploads\/forcejs-animation-library-webdev\/02-force-move-preview-page.jpg"},{"@type":"BreadcrumbList","@id":"https:\/\/www.hongkiat.com\/blog\/forcejs-animation-library-webdev\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/www.hongkiat.com\/blog\/"},{"@type":"ListItem","position":2,"name":"Scroll and Animate Your Page Easily With Force.js"}]},{"@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\/966b2daea15283b4145e71aa98a82c2a","name":"Jake Rocheleau","description":"Jake is a writer and designer with over 10 years experience working on the web. He writes about user experience design and cool resources for designers","sameAs":["https:\/\/www.hongkiat.com"],"url":"https:\/\/www.hongkiat.com\/blog\/author\/jake\/"}]}},"jetpack_featured_media_url":"https:\/\/","jetpack_shortlink":"https:\/\/wp.me\/p4uxU-9Vx","jetpack_sharing_enabled":true,"_links":{"self":[{"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/posts\/38163","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\/18"}],"replies":[{"embeddable":true,"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/comments?post=38163"}],"version-history":[{"count":2,"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/posts\/38163\/revisions"}],"predecessor-version":[{"id":41958,"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/posts\/38163\/revisions\/41958"}],"wp:attachment":[{"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/media?parent=38163"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/categories?post=38163"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/tags?post=38163"},{"taxonomy":"topic","embeddable":true,"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/topic?post=38163"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}