ScrollMagic: Animate element using HTML data attribute

scrollmagic.datatotarget.js

// ScrollMagic
const controller = new ScrollMagic.Controller();

// Animate an object to a y or x value
// Usage: data-to-target="y:-100"
// Optional: data-to-target-mobile="y:-50" (requires SSM)
// Optional: data-duration="50%"
// Optional: data-trigger-element="#someDiv" (defaults to parent)
$('[data-to-target]').each(function() {
  const $this = $(this);		

  let toTarget = $this.data('to-target').split(':');

  if (_bt_mobile_run && $this.data('to-target-mobile')) { 
    toTarget = $this.data('to-target-mobile').split(':');
  }

  let dur = '100%';
  if ($this.data('duration')) {
    dur = $this.data('duration');
  } 

  let triggerEl = $this.parent();
  if ($this.data('trigger-element')) {
    triggerEl = $($this.data('trigger-element'));
  }

  const key = toTarget[0];
  const value = toTarget[1];
  const tween = TweenMax.to(this, 2, {[key]: [value]});

  new ScrollMagic.Scene({triggerElement: triggerEl[0], duration: dur, offset: 0})
            .setTween(tween)
            .addTo(controller);
});