Scroll and Animate Your Page Easily With Force.js

By Jake Rocheleau. in Toolkit. Updated on November 24, 2017.

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 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 you can animate elements around the page. Both are equally simple to set up and the library comes with a ton of features.

By default, Force.js relies on CSS transitions whenever possible. These work in all modern browsers and the code is a lot simpler, plus it offers wider support for users who don’t allow JavaScript.

The library uses a natural fallback method with JavaScript code, so it’s safe for older browsers, too.

And, Force.js is a vanilla library, so it doesn’t require any dependencies such as jQuery. But, if you love jQuery you can run that syntax over Force and it’ll still work just fine. Great for versatility with different websites.

The two big animation techniques are jumps and moves. You determine where the element is moving, how fast it moves, and over which types of easing methods.

The library also has a bunch of custom options you can tweak for even greater control over the animations. You can edit the anchor link targets and set up which easings you’ll need—even if you want different easings on the same page!

All of the documentation is available on GitHub, along with the files.

Or, if you prefer npm/Bower you can pull files directly that way. You just need to include the one force.js file into your header and you’ll be good to go.

I also recommend skimming the documentation because it’s full of examples for the jump() and move() methods.

They both take arguments for time, easing, and position, so it’s crucial to understand how these work. Although, once you get this down you’ll never look back because it’s the perfect lightweight animation library for any project.