The Force.js library is a free open-source script built around dynamic page animations.
Read Also: 10 CSS3 Animation Tools You Should Bookmark
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.
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
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.