chrisdb Posted April 27, 2023 Share Posted April 27, 2023 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 Link to comment Share on other sites More sharing options...
GSAP-GOD Posted April 27, 2023 Share Posted April 27, 2023 Hi, I am also having a similar problem to this, it would really help if someone could assist. Thanks in advance. Link to comment Share on other sites More sharing options...
Solution Cassie Posted April 27, 2023 Solution Share Posted April 27, 2023 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) }; }); 1 Link to comment Share on other sites More sharing options...
chrisdb Posted April 27, 2023 Author Share Posted April 27, 2023 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? Link to comment Share on other sites More sharing options...
GSAP-GOD Posted April 27, 2023 Share Posted April 27, 2023 Thats great Cassie thanks for the response! Link to comment Share on other sites More sharing options...
Cassie Posted April 27, 2023 Share Posted April 27, 2023 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 } } Link to comment Share on other sites More sharing options...
chrisdb Posted April 27, 2023 Author Share Posted April 27, 2023 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. 1 Link to comment Share on other sites More sharing options...
Cassie Posted April 27, 2023 Share Posted April 27, 2023 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); } Link to comment Share on other sites More sharing options...
Cassie Posted April 27, 2023 Share Posted April 27, 2023 That's not a GSAP related thing, that''s just how your styling is set up! Link to comment Share on other sites More sharing options...
chrisdb Posted April 27, 2023 Author Share Posted April 27, 2023 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 1 Link to comment Share on other sites More sharing options...
Cassie Posted April 27, 2023 Share Posted April 27, 2023 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: ..., }), 1 Link to comment Share on other sites More sharing options...
chrisdb Posted April 27, 2023 Author Share Posted April 27, 2023 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! 1 Link to comment Share on other sites More sharing options...
Cassie Posted April 27, 2023 Share Posted April 27, 2023 Perfect! 🥳 1 Link to comment Share on other sites More sharing options...
Recommended Posts
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 accountSign in
Already have an account? Sign in here.
Sign In Now