JS Waypoint - Animate between two offsets by pixel

Question

I have three divs as follows, starting from -60px to 60px top.

What I want to do is on scroll is move the first and last div in opposite directions on scroll by pixel as per this example; https://noni.com.mt/ (section 2).

I figured a way to do this would be by using WayPoint.js but I'm unsure how I can replicate the same effect.

At the moment I'm unsure how I can animate the top position on user scroll between two offsets, so the only code I have so far is:-

var waypoint = new Waypoint({
  element: document.getElementById('service-1'),
  handler: function(direction) {
   if (direction === 'down') {
      $('#service-1').stop().css("top", "60px");         
   } 
  },
  offset: '90%',    
});

var waypoint = new Waypoint({
  element: document.getElementById('service-1'),
  handler: function(direction) {
   if (direction === 'up') {
      $('#service-1').stop().css("top", "-60px");
   } 
  },
  offset: '10%',    
}) 

Which simply changes to top position upon reaching each offset. If there is an easier way to achieve this, or something better than waypoint let me know.