An issue where the animation is broken every time it is resized

[rarla]

 

 

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));
  }
})

 

[Cassie]

Hi there Rarla,

 

It's impossible to pin down animation issues by just looking at the GSAP code as styling and markup play such a huge part.

 

Could you please make us a minimal demo on codepen or codesandbox?

 

Thanks!