Text and image animation on scroll

[Canvas Reply]

Hello everyone,
 

I'll need your advice and suggestions on a scrolling animation I'm working on.
 

The task involves creating an animation that pairs scrolling text with corresponding images.
Basically, I have three images and three pieces of text, with each text specifically linked to an image through wrappers.
 

The goal is to create a transition where, as the first image comes into view, its respective text scrolls from the bottom to the top.
Following this, both the image and its text should fade out.
Subsequently, the second image should fade in, with its text scrolling in the same manner from bottom to top. This process is then repeated for the third image and continues in this pattern.
Animation  of the text bottom-top should be part of the SCROLL (everything happen while scrolling)



 

Any guidance or tips on how to achieve this effect would be greatly appreciated.

See the Pen ZEPNGOK by armandohyssii (@armandohyssii) on CodePen

[mvaneijgen]

I would first focus on the animation and just ignore ScrollTrigger for now. I've just written a post how I always fall in the trap of optimising code before it is even working and that rethinking the approach of first just building what it needs to and do worry about loops and only start optimising after it is working. Hope it helps and happy tweening!