Degendev

Hi Rodrigo, Thanks for the explanation! I did use querySelectorAll but it didn't change anything, but I guess I just didn't read the documentation good enough about the difference between autoAlpha and Opacity. Thanks again! ?

Hi, I've been trying to get something to work and after browsing the forums and google, reading a lot of topic and trying a lot of things. I am currently at a roadblock where I have no clue how to continue. Explanation I have a wrapper and 3 sections, what I envision is that my wrapper is pinned and my first section is always visible on load (this works). Upon scrolling down I want to fade out my first section and fade in the second section with a scrub (this also work). Now where I am stuck is, is that I want to have specific elements within the section to fadeIn and stagger and/or add a class when said section is currently active. I already tried using 'toggleClass()' but this seems to work globally and not per section that fades in. Here's a codepen of what I currently have. Any help is appreciated!

Hi @GreenSock First of all, thanks for your reply! I think my initial description wasn't clear enough, what I'm trying to achieve is the following. I want my main wrapper to be pinned, so as the user scrolls down and reached the main wrapper pin it. After that I currently have 2 sections in my example, both sections contain a headline. Once the user hits the first section (100% of screenheight) and the user starts scrolling down, the headline within that section should fade in and out relative to it's scrolled position in said section. e.g: first 25% scroll is fading in, 50% is full opacity, last 25% scrolll is fading out the heading. Then the user will hit the second section and the same behavior applies, this should give the user the impression they're scrollin in the page while the headings are fading in and out. and once they scrolled past the last section the pinned container should be unpinned and normal scroll behavior applies. The difficulties i'm having now is that the headings aren't fading in properly relative to the scrolled position of it's section, I want the headings to be position fixed (centered in the section container) but this negates what i'm trying to achieve for some reason... on top of that the main wrapper wouldn't pin I hope this makes more sense, if not (which I can understand) here's a example video of what i'm trying to achieve; https://streamable.com/lx8995 Imagine the common, uncommon, and rare as sections as where the headings are fading in-out based on scroll position.

Hi! I'm quite new to GSAP and have been busy all day trying to get something work. I use the <main> element as my wrapper for all of my sections, what I would like to have is that every heading (in this case) will fade in when the right section is in view (based on scroll position). The <main> in this case is pinned, but it's bugging out. it doesn't seem to be pinned as my header does, it's partly pushed down and the headings are not fading in and out. I've seen multiple demos and tried working it out but I can;t get it to work, any help is appreciated!