DailyJS

Ramda, AniJS ScrollReveal

Alex R. Young

Subscribe

@dailyjs

Facebook

Google+

libraries functional animation

Ramda, AniJS ScrollReveal

Posted by Alex R. Young on .
Featured

libraries functional animation

Ramda, AniJS ScrollReveal

Posted by Alex R. Young on .

Ramda

Ramda

Ramda (GitHub: CrossEye / ramda, License: MIT, npm: ramda) by Scott Sauyet and Buzz de Cafe is a functional library that is similar to Underscore, but has a very different API style.

In Underscore you might filter arrays like this:

var validUsersNamedBuzz = function(users) {  
  return _.filter(users, function(user) { 
    return user.name === 'Buzz' && _.isEmpty(user.errors); 
  });
};

But in Ramda you can pass the function first and the array last:

var validUsersNamedBuzz = R.filter(R.where({ name: 'Buzz', errors: R.isEmpty }));  

All of Ramda's functions curry automatically, which makes composition easier:

Because the API is function-first, data-last, you can continue composing and composing until you build up the function you need before dropping in the data. (Hugh Jackson published an excellent article describing the advantages of this style.)

These API decisions mean Ramda feels like native JavaScript with less syntax than you might expect.

ScrollReveal Using AniJS

ScrollReveal (GitHub: anijs / examples / scrollreveal) by Dariel Noel Vila Plagado is an AniJS helper function that animates components as they enter the viewport.

The syntax for animating items looks like this:

<div id="item" data-anijs="if: scroll, on: window, do: swing animated, before: scrollReveal">  
  Cuba 2022
</div>