glem1337

And if i use appearTween.to('.box', { alpha: 1 }); and .box { width: 100px; height: 100px; background-color: red; opacity: 0; // invisible by default } and scrollTween.to('.box', { alpha: 0 }); I had the same effect

If I using .fromTo() box was visible on start but must be a hidden. https://codepen.io/glem1337/pen/oNYzRvR?editors=0110

Why does same properties on the same elements but in different timelines was applied immediately? So animation on scroll does not working. I had used immediateRender, clearProps, autoRemoveChildren but it doesn't help. You can see my problem in codepen. P. S. Sorry for my English : )

Thanks a lot!

I have one more question. How can I make the block decrease at the end work the same way as the increase at the start. I mean is that the decrease at the end starts before the dashed line disappears and the parallax ends. At the moment, the decrease at the end begins only after the end of the parallax and the hiding of the line. https://codepen.io/glem1337/pen/bGeGLWY I found a solution, but I'm not sure it is correct. tween .to( ".scroll-slider", { clipPath: "inset(10% 5%)", duration: 1 }, "start" ) .to( ".scroll-progress-line", { y: "-100%", duration: 4 }, "start" ) .to( ".scroll-slider-item img", { y: "-20%", duration: 4 }, "start" ) .to( ".scroll-slider", { clipPath: "inset(20% 10%)", duration: 1 }, "-=1" // this solution ); Also I would like to know if it seems to me that the animation at the end is slower? And how to solve it.

Thanks for the help. Result: https://codepen.io/glem1337/pen/bGeGLWY

Thanks for the answers. These solutions work. But if the slider is at the bottom and there is no content after it? In this case, I will not be able to apply this approach. At the moment, I got it like this, but for some reason the content jerks on pin. https://codepen.io/glem1337/pen/bGeGLWY

Hello! I am new to GSAP. I have to implement a slider like this https://drive.google.com/file/d/1vQy5BA_RY1u4EITYKgsDgLKdowihtSnP/view How can I remove the white space under the slider so that the slider is visually between the content? And simulate a longer scroll in order to set the duration of the scene? That is, after the slider has opened, I will need time to animate the slides. P. S. Sorry for my English. I just teach him. I hope you understand me.