I'm using GSAP to animate things that aren't DOM elements. Specifically a cube in THREE.js. I apologize - I'm not proficient enough to make a minimal demo, but I just want to know if it's possible to pass a class variable from javascript into the ScrollTrigger matchMedia:
ScrollTrigger.matchMedia({
"(max-width: 1024px)": () => {
this.moveTimeline = new GSAP.timeline({
scrollTrigger: {
trigger: ".area-one",
start: "top top",
end: "bottom bottom",
scrub: true,
},
});
this.moveTimeline.to(this.cube.position, {
x: 5
});
},
});
In this example I have a constructor as such with the variable this.cube:
class Cube{
constructor(){
this.cube = three.js cube
}
}
Of course, if I use function(){} I get errors saying "this.cube" is not defined, because I lose the context. But if I use an arrow function I get no errors, but the matchMedia no longer works. Basically nothing moves.
Is it possible to access class variables in ScrollTrigger's MatchMedia?
