Using from animation + pin ScrollTrigger make my div slightly goes to bottom from its default position

[arifkrniawan]

Can anyone help me? It's been a 3 days and I can't solve it.

I have some problem with my divs, its goes to bottom maybe 50px for no reason.

The first image is before I apply my GSAP, and the second one is after I apply my GSAP.

 

Also there is my Codepen, thankyou

See the Pen PwYYWwm by arifkrniawan (@arifkrniawan) on CodePen.

[arifkrniawan]

1 minute ago, arifkrniawan said:

Can anyone help me? It's been a 3 days and I can't solve it.

I have some problem with my divs, its goes to bottom maybe 50px for no reason.

The first image is before I apply my GSAP, and the second one is after I apply my GSAP.

 

Also there is my Codepen, thankyou

note: I still want my divs animated from bottom to top at opening page

[mvaneijgen]

Your issue is that you're animating your trigger element. Eg you animate sections on the y-axis 50px, but then also tell your ScrollTrigger to watch the y-axis of this same element to use as its calculations, which is causing the 50px jump. The easiest solution is to wrap your elements in another element called something like .trigger and use that as the trigger element, but that will require adjusting some of your CSS.

 

You might also what to look in to ScrollTrigger clamp(), on my screen your ScrollTrigger had already started on page load and with clamp you can tell it to wait until the visitor scrolls. In the demo below I've also converted your ScrollTrigger to be ints own object, if you don't need a tween. But your main issue is that you're animating your trigger element which is trowing of your animation by 50px and that is why you see the jump. Hope it helps and happy tweening! 

 

 

See the Pen VYZYrdL?editors=1010 by mvaneijgen (@mvaneijgen) on CodePen.

[arifkrniawan]

On 11/29/2024 at 3:26 PM, mvaneijgen said:

Your issue is that you're animating your trigger element. Eg you animate sections on the y-axis 50px, but then also tell your ScrollTrigger to watch the y-axis of this same element to use as its calculations, which is causing the 50px jump. The easiest solution is to wrap your elements in another element called something like .trigger and use that as the trigger element, but that will require adjusting some of your CSS.

 

You might also what to look in to ScrollTrigger clamp(), on my screen your ScrollTrigger had already started on page load and with clamp you can tell it to wait until the visitor scrolls. In the demo below I've also converted your ScrollTrigger to be ints own object, if you don't need a tween. But your main issue is that you're animating your trigger element which is trowing of your animation by 50px and that is why you see the jump. Hope it helps and happy tweening! 

 

 

 

 

Greetings sir @mvaneijgen, Thankyou! it's working! I just add ".trigger" and styling the CSS