Problem with a small animation (y)

[NiceBone]

Hello guys,

 

first of all i'm pretty new to gsap. I've started like 2 days ago with a new angular project. I made a small video regarding my problem with the y axis. Everytime the "scroller-start marker" hits the "start maker" the whole animation goes crazy. 

 

Hopefully one of you will find my mistake.

video: 

 

 

 

HTML
<h1 #test>MUSIC</h1>

Angular part

gsap.timeline({
  scrollTrigger: {
    trigger: this.test.nativeElement,
    start: 'top bottom',
    end: 'bottom 75%',
    scrub: 1,
    markers: true,
  },
}).fromTo(
  this.test.nativeElement, {
    opacity: 0,
  },
  {
    x: innerWidth,
    y: -innerHeight,
    opacity: 1,
  }
);

 

Thanks

Jerome

[elegantseagulls]

This could be that you are animating a Y transform of the same element that you are using as your ScrollTrigger Target.

 

Can you please set up a minimal codepen demo to help us further debug this?

 

[NiceBone]

Hey,

 

I fixed my problem by changing the ScrollTrigger Target to the parent div. Your answer fixed the problem.

 

Thank you!