bysobi

What you do evokes the most wonderful feelings. Thank you for helping people like me. I've been working with gsap for a short time, but I've already fallen in love with this plugin. New demo: https://codepen.io/bysobi/pen/MWLOMXR I hope our code, which we created, will help someone in the same way. I made a few improvements to your code, specifically: 1. Ensured that the last element does not disappear by adding a condition (not sure if this is an "elegant" solution): items.forEach((item, i) => { tl.to( [ item.querySelector(".scroll-content-item__text"), item.querySelector(".scroll-content-item__image") ], { duration: 0.3, ease: "power1.inOut", yPercent: 0, opacity: 1, } ); if (i < items.length - 1) { tl.to( item.querySelector(".scroll-content-item__text"), { duration: 1, yPercent: -30, opacity: 0 }, ); tl.set(item.querySelector(".scroll-content-item__image"), { opacity: 0, ease: "power1.inOut" }); } }); 2. After completing the animation for the first .scroll-content-item block, the image now smoothly transitions to another. We almost 1:1 copied the block from the Apple website. I achieved this thanks to the CSS property that I added for the .scroll-content-item__image class: transition: opacity .3s ease-in; Before that, I removed opacity: 0. However, this caused a problem that I can't solve yet. Because I removed opacity: 0, the images are displayed BEFORE the animation triggers. If I set opacity: 0, I can't achieve the smoothness I need. Any ideas? 3. How can I make the animation start from the middle of the screen? When I change the "Start" parameter, the block is not displayed in the center in this case.

Thanks for help! Here's an example that I almost managed to create, thanks to you! https://codepen.io/bysobi/pen/YzBEBpM I've come close, but I can't figure out the sequence of the animation. It seems too complicated. The website and the section I want to replicate: https://www.apple.com/ua/airpods-pro/ Question #1 I've almost managed to replicate the text animation. However, I encountered issues with the image. The initial appearance of text and image aligns with the example of apple. Problems arise during the display of the second block. It should be like this: 1. Scroll through text #1. It's almost gone, but image #1 is still visible and not hidden. 2. As soon as text #2 appears, image #2 smoothly appears. Question #2 Each block with text and image occupies a height of 100vh. I would like to keep it that way but reduce the amount of scrolling needed to initiate the animation. Thank you so much. I've spent over 18 hours but still couldn't solve this issue.

Hello everyone! I got inspired by Apple's website: https://www.apple.com/airpods-pro/ I would like to ask for help from those who know how to replicate a block animation. Specifically, I'm interested in the ability to change text and images that are in a fixed position, meaning they do not change their position when scrolling. Could you help me with how to correctly use ScrollTrigger? This block