Rhye theme: custom functions in AJAX

// I would recommend to avoid generic functions names like "hide" or "animateFrom"
// Those reside in global scope and may cause collisions with previous declarations.
// The best way to avoid this is to prefix all custom functions e.g. "jochen_function".

function jochen_animate_from(elem, direction) {
  direction = direction || 1;

  var x = 0,
    y = direction * 100;
  if (elem.classList.contains('gs_reveal_fromLeft')) {
    x = -500;
    y = 500;
  } else if (elem.classList.contains('gs_reveal_fromRight')) {
    x = 500;
    y = -500;
  }
  elem.style.transform = 'translate(' + x + 'px, ' + y + 'px)';
  elem.style.opacity = '0';

  gsap.fromTo(elem, { x: x, y: y, autoAlpha: 0 }, {
    duration: 1.25,
    x: 0,
    y: 0,
    autoAlpha: 1,
    ease: 'expo',
    overwrite: 'auto'
  });
}

function jochen_hide(elem) {
  gsap.set(elem, { autoAlpha: 0 });
}

function jochen_move_left() {
  if (document.querySelector('.jhd-gsap-move.left')) {
    gsap.to('.jhd-gsap-move.left', {
      x: 200,
      //x: -100,
      //rotation: 360,
      scrollTrigger: {
        trigger: '.jhd-gsap-move.left',
        start: 'top 120%',
        //end: 'top 10%',
        end: '+=200%', // end after scrolling x % beyond the start
        scrub: true,
        //markers: true,
        id: 'scrub'
      }
    });
  }
}

function jochen_move_right() {
  if (document.querySelector('.jhd-gsap-move.right')) {
    gsap.to('.jhd-gsap-move.right', {
      x: -200,
      //x: -100,
      //rotation: 360,
      scrollTrigger: {
        trigger: '.jhd-gsap-move.right',
        start: 'top 120%',
        //end: 'top 10%',
        end: '+=200%', // end after scrolling x % beyond the start
        scrub: true,
        //markers: true,
        id: 'scrub'
      }
    });
  }
}

function jochen_left_prlx() {
  if (document.querySelector('.jhd-gsap-move.left.prlx')) {
    gsap.to('.jhd-gsap-move.left.prlx', {
      x: 300,
      //x: -100,
      //rotation: 360,
      scrollTrigger: {
        trigger: '.jhd-gsap-move.left.prlx',
        start: 'top 120%',
        //end: 'top 10%',
        end: '+=200%', // end after scrolling x % beyond the start
        scrub: true,
        //markers: true,
        id: 'scrub'
      }
    });
  }
}

function jochen_right_prlx() {
  if (document.querySelector('.jhd-gsap-move.right.prlx')) {
    gsap.to('.jhd-gsap-move.right.prlx', {
      x: -300,
      //x: -100,
      //rotation: 360,
      scrollTrigger: {
        trigger: '.jhd-gsap-move.right.prlx',
        start: 'top 120%',
        //end: 'top 10%',
        end: '+=200%', // end after scrolling x % beyond the start
        scrub: true,
        //markers: true,
        id: 'scrub'
      }
    });
  }
}

function jochen_move_up() {
  if (document.querySelector('.jhd-gsap-move-up')) {
    gsap.to('.jhd-gsap-move-up', {
      y: -100,
      //x: -100,
      //rotation: 360,
      scrollTrigger: {
        trigger: '.jhd-gsap-move-up',
        start: 'top 90%',
        //end: 'top 10%',
        end: '+=90%', // end after scrolling x % beyond the start
        scrub: true,
        //markers: true,
        id: 'scrub'
      }
    });
  }
}

function jochen_move_down() {
  if (document.querySelector('.jhd-gsap-move-down')) {
    gsap.to('.jhd-gsap-move-down', {
      y: 100,
      //rotation: 360,
      scrollTrigger: {
        trigger: '.jhd-gsap-move-down',
        start: 'top 90%',
        //end: 'top 10%',
        end: '+=90%', // end after scrolling x % beyond the start
        scrub: true,
        //markers: true,
        id: 'scrub'
      }
    });
  }
}

function jochen_box_test() {
  gsap.utils.toArray('.box-test').forEach(function (elem) {
    jochen_hide(elem); // assure that the element is hidden when scrolled into view
    ScrollTrigger.create({
      trigger: elem,
      //markers: true,
      onEnter: function () { jochen_animate_from(elem) },
      onEnterBack: function () { jochen_animate_from(elem, -1) },
      onLeave: function () { jochen_hide(elem) } // assure that the element is hidden when scrolled into view
    });
  });
}

document.addEventListener('DOMContentLoaded', () => {
  jochen_box_test();
  jochen_move_left();
  jochen_move_right();
  jochen_left_prlx();
  jochen_right_prlx();
  jochen_move_up();
  jochen_move_down();

  console.log('Custom functions executed');
});