Hello. I am making the main page with gsap. However, whenever the screen is resized, the animation is choppy and does not work properly. Invading each other's territory breaks the UI. I'm not sure which attribute to use. Help
I am using react. The code using gsap is below.
import { gsap, ScrollTrigger } from "gsap/all";
gsap.registerPlugin(ScrollTrigger);
const vh = (num) => this.props.currentHeight * (num/100);
const gsapFunc = (ref, y) => {
gsap.to(ref, {
scrollTrigger: {
trigger: ".home__motion__banner--apps",
start: "top center",
scrub: true
},
y, duration : 10,
});
}
ScrollTrigger.saveStyles(".home__motion__banner--apps, .app01, .app02, .app03, .app04, .app05, .app06, .app07, .app08, .app09");
ScrollTrigger.matchMedia({
"(min-width: 1280px)": function() {
gsapFunc(".app01", -200);
gsapFunc(".app02", -300);
gsapFunc(".app03", -100);
gsapFunc(".app04", -400);
gsapFunc(".app05", -200);
gsapFunc(".app06", -200);
gsapFunc(".app07", -200);
gsapFunc(".app08", -400);
gsapFunc(".app09", -500);
},
"(max-width: 1279px)": function() {
gsapFunc(".app01", -vh(20));
gsapFunc(".app02", -vh(20));
gsapFunc(".app03", -vh(5));
gsapFunc(".app04", -vh(8));
gsapFunc(".app05", -vh(10));
gsapFunc(".app06", -vh(5));
gsapFunc(".app07", -vh(8));
gsapFunc(".app08", -vh(20));
}
})
