ScrollTrigger hide visibility before trigger occurs

[LReds29]

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

[GreenSock]

If I understand you correctly, you have several options: 

 

1) Use a timeline instead of a tween so that you can embed the visibility/opacity/autoAlpha stuff:

gsap.set(".transformation-wrapper", {autoAlpha: 0}); // hide initially

let tl = gsap.timeline({
  scrollTrigger: {
    trigger: ".transformation-wrapper",
    start: "top top",
    end: "bottom 20%",
    markers: true,
    scrub: 1,
    pin: true
  }
});
tl.to(".transformation-wrapper", {autoAlpha: 1, duration: 0.1}) // show
  .to(".transformation-layer:not(:last-child)", {
      yPercent: -90,
      opacity: 0,
      ease: Power3.easeOut,
      stagger: 0.5
  })
  .to(".transformation-wrapper", {autoAlpha: 0, duration: 0.1}); // hide

 

-OR-

2) Use an onToggle callback:

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,
        onToggle: self => gsap.set(self.trigger, {autoAlpha: self.isActive ? 1 : 0}), // <--
        scrub: 1,
        pin: true
      },
    });

Is that what you're looking for? 

[LReds29]

Hello GreenSock, thanks for the reply... but this is almost what I want.

Transformation-wrapper doesn't need to hide or appear, is just the wrapper of the layers that I want to show up one by one...

 

I tried something like:

const tl = gsap.timeline({
      scrollTrigger: {
        trigger: ".transformation-wrapper",
        start: "top top",
        end: "bottom 20%",
        markers: true,
        scrub: 1,
        pin: true
      },
    })

tl.fromTo(".transformation-layer:first-child", 
      {
        autoAlpha: 1, duration: 0.3
      },{
        autoAlpha: 0, duration: 0.1
      }
    ) // show
    .fromTo(".transformation-layer:nth-child(2)",
      {autoAlpha: 1, duration: 0.3
      },{
        autoAlpha: 0, duration: 0.1
      }
    )
	.fromTo(".transformation-layer:nth-child(3)",
      ...
    )...

So every layer behind/below the previous will show up, just like a carousel effect does... but the thing is... it appears overlaping the image and the text, due that is no background on each layer...

 

 

 

[GreenSock]

It would really, really, really help if you posted a reduced test case. It's just very difficult to troubleshoot blind. When we can see things in context, we can give you much better answers. 

 

You said that you wanted things to fade in, but your code shows it fading out (autoAlpha from 1 to 0). 

 

You should be able to just do a simple stagger in both cases. 

 

I'm also unclear about if you want each layer to be linked differently to the scrollbar (its own ScrollTrigger). So again, a reduced test case will significantly improve your chances of getting a good answer

[GreenSock]

I'm not sure if this is at all what you're looking for, but it's one idea:

 

gsap.set(".transformation-layer", {autoAlpha: 0});
let tl = gsap.timeline({
	scrollTrigger: {
		trigger: ".transformation-wrapper",
		start: "top top",
		end: "bottom top",
		markers: true,
		scrub: 1,
		pin: true
	}
});

gsap.utils.toArray(".transformation-layer").forEach((layer, i) => {
	tl.add("layer" + i)
	  .to(layer, {autoAlpha: 1, duration: 0.2}, "layer" + i)
	  .to(layer, {yPercent: -90, duration: 1}, "layer" + i)
	  .to(layer, {autoAlpha: 0, duration: 0.2});
});

 

[LReds29]

That's it... thank you very much. I only need to refine the first layer but that's on me.