Hello once again,
I have changed the code a bit (You can check the same codepen link). I changed the html and set my image element to another place so that it's easier to set its final position.
So, right now I have my desire animation kind of. But I can't find a way to pin my element until the first timeline's animation has finished.
Unfortunately, I can't find a way to have the animation on Scroll without the ScrollTrigger.. It's like I want the element to be pinned in the first animation and somehow unpinned in the second.