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) https://codepen.io/armandohyssii/pen/ZEPNGOK Any guidance or tips on how to achieve this effect would be greatly appreciated.

Thank you @mvaneijgen, it helped a lot.

I understand, and incorporating short delays between tweens does enhance clarity. Hopefully i have a last question, revealing of the line should happen in the middle of last tween(horizontal scroll) - that's why i used "stops" previously - to stop in the middle of horizontal scroll. To clarify, the horizontal tween has commenced, and at this point when the left of text card reaches middle of viewport, I need to draw the SVG line. Currently, the line is being drawn at the beginning, before the horizontal scrolling takes place. And like it is now it has also a big white space in the end, after the video. Probably the end is not calculated properly New edit: Also horizontal scroll animation goes too fast

Hi mvaneijgen, thank you for your reply! I changed end to `${window.innerHeight * 5}px top` . In this specific case, if I use just one ScrollTrigger, how can I initiate the zooming from the center of the screen to the top? I'm relatively new to GSAP, so apologies for any uncertainty. Additionally, as you can see I'm facing significant delays after the zooming action. How can I eliminate these delays? Furthermore, could you guide me on how to insert a stop in the middle of the screen to reveal the line? Maybe it's not so clear I can attach also a short video on how it should be. horizontal-scroll.mp4

Hello everyone, I hope you're doing well. I'm seeking immediate assistance with a topic concerning horizontal scrolling. Initially, I have an image that needs to be zoomed (scaled) from the center to the top, and then further zoomed into the center (the zooming functionality is currently working fine). Following that, I need to implement a horizontal scroll to the right. When the left edge of the text card reaches the center of the viewport, it should reveal a line (desktop-line-animation) towards the image, which is positioned halfway on the left side. The scrolling should be pinned while extending and reducing the line. Once the line is completely revealed, scrolling should continue, and the text needs to change to new content until the video comes fully into view, at which point the scrolling ends. I've been using stops, but currently, everything occurs after the image has finished zooming and before scrolling starts, resulting in a significant delay. Any suggestions or improvements to optimize this process would be greatly appreciated. I'll attach a desing and to show you how it should look like: