GSAP ScrollTrigger only run on desktop

[chrisdb]

Hi,

 

I want the scrolltrigger animation to only show on desktop. I am new to GSAP and dont really know where to insert the media function in my code. Could someone help please.

See the Pen MWPojov by chrisdb (@chrisdb) on CodePen

[GSAP-GOD]

Hi,

 

I am also having a similar problem to this, it would really help if someone could assist. 

 

Thanks in advance. 

[Cassie]

Here you go!

See the Pen YzJQGbz?editors=0010 by GreenSock (@GreenSock) on CodePen

 

// create
let mm = gsap.matchMedia();

// add a media query. When it matches, the associated function will run
mm.add("(min-width: 800px)", () => {

  // put all your animations in here
  gsap.to(...);
  gsap.from(...);
  ScrollTrigger.create({...}); 

  return () => { // optional
    // custom cleanup code here (runs when it STOPS matching)
  };
});

 

[chrisdb]

2 minutes ago, Cassie said:

Here you go!
 

 

 

 

 

// create
let mm = gsap.matchMedia();

// add a media query. When it matches, the associated function will run
mm.add("(min-width: 800px)", () => {

  // put all your animations in here
  gsap.to(...);
  gsap.from(...);
  ScrollTrigger.create({...}); 

  return () => { // optional
    // custom cleanup code here (runs when it STOPS matching)
  };
});

 

Thankyou Cassie thats worked perfectly. Appreciate the speedy response. Another quick question...

 

When the white section scrolltrigger hasnt kicked in I want to have the text color white so its visible on the dark background then change to black once the white background has come into view. How would I include this?

[GSAP-GOD]

Thats great Cassie thanks for the response! 

[Cassie]

Not sure I understand entirely, are you saying without scrollTrigger it's the wrong colour?

You can use media queries in CSS to affect styling too if so

 

@media only screen and (min-width: 800px) {
  .el {
    color: something
  }
}

 

[chrisdb]

1 minute ago, Cassie said:

Not sure I understand entirely, are you saying without scrollTrigger it's the wrong colour?

You can use media queries in CSS to affect styling too if so

 

@media only screen and (min-width: 800px) {
  .el {
    color: something
  }
}

 

 

I want the text once the scrolltrigger changes the background to white to change the h2 & p text from white to black. At the moment the text stays dark and you cant see the text before the scrolltrigger changes the background to white. Sorry struggling to explain this, hope this helps.

 

[Cassie]

If you're asking how to make that text white before the animation kicks in, then you'll have to change that in your styles.

this is the bit that's making the text dark in that section

 

.color-light p, .color-light h2 {
    color: var(--dark);
}

 

[Cassie]

That's not a GSAP related thing, that''s just how your styling is set up!

[chrisdb]

16 minutes ago, Cassie said:

If you're asking how to make that text white before the animation kicks in, then you'll have to change that in your styles.

this is the bit that's making the text dark in that section

 

.color-light p, .color-light h2 {
    color: var(--dark);
}

 

I need the text to change after the animation kicks in

[Cassie]

Ok, so that's because your CSS here is higher in specificity than the tween is

 

.color-light p, .color-light h2 {
    color: var(--dark);
}

gsap.to("body", {
 color: "red",
}),

I don't know where that styling is coming from, I see you have bootstrap loaded too. So you have two choces, either get rid of the styling so there's no conflicts on adjust your tween/add an animation to target those elements specifically
 

gsap.to("body, .color-light p, .color-light h2", {
 color: ...,
}),

 

[chrisdb]

5 minutes ago, Cassie said:

Ok, so that's because your CSS here is higher in specificity than the tween is

 

.color-light p, .color-light h2 {
    color: var(--dark);
}

gsap.to("body", {
 color: "red",
}),

I don't know where that styling is coming from, I see you have bootstrap loaded too. So you have two choces, either get rid of the styling so there's no conflicts on adjust your tween/add an animation to target those elements specifically
 

gsap.to("body, .color-light p, .color-light h2", {
 color: ...,
}),

 

Found the issue Cassie, thanks again for the help. Have a lovely day!

[Cassie]

Perfect! 🥳