child elements with scroll triggers nested in a parent element with a scroll trigger

[utilityLA]

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!

See the Pen KKJpOKW by utilityLA (@utilityLA) on CodePen

[mvaneijgen]

Hi @utilityLA welcome to the forum!

 

I've changed the order of your ScrollTriggers and this fixed the issue. This because your pin ScrollTrigger is adding space to the page, your want to calculate that later, you could also set `refreshPriority`, see the docs https://gsap.com/docs/v3/Plugins/ScrollTrigger/, or change the order in which you make them.

 

Quote

number - it's VERY unlikely that you'd need to define a refreshPriority as long as you create your ScrollTriggers in the order they'd happen on the page (top-to-bottom or left-to-right)...which we strongly recommend doing. Otherwise, use refreshPriority to influence the order in which ScrollTriggers get refreshed to ensure that the pinning distance gets added to the start/end values of subsequent ScrollTriggers further down the page (that's why order matters). See the sort() method for details. A ScrollTrigger with refreshPriority: 1 will get refreshed earlier than one with refreshPriority: 0 (the default). You're welcome to use negative numbers too, and you can assign the same number to multiple ScrollTriggers.

 

I've also changed your .fromTo() to a .from(), I've found you hardly need .fromTo() tweens if you set up your CSS correctly. In this case you want to animate to `opacity:1`, which is the browsers default, so if you do nothing in CSS and just set .from() `opacity: 0.2` everything will be handled for you.

 

Also I've changed your `translateY: "-65%"` to `yPercent: -65` this will do the same, but in a more convenient way and GSAP will know it is a percentage based value, so it doesn't need to do extra calculations. if you want to target translateY normal, you can use just `y: VALUE` (of `x: VALEU`). Hope it helps and happy tweening! 

 

See the Pen eYxpYmJ?editors=0010 by mvaneijgen (@mvaneijgen) on CodePen

[utilityLA]

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?

[mvaneijgen]

I didn't save my original pen, that one is now updated. 

 

I see wat you mean now. I have it working for 50%, but I don't have time anymore to debug it further. I'll will probably think of a solution a little bit later when I have time again, but I wanted to share my work until now, maybe you will figure it out in the mean time, or if someone else wants to take a look.

 

 

See the Pen poGjoBR?editors=0010 by mvaneijgen (@mvaneijgen) on CodePen

[mvaneijgen]

10 minutes later... 

 

I think the issue was that you wanted to pin the same element where to blocks where in. I've created a new element for the .blocks and moved the #outer-container away. 

 

I've changed a lot of things around and placed comments in the code to better explain things. Hope it helps and happy tweening! 

 

 

See the Pen XWOmJXE?editors=1000 by mvaneijgen (@mvaneijgen) on CodePen

[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?

[mvaneijgen]

What have you tried already? We love to see minimal demo's, that way we can see your thought process and thus better help you understand the tools!

 

Right now it scrolls directly in when the last one is comes in to the viewport, that is because in your CSS they are also right after each other. If you want more space between them you have to add more space between them. I've now just hard coded a spacer div between the elements and the last one, but you could also calculate that with JS and make it specific to your needs or screen sizes, for that last one check gsap.matchMedia() https://gsap.com/docs/v3/GSAP/gsap.matchMedia()#refreshing-all-matches

 

Hope it helps and happy tweening! 

See the Pen KKJzYGg?editors=1010 by mvaneijgen (@mvaneijgen) on CodePen