DMT82

This is amazing, not overwhelming at all. Thank you so much for taking the time and showing me and solving this for me. And the one with Arrays was exactkly what I wanted. i have 1 h1, 1 h2, and 15 paragraphs in 6 different sections that need to fade in and out when am scrolling, will try that out and see how it will work.

Thank you so much for this answer. It worked and I now understand the basics of a timeline and how it works and what scrub do. I have two following questions. 1. In your example, the h2 starts to fade in (start trigger) and then fade out. (end trigger) It is never full visible 100% for like 200px. Is there a way to make more start/end to one element? So start -> fade in until it hits the end, then after end, it is full visible for couple of pixels until it hits a new start when it starts to fade out until it hits a new end? 2. What if there are multiple h2s, paragraphs in different positions and i wanted to put them all inside one timeline. I have tried to make it happen, and this is what I created. So multiple texts that need to fade in and out in same timeline so i dont have to put in so much code in the js, but this way i cant fade out the second one and have no power to add start/end to it. An updated Pen. https://codepen.io/DMT82/pen/WNwMbeB

Hi, I'm trying to create a text fade in from opacity 0 to 1, then be there while still scrolling and then fade out from the page. I have tried gsap.fromTo with scrollTrigger, but it wont work. All i can do right now is that the text is visible and when you scroll, it fades out. But the goal is: scroll -> fade in -> full visible (still scrolling) -> fade out. Can it be done with gsap.fromTo and scrollTrigger? Do I need a timeline?

Thank you so much. So the problem here is between GSAP, ScrollTrigger & CSS Grid? Will check the code soon and see what you have done. Thank you once again.

Hi, Im trying to pin the header until it comes to an end, and after the pinning comes to scroller-end, i want it to start to fade away with opacity: 0. But when I add pin: true or pin: "#header-text", the whole header changes positin from center of the site to top left. Why do it change position and how can I start another animation/fade when the pinning comes to an end? Thank you.