utilityLA

Thanks @mvaneijgen This is closer. I've been fiddling around with it a bit more today, and the only issue I'm having is that the ".block" elements overlap the following html section, in this case "#third-container". All the ".block" elements should be scrolled through before #third-container scrolls into the viewport. That's originally why I nested them inside "#outside-container" . #outer-container should be pinned and visible until all the ".block" elements have finished animating if that makes sense. So it seems like there should be some pin spacing incorporated. Any ideas?

Thank you! This is all great info! So if you reference my original CodePen, you'll see the 35% and 65% orange guidelines which is where I'm trying to fade the child elements in (at 65) and out (at 35). This is in relation to the parent 'inner-container', which still needs to be pinned when the top of the container meets the top of the viewport. So the parent 'inner-container' needs to be pinned, all the child animations cycle through, and then 'inner-container' gets unpinned. I'm just not able to get the fade-in/fade-in to fire at the correct points. Does that make sense?

Hello. I'm brand new to GSAP, so I'm pretty sure I'm missing something conceptually. Please reference my CodePen Demo. I have a div (#inner-container) with a scroll trigger that animates a negative 'translateY' value when its parent container (#outer-container) is pinned to the top of the viewport. Within in this div are 6 child elements (.block). Each of these '.block' elements has a an opacity value of .2. What I would like to happen is, as the 'inner-container' animates, I would like each child '.block' to animate to an opacity of 1 when it is 65% from the top of the viewport and animate back to .2 when it is 35% from the top of the viewport. Each '.block' has its own scroll trigger with a 'start' property of 'top 65%'. This is not working correctly though, I suspect, because the parent 'inner-container' also has a scroll trigger and the '.block' start property is relative to the viewport and not its 'inner-container' parent. So this is where I've been stuck the past few hours, and I'm hoping for some insight about whether I'm totally off with my approach. Thank you!