An issue where the animation is broken every time it is resized in GSAP Posted September 24, 2021 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)); } })
An issue where the animation is broken every time it is resized
in GSAP
Posted
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.