olr777

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

1 minute ago, olr777 said:

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)?so that there is no glow when loading the next img of the cover.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.

50 minutes ago, Cassie said:

@Cassie
Your just need to tweak your timings - your stagger was spaced over 100 seconds and the drop down of one of the bins was 0.12 seconds. That's a huge difference.

You're almost there! Is there a GSAP specific question we can help with? Are you struggling to understand a particular part of this?
 

 

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.

58 minutes ago, Cassie said:

Looks like you need to work on your timings a bit though

 

If I were you I would get rid of ScrollTrigger and just focus on getting the timing on your timeline feeling right. Then add scrollTrigger afterwards

 

This will help!
 

 

hmm

41 minutes ago, Cassie said:

Adjusted to use 1 instead of 100 like Trapti's suggested -

 

 

 

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

1 hour ago, Trapti said:

Stagger value and delay value 100 doest not look good to me. Just remember it is in seconds. 

@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:

See the Pen gOvgvwR by olr777 (@olr777) on CodePen

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,
    })