olr777

thanks for the help! I think I understood a lot! great support !!

ok, I understand but I still have a question, is there an option to accelerate the opening of this cover? to make the disappearance of subsequent img faster? (like at the beginning when I sent the link)? when I change the stagger or delay, the next stage stops working (falling containers) and this is the main problem that I cannot deal with.

hmm

Hmm, that's not what I meant, the flap lifted well, smoothly and quickly - now it's like an opacity clearance, now there is no smooth . My point is that when the flap is raised, these two containers are supposed to fall from the top into the middle, but they do it so quickly that you can't see the animation. I would like to write .to(...) because there will be a few more sequences, but after doing the stagger I can't move on, everything happens quickly, I think I need to separate it somehow .. maybe someone can help me quickly separate it and write it down correctly so that I can understand it

@Trapti can I ask you to check my codepen code? I will be very grateful! :)

Ok, I posted it on codpen. At the end, these two containers are to flow smoothly into this basket on the scroll, now they appear there immediately. When I remove the code responsible for opening the flaps, where there is a stagger, it works smoothly. Link to codpen: https://codepen.io/olr777/pen/gOvgvwR

maybe I'm doing it wrong, the thing is that after using the stagger to open the lid when he wants to add another animation .to (...) it stops working on the scroll, when I remove the lines responsible for opening the lid, it works fine. Did not work .to(".anim-bin__img__item--3")..as if transform x is performed immediately without using a scroll let bin = new gsap.timeline({ // defaults: { // ease: "none", // }, scrollTrigger: { trigger: ".sec-anim-wrap", start: "top top", end: () => window.innerHeight, scrub: true, markers: true, pin: ".sec-anim-wrap", } }) .to(".anim-bin__img__item-plat--10", { opacity: 0, // stagger:100 }) .from(".anim-bin__img__item-plat--all", { opacity: 0, stagger: 100 }, -1) .to(".anim-bin__img__item-plat--all", { opacity: 0, stagger: 100 }, 100) .set(".anim-bin__img__item-plat--1", { opacity: 1, }) .to(".anim-bin__img__item--3",{ y: -850, })