[ScrollTrigger get Scrub value]

Oh I figured it out. Idk how did I miss the .progress in the docs 

this is what I was looking for

ScrollTrigger.create({
  trigger: ".trigger",
  start: "top bottom",
  end: "bottom top",
  onUpdate: self => console.log("progress:", self.progress)
});

 

[ScrollTrigger get Scrub value]

I am building a website using React and I need to trigger an animation in a component that will affect the state of another component. I want to set scrub: true,

start: "top bottom",

end: "bottom top",

The problem is I want to get the value of how far into the animation am I in.

I want to log a value from 0% at the start to 100% at the end and transfer this value to another component. How do I get this value?

[ScrollTrigger FadeIn/Out component not working properly]

I am trying to create a component that I wrap my other components with to fade in when I scroll to them and fade out when I scroll passed them. I think the problem arises when I put 2 animations on the same component. I just don't know how to fix it. 

I think the problem is that I am using from() and to() and they take the CURRENT value of the div which might be opacity: 0 and thus it remains invisible or sometimes it becomes opacity:0.2. What would be a better approach to this?

See the Pen ZEozRNZ by gxnxrxlmasri (@gxnxrxlmasri) on CodePen