JS Waypoint - анимация между двумя смещениями на пиксель

Question

У меня есть три деления следующим образом, начиная с -60px до 60px сверху.

То, что я хочу сделать, это прокрутить это переместить первый и последний div в противоположных направлениях при прокрутке за пикселем, как в этом примере; https://noni.com.mt/ (раздел 2).

Я подумал, что сделать это можно с помощью WayPoint.js, но я не уверен, как можно воспроизвести тот же эффект.

На данный момент я не уверен, как я могу анимировать верхнюю позицию при пользовательской прокрутке между двумя смещениями, поэтому единственный код, который у меня есть, это:

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%',    
}) 

Который просто меняется на верхнюю позицию при достижении каждого смещения. Если есть более простой способ достичь этого или что-то лучше, чем путевая точка, дайте мне знать.