Jump to content
GreenSock

rodgerjr

Is it possible to pass class variables from javascript into scrolltrigger matchMedia function?

Go to solution Solved by rodgerjr,

Recommended Posts

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?

Link to comment
Share on other sites

  • Solution

Woops sorry, arrow functions do work, I just forgot to resize my window lol. 

  • Like 1
Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
  • Recently Browsing   0 members

    • No registered users viewing this page.
×