Hello people, I'm calling to you for help. I'm new to gsap and with Scroll Trigger too. After playing around I see that's very easy to set and make animations to elements, and I know that maybe what I'm asking is very easy, but I can't find how to do it, I've been struggling for a few days... maybe I'm not clearly understand the tween to and fromTo methods.
So, the thing is: I have a group of layers one above the other due the z-index property which I set on start:
gsap.set(".transformation-layer", {
zIndex: (i, target, targets) => targets.length - i,
//backgroundColor: (i, target, targets) => `#${Math.floor(Math.random()*16777215).toString(16)}`,
});
Please ignore the background, this is the property that I have conflict with. I have 5 layers, which the first one gets z-index:5, the second one z-index: 4 and so on...
They're inside a wrapper wich is the one who triggers the animation:
gsap.to(".transformation-layer:not(:last-child)", {
yPercent: -90,
opacity: 0,
ease: Power3.easeOut,
stagger: 0.5,
scrollTrigger: {
trigger: ".transformation-wrapper",
start: "top top",
end: "bottom 20%",
markers: true,
scrub: 1,
pin: true
},
});
So, right now every layer is visible because there is no background, and I need it to be like that. So my question is how I should put the visibility from 0(start) then 1(meanwhile scroll trigger acts) and then to 0(when the scroll of the layer ends).
Or having this visibility: hidden in the css as a starter state. Then when I scroll to the layer it appears on the beginning and hiddens again on the end. Wanna know if I'm explaining myself correctly.
Thanks in advance
