How to use the same trigger for two divs?

[rusakovsb]

Hello! I have two blocks with same classes .container. Inside each .container I want to have two animated divs: .box1 and .box2. Animation for .box1 and .box2 must start when parent .container is in viewport. How to use the same trigger for two divs?

 

gsap.utils.toArray(".div1").forEach(box1 => {
        gsap.to(box1, {
            ease: "none",
            transform: "translateY(-5vw)", 
            scrollTrigger: {
                trigger: container,
                start: 'top bottom',
                end: 'top top',
                scrub: 0.1
            }
        });
    });

    gsap.utils.toArray(".div2").forEach(box2 => {
        gsap.to(box2, {
            ease: "none",
            transform: "translateY(5vw)",         
            scrollTrigger: {
                trigger: container,
                start: 'top bottom',
                end: 'top top',
                scrub: 0.1
            }
        });
    });

 

[akapowl]

 

Hello @rusakovsb and welcome to the forums!

 

You could loop over all your boxes instead and apply different values to properties by using ternary operators/if-else or only if statements e.g.

 

Oh, almost forgot: it is not recommended to tween on your trigger element like this when it will change the dimensions or positioning to where it was initially, so best just wrap what you are going to tween on and use that wrap as the trigger.

 

And you don't need to use transform: "translateY(5vw)" , you can just say y: "5vw" instead .

 

Btw, minimal demos make it easier to visualize things  

 

See the Pen BaJOYPM by akapowl (@akapowl) on CodePen

 

[rusakovsb]

1 hour ago, akapowl said:

 

Hello @rusakovsb and welcome to the forums!

 

You could loop over all your boxes instead and apply different values to properties by using ternary operators/if-else or only if statements e.g.

 

Oh, almost forgot: it is not recommended to tween on your trigger element like this when it will change the dimensions or positioning to where it was initially, so best just wrap what you are going to tween on and use that wrap as the trigger.

 

And you don't need to use transform: "translateY(5vw)" , you can just say y: "5vw" instead .

 

Btw, minimal demos make it easier to visualize things  

 

 

 

 

Thanks. It helped me find a solution.