Okay I managed to fix it. I found what was making the issue. The problem was related to the element that was set to Relative position and it was pushing the whole animation timeline like 500-600px for some reason, but when I changed the position from relative to absolute it all got fixed... You can see the funciton that I used below.
$(".need-animated").each(function (index) {
let triggerElement = $(this);
let targetElement = $(this);
let tl = gsap.timeline({
scrollTrigger: {
trigger: triggerElement,
// trigger element - viewport
start: "bottom 80%",
end: "top top",
scrub: 1
}
});
tl.from(
targetElement,
{
fontSize: "8em",
y: "-190%",
duration: 1
},
{
@mvaneijgen thank you for your help!