mdeBdVN

index.html

<h1>I change colour</h1>

<div id="trigger">This is the trigger, scroll it in and out of the view</div>

mdebdvn.markdown

mdeBdVN

A Pen by Alexandros K on CodePen.

License.

script.js

console.clear();

const trigger = $("#trigger");
const target = $("h1");

const tl = gsap.timeline();
const controller = new ScrollMagic.Controller();
const scene = new ScrollMagic.Scene({
  triggerElement: $("#trigger")[0],
  triggerHook: 'onLeave',
  reverse: true,
  tweenChanges: false,
  duration: 10 // duration 0 or longer behaves the same
});

// works
// requires a slight offset
tl.call(myFunc, [target], '0.0001'); 

// doesn't work, only triggers once
// tl.call(myFunc, [target]); 

// not sure if this works as expcted or what the expected behaviour would be
// tl.to(trigger, {
//   background: 'black'
// }).call(myFunc, [target], '<')

// but this works better now
// tl.to(trigger, {
//   background: 'black'
// }).call(myFunc, [target])


scene.setTween(tl);
controller.addScene(scene);

var counter = 0;
function myFunc(target) {
  console.log(`called ${counter++}`)
  target.toggleClass("active");
}

style.css

@import url('https://fonts.googleapis.com/css?family=Signika+Negative:300,400&display=swap');
body { 
  font-family: "Signika Negative", sans-serif; 
  font-weight: 300;
}

h1 {
  position: fixed;
}

h1.active {
  color: cyan;
}

#trigger {
  height: 2000px;
  width: 500px;
  background: magenta;
}