matt-j-m

Hello all. Total beginner GreenSock user here, please bear with me. I've set up a demo to switch out images on the left while the user scrolls text on the right. It's heavily based on the official "Pinned content based on section - ScrollTrigger" demo. It works ok but I'm looking for advice on how to tweak the functionality slightly. Below is my wish list, but if anyone who cares to help could also explain what I'm missing or doing wrong as well it would be greatly appreciated, as I wish to learn more about GSAP and use it in different applications. The first image needs to be immediately visible i.e. on page load, as soon as the user starts to scroll past the header. When scrolling through, Image Number Two needs to become visible when the horizontal line between Text Number One and Text Number Two is vertically aligned with the Image Number One placeholder text. Currently, Image Number Five is never displayed. Per the above, it should come into view when the top of Text Number Five is vertically centred with Image Number Four. When scrolling ends, the bottom border of Text Number Five should be vertically aligned with the bottom of Image Number Five. In my current demo, scrolling ends when the text pane is only half way up the image pane. I feel like this is related to problem #2 above, but not sure how to tweak it. Thanks in advance for any help or suggestions. Cheers