tpinne

Thx everybody for your help. And @akapowl for the icing on the cake to make the last bit work. Now I have all the tools and knowledge to put the real piece together. As I only can mark one post as the solution it will be the one from @akapowl. But every single post of you guys are part of the final solution. This is one of the best product forums to find already existing solutions to common problems and get lightning fast help for new ones. So again: THX A LOT! The durations in chapter 3 won't be of equal length in the real application. That's why I already tried in an earlier version of the pen to get the pixel offset by using the timestamp of a label (line 101). I put the animation of the chapter progress bar at the end for all of you to see the final solution and added a chapter 4 to round it all up. https://codepen.io/tpinne/pen/zYzmaNR

So, I tried various approaches I could think of with no result near the desired solution. I don't get how to correctly alter the start position for that trigger to start when the headline "Chapter #3" starts to fade in within the timeline. I tried calcuated relative values to the viewport, absolute calculated window scroll position. You see the different efforts starting at line 118. But that switch inside a pinned scrubbed timeline breaks me , because that element is already in the viewport together with elements from the previuos chapter, so I cannot reference it for appearing (with/-out offsets) inside the viewport. https://codepen.io/tpinne/pen/dyRqwEQ

Wow, that's very nice and almost there. The one point missing is that Chapter #3 in this example does not start when the red section appears, but within that animation marked in line 103 with .addLabel("newChapter"). Visually when the headline "Chapter #3" becomes visible. The other parts are now clear to me, because I know now how to mark the "easy" sections with a separate scrollTrigger and elements inside the DOM that define the start/end of a chapter.

Hey @Cassie, thx for your fast reply. I get where you're heading at. But what about those chapters which consist of pinned scroll triggers and static content like Chapter #1. It first has a section with an animation followed by static content (which might not fill the entire viewport or is even longer). After that static content starts chapter #2. so the progress of chapter #1 is defined by the length of the first animation/scrolltrigger + the scroll length of the static content. I guess I could apply a scroll trigger also to each static content to get a progress for that. But then the math starts to get tricky to incorporate the tween in those timelines, because each section of a chapter might have an equal length. The animation might take 70% of the chapter while the static content only takes 30%, for example.

Ok, I tried to simplify it as much as I can. I hope this gets the idea. https://codepen.io/tpinne/pen/YzQjmJg The "normal page progress" is simply attached to the document I guess?! (It is based on this demo) https://codepen.io/Mamboleoo/pen/abdwYaJ The actual indicator for the complate page/chapter progress will be different in its visuals, but the concept would be the same. My problem would be how to correctly calculate the progress value to set on the chapter timeline. Because the progress of each chapter maybe depending on the total "length" of pinned scrubbed scrolltriggers and static sections together and sometimes as demoed in the transition from chapter 2 to 3 within a Scrolltrigger which might be at 40% of its own timeline. Hope this helps to further understand my question.

Hi everyone, for my page I want a progress indicator showing the user how much he currently has seen/scrolled from the whole page. This progress indicator should be separated into chapters, highlighting the current chapter. The problem is that one chapter in particular starts within one of the pinned scrubbing Scrolltriggers. There I can't simply create a separate Scrolltrigger for the whole page which reacts on certain elements coming into view. I have no idea how to achieve this if it is even possible. I know how I could do it without showing the progress between chapters. Creating a separate timeline and seek the position to certain labels from specific points on my page or within those pinned scrubbing Scrolltriggers. But I really would like have this progress in between chapters. I have a page with something like the following setup: Pinned Scrubbing ScrollTrigger Static Section Pinned Scrubbing ScrollTrigger Pinned Scrubbing ScrollTrigger Static Section Pinned Scrubbing ScrollTrigger I hope my intention is clear. If not feel free to ask for further information. Best regards tpinne