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!
