ScrollMagic: Toggle class with HTML data attribute.

scrollmagic.dataclasstoggle.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)
// Optional: Adjust animation offset using data-animation-offset="X"
$('[data-to-target]').each(function() {
	const $this = $(this);		

	let offst = 0;
	if ($this.data('animation-offset')) {
		offst = $this.data('animation-offset');
	}

	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: offst})
						.setTween(tween)
						.addTo(controller);
});