20bs

Ok, I suppose the answer is you don't, you use scroll trigger, but don't nest anything, like this: https://codepen.io/20bs/pen/oNMzgdP Ok, so, I don't have to nest them, no problem. There's no nesting requirement here, really. I was running with the thought that controlling the whole animation would be better/easier if they were all in one nested timeline. In my thought patterns for this, I could add them all into one timeline, then use something like nextLabel() and it would advance to the next label across all of the animations. gsap.globalTimeline doesn't seem to have the label or progress info for all items. Do I have to calculate which pinned area is in the viewport, then target the associated timeline that I have with that pinned section?

Thanks Jack. I guess I'll pour through the docs again and see if I can figure out what the solution is. I feel like I've tried to explain the issue here many times and I guess I'm not doing a good job. The root of the issue I'm having is that the scroll triggers are controlling the pinning, like this: Timeline one: - black section pins - red square fades in - red square rotates - black section unpins *page scrolls* to next section Timeline two: - red section pins - yellow box fades in - yellow box rotates - red section unpins etc. If I remove the scroll triggers from the nested areas - the pinning is gone. The demo needs 3 sections to each pin respectively when they hit the top of the screen. The animations inside the section need to run in coordination with the scroll, only after their respective section pins, but if I add one scroll trigger to the timeline, there's only one pin. How do I program the pinning to happen in between the animations, if I can't use scroll trigger?

Thanks for taking the time with this, Jack. I logically understand the issues with why this would be problematic. The effect I'm after is actually completely working in the original demo I posted, with the nested scroll triggers: https://codepen.io/20bs/pen/ZEjYVaN The first section (black) is pinned, then the square fades in and rotates (animated with scroll). Then as you scroll, the first section unpins and then scrolls to the next section. Same type of interaction for the other two sections, pin, animate then unpin. Basically the animations in each section are not starting until you get to that section and it's pinned. I'm searching for the correct and way to make this happen. In my more complex animation, each section has much more going on - animated SVG's, fading text, all manners of stuff - they are not the same as in my demo. To get multiple sections to pin at the right timing in the nested animations, how would I accomplish that? Multiple ScrollTriggers on the main animation? Pinning somehow connected to the animations? If I have a scroll trigger on the main animation, how to I pin the sections and trigger the animations at the right time? I nested the scroll triggers, because they controlled each colored section separately. In my more advanced animation, I may have different settings for them. I'm also nesting these because on the site I'm building, each of the sections might be loaded in different places around the site. So for instance, I might have section 1 on one page, then another page I might use section 1, 2 and 3 all together in a row. I'm trying to hash out a way to compartmentalize these, so that the animations are separate and I only am loading the sections and code I need for each one. In my larger, more complex animation, each of these sections I'm creating with it's own js, php and css files and loading them in dynamically depending on need. Then I just create the timeline and add only the sections I need on each page. Thanks again for your help and guidance.

Hi Jack, I believe this is the root of my issue, thanks again for your help on this. Your demo does now show the correct times and labels when clicking Advance - but as you can see the section pinning and animations don't work now. I guess I'm discovering that to have three separate pinned sections that are controlled by scroll trigger, like in my original demo, they cannot be nested. Even though the nested scroll triggers in my original demo work exactly like I want - I can't control them like I need to after they are placed inside another timeline. I'll have to head back to the drawing board and work out the best way to accomplish what I'm trying to build. Thanks for all your help!

Jack and Rodrigo, Thanks so much you guys for working through this with me. I've updated this pen to remove some of the unnecessary cruft and outline my overall problems. Hopefully this will make more sense. In a nutshell, my animations are added like this: 3 timelines added to > main timeline added to > uber timeline. https://codepen.io/20bs/pen/XWBJvRL?editors=0011 Jack, I think your helper functions set me on the right track, but it the flattenLabels doesn't appear to work like I thought that it would. It will only work for one level, which I'm getting around right now by just running every time I add timelines at each level (main and uber), but I might be able to alter this so that it recursively adds every child in the whole nest and I can just run after the last addition (uber). The main issues I'm struggling with and don't understand are: - in my demo above, I'm using console.log to spit out the labels when you click Advance. The labels are added correctly to the uber timeline (yes!), but they are each showing as the 'start' label of each respective timeline at 0, 'center' at .5 and 'finish' at 1. I was expecting that 'timeline-two-start' time would be after 'timeline-one-finish'. Perhaps this is a function of the convertTime part of the flattenLabels not calculating correctly? - probably related is this: I'm also using console.log to show the time(), totalProgress() and totalDuration() for the uber_tl timeline - but they all show as 0. I would expect the total duration to be 3 - since that's the amount time they are showing as taking in the labels. - likewise, progress always show 0, no matter where you are in the animation. What am I missing here? Is the total duration not showing due to the scroll trigger not configured correctly? Do I have to refresh it after I add the items? Why is the time, total progress and duration all 0? Thank you!

Hi Rodrigo, Thanks again for taking the time to explain this. I realize I now have to look at the label properties of children and that they're not passed to the main timeline. The issues you pointed out are unfortunate artifacts of me copy/pasting from my more complex animation and I should have been more careful when creating my minimal version. The reason I'm returning the main timeline is that this whole shebang gets loaded into *another* timeline in my project. This also means that the method to simply look at the children of the main timeline isn't going to work exactly like this to get all the labels, as my project has multiple nests deep. I think I understand now this method and I'll attempt to create something that will be able to recursively search for children and combine them. Thank you!

Hi Rodrigo, Thanks so much for taking the time to reply. I think I made a mistake in adding some of my previous attempts at getting this to work in my demo and yes, I indeed did have a reference to a v2 call. To be clear, I'm loading v3 and want to use that going forward. I've made a new pen that is now just trying to console.log the labels in the main timeline using the labels property when the Advance button is clicked. I'm not seeing any labels getting output when I click the button. I saw somewhere that labels are not passed to the master timeline when they are nested like this, is that correct? How come I don't see the labels in the label property when attempting to output? https://codepen.io/20bs/pen/XWBJvRL

Hello! I'm hoping someone can help me demystify what is going on with my animations and help me understand how I can achieve my goal. I have a CodePen attached that outlines what I'm attempting to do. Basically, in my demo I have three full height sections. Each section has an associated timeline in the js, and then they are nested into a master timeline. When you scroll through the page, the section pins, then there is are a couple of short animations (rectangle alpha in and then spins around) and then the section unpins and you can scroll to the next section. The timelines each have labels in them in between the animations. I have a button on the page labeled "Advance". What I'm looking to do is advance to the next label when the button is clicked. And when we reach the end of the animation in one section, I need the Advance button to unpin and scroll to the next section (i.e. advance to next label in the global nested timeline). I have looked at some threads on this in the forums, such as: but this doesn't seem to work with gsap 3. I have some code in the codePen that shows what *doesn't* work: nextLabel() doesn't work, since they are nested. master_tl.duration() always shows 0 for the master timeline, (because it's nested?) gsap.globalTimeline.duration() is always increasing, doesn't appear related to the scroll position. Can someone point me in the right direction or explain a methodology to achieve this? How I can make a nextLabel() type function that will work with nested timelines? How can I make it work to advance to the next pinned section? Thank you!!