Skip to content

Instantly share code, notes, and snippets.

@timstl
Created November 9, 2017 20:33
Show Gist options
  • Save timstl/0fbf571824b731c7c4e7789d46d58922 to your computer and use it in GitHub Desktop.
Save timstl/0fbf571824b731c7c4e7789d46d58922 to your computer and use it in GitHub Desktop.
ScrollMagic: Animate element using HTML data attribute
// 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);
});
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment