I have two components where i am hiding on scroll down and showing on scroll up action . I have given some animation effect to slideIn and slideOut animation something like this.

const outY: AnimationEffects = {
  duration: '200ms',
  offsetY: '100px',
  persist: ANIMATION_PERSIST.ALL,
  timingFunction: ANIMATION_TIMING_FUNCTION,
};
const inY: AnimationEffects = {
  duration: '200ms',
  offsetY: '100px',
  persist: ANIMATION_PERSIST.ALL,
  timingFunction: ANIMATION_TIMING_FUNCTION,
};

this.inAnimation(component1, null, inY);
this.outAnimation(component1, null, outY);

I am using same code for both components but in real time one component is coming fast and another component is slow.

what might be going wrong?