<!DOCTYPE html>
<html>

  <head>
    <script data-require="ramda@*" data-semver="0.23.0" src="https://unpkg.com/ramda@0.23.0/dist/ramda.min.js"></script>
    <script data-require="jquery@*" data-semver="3.1.1" src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
    <link rel="stylesheet" href="style.css" />
  </head>

  <body>
    <div id="sample">
      Hey There!
    </div>
    
    <div id="sample2">
      I'm another div
    </div>
    <script src="script.js"></script>
  </body>

</html>
const {invoker, compose, constructN} = R

// $('#sample')
//   .animate({left:'250px'})
//   .animate({left:'10px'})
//   .slideUp()

const animate = invoker(1, 'animate')
const slide = invoker(0, 'slideUp')
const jq = constructN(1, $)

const animateDiv = compose(
  slide, 
  animate({left:'10px'}), 
  animate({left:'250px'}),
  jq
  )

animateDiv('#sample')
animateDiv('#sample2')
#sample {
  width:100px;
  height: 35px;
  border: solid 1px black;
  position: absolute;
}

#sample2 {
  width:100px;
  height: 35px;
  border: solid 1px black;
  position: absolute;
  top: 100px;
}