SWALKER Posted October 14, 2021 Share Posted October 14, 2021 I am very new to gSAP but I'm loving it BUT I can't manage to change the tween parameters responsively. All I am trying to do it change a Y value at certain breakpoints I tried this but it doesn't seem to work and actually when I insert it at the start of my JS file, nothing after works as if there is a syntax error but I can't see one and a validator came back clean? $(window).on('resize',function(){ if($('#content').width() >= 768){ // tweens or code can go here gsap.to(".about-right-lower", { scrollTrigger: { trigger: ".upper-image", start: "top 100%", end:'+=20000', scrub: 1, }, y: "-60%", ease: "ease-in-out" }); } else if($('#content').width() <= 767){ gsap.to(".about-right-lower", { scrollTrigger: { trigger: ".upper-image", start: "top 100%", end:'+=20000', scrub: 1, }, y: "-10%", ease: "ease-in-out" }); } }); I have complete layout shifts so I can't think of any adequate solution other than changing the parameters (for example using viewport based widths and heights). Any help would be amazing! Link to comment Share on other sites More sharing options...
OSUblake Posted October 14, 2021 Share Posted October 14, 2021 Welcome to the forums @SWALKER For media query changes like that, you should use ScrollTrigger's matchMedia. https://greensock.com/docs/v3/Plugins/ScrollTrigger/static.matchMedia() As for for your code not working, it's hard to say without seeing it. Are you sure you files are in the correct order, just before the closing the </body> tag, with your code file coming after the GSAP files. And you are registering ScrollTrigger, e.g. gsap.registerPlugin(ScrollTrigger)? Link to comment Share on other sites More sharing options...
SWALKER Posted October 14, 2021 Author Share Posted October 14, 2021 Hi there - gosh that was a fast response! Thanks so much for that - I will read through it I have pasted all my JS here if this helps See the Pen ZEJbXvG by shereewalker (@shereewalker) on CodePen Link to comment Share on other sites More sharing options...
OSUblake Posted October 14, 2021 Share Posted October 14, 2021 Nothing really stands out. Try putting your html, css, jQuery, etc in that pen and see if it works. If it works on CodePen, then there's probably an issue with your setup/environment. 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