Scroll for each element animation mask, scale and add a class

[pjgulo]

Good morning,

Thank you for your tools, sorry how I write English and ask you for help.

 

I am a newbie with your tools since I usually do animation with js and css directly and using your tools I think I would do more, less time, etc.

 

I am trying to make a reveal with a mask-image from the scroll. Something similar to what appears on this website: axelvanhessche.com. But, from the code I attached, it only does it for one element. In other codes that I have tried, it does them at the same time in all of them or perhaps the element that the class has to add is not defined. By logic, you should do the first element and when finished, the second, and so on in the timeline with all the elements.

 

The code I'm trying to make is to count all the elements in the DOM as containers so I don't have to change the js for each page. But I don't use tools well.

 

	// This code only performs the first element

	/* -- SCROLL for each content items -- */
    gsap.utils.toArray(".items").forEach(function (e, i) {
        /* -- scrollTrigger -- */
        var r = gsap.timeline({
            scrollTrigger: {
                trigger: e,
                scrub: .5,
                pin: !0,
                start: "top top",
                end: function () {
                    return "+=".concat(4 * window.innerHeight)
                },
                onEnter: function ({ direction, isActive }) {
                    if (isActive == true) {

                    }
                },
                pinSpacing: true,
                defaults: {
                    ease: "none"
                }
            }
        });
        /* -- END scrollTrigger -- */
        /* -- mask, scale and active for each item -- */
        var el = gsap.utils.toArray(".item");
        var p = el[i];

        gsap.set(el, { zIndex: (i) => i + 1 });
        r.set(p, {
            maskSize: "0%",
        })
		/* repeat el.length; comienza el primero y termina, pasando al segundo, etc. */
        r.to(p, {
            maskSize: "200%", stagger: 0.4
        }, "first")
            .fromTo(p.querySelector(".image"), {
                scale: 1.25
            }, {
                scale: 1, stagger: 0.4
            }, "first").add((function () {
                return p.classList.add("active")
            }
            ), "first+=0.4");
		/* END repeat */
        console.log(p, el[i], el.length);
        /* -- END mask, scale and active for each item -- */
    });

 

I hope I have explained myself well and that you could help me to get to know EVERYTHING better.

 

Thanks so much, I wait for your answer.

 

All the best,

[Rodrigo]

Hi,

 

Is kind of hard to check this without a minimal demo. What I can tell you that this is not a super simple thing to do, but @mvaneijgen created this thread that should help quite a bit:

 

Hopefully this helps.

Happy Tweening!

[pjgulo]

Hi,

 

Thank you,

 

I know I'm trying something very complicated. More or less it is repeating the function according to the number of elements. Since there are, for example, 4 elements, the code to repeat would be:

 

		/* repeat el.length; comienza el primero y termina, pasando al segundo, etc. */
// element 01
        r.to(el[0], {
            maskSize: "200%"
        }, "firstMask")
            .fromTo(el[0].querySelector(".image"), {
                scale: 1.25
            }, {
                scale: 1
            }, "firstMask").add((function () {
                return el[0].classList.add("active")
            }
            ), "firstMask+=0.4")
// element 02
r.to(el[1], {
            maskSize: "200%"
        }, "secondMask")
            .fromTo(el[1].querySelector(".image"), {
                scale: 1.25
            }, {
                scale: 1,
            }, "secondMask").add((function () {
                return el[1].classList.add("active")
            }
            ), "secondMask+=0.4")
// element 03
r.to(el[2], {
            maskSize: "200%"
        }, "thirdMask")
            .fromTo(el[2].querySelector(".image"), {
                scale: 1.25
            }, {
                scale: 1
            }, "thirdMask").add((function () {
                return el[2].classList.add("active")
            }
            ), "thirdMask+=0.4")
// element 04
r.to(el[3], {
            maskSize: "200%"
        }, "lastMask")
            .fromTo(el[3].querySelector(".image"), {
                scale: 1.25
            }, {
                scale: 1
            }, "lastMask").add((function () {
                return el[3].classList.add("active")
            }
            ), "lastMask+=0.4")
		/* END repeat */

 

And I have solved it like this, since I don't know how to do it 100% with gsap, like this:

 

        /* Repeat */
		for (let c = 0; c < el.length; c++) {
            r.to(el[c], {
                maskSize: "200%"
            }, c + "Mask")
                .fromTo(el[c].querySelector(".image"), {
                    scale: 1.25
                }, {
                    scale: 1
                }, c + "Mask").add((function () {
                    return el[c].classList.add("active")
                }
                ), c + "Mask+=0.4");
        }
		/*END repeat */

I can add the number of elements I want in the DOM without changing the js.

 

It works, which is what is important!!! hehehehe

 

Thank you very much for everything and magnificent tools!!!

 

All the best,