Overall progress for multiple scrubbing and pinned ScrollTrigger

[tpinne]

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

[OSUblake]

Welcome to forums @tpinne

 

You can use onUpdate in each of your ScrollTriggers to set the progress. Can you put that in a minimal demo?

 

 

 

[tpinne]

Ok, I tried to simplify it as much as I can. I hope this gets the idea.

See the Pen YzQjmJg by tpinne (@tpinne) on CodePen

 

The "normal page progress" is simply attached to the document I guess?! (It is based on this demo)

See the Pen abdwYaJ by Mamboleoo (@Mamboleoo) on CodePen

 

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.

[Cassie]

Hello tpinne,

I've put together a pen with some comments here.

See the Pen WNOgbqo?editors=0010 by GreenSock (@GreenSock) on CodePen

If you want a progress bar that maps to the entire page scroll you'll need to make sure the start and end triggers span the whole page.

It's important to also add ease: 'none' to the animation otherwise the progress will be eased and the first part will 'fill up' faster than the end part.

If you want the chapters to fill up as those sections are animating you'll need the relevant progress tween to match up to the chapter animation's start and end triggers.

You could do this by including the progress tween in the same timeline as that section and making sure it spans the entire duration of that animation.

Or by adding the progress tween as a standalone animation with matching trigger start and end points.

It would be tidier to loop around all the sections (which I did initially) but then realised your sections all have different start and end points so it won't be that simple!

 

additional note - 

ScrollTrigger locks in values from initial render (for performance), so you may have noticed your progress bar would go from 0 to 25, then 0 - 50, then 0 -75 and so on.

I've got around this by adding immediateRender:false to the tweens and timelines affecting the progress bar, this will allow the progress bar to animate to the new position from the previous position it's been animated to, rather than from the start.

I've done the first three in different ways - Why don't you try to add the final section animation in?

[tpinne]

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.

[Cassie]

You don't need to use maths!

If you want section 1 to include the static section that's fine.

You can define an endTrigger like so - Just tell scrollTrigger where the start and end points are.

 

See the Pen QWgVbxa?editors=0010 by GreenSock (@GreenSock) on CodePen

[Cassie]

I've provided a few different examples of routes you can take in this pen - so take a look and pick the option that works best for you, whether that's standalone, or included in your timelines.

[tpinne]

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.

[Cassie]

Great - so taking into account what I've explained so far, you can adjust the start trigger position for the chapter 3 tween.

Why don't you give it a go? Feel free to post an updated demo if you try something and it doesn't work.

[tpinne]

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.

 

See the Pen dyRqwEQ by tpinne (@tpinne) on CodePen

[GreenSock]

@tpinne I read your latest post a few times and it isn't clear to me exactly what you're trying to do. Sorry if I'm missing something obvious. Would you mind rephrasing it as if you're talking to a 3rd grader and provide the simplest possible demo that only shows the issue you're struggling with? For example, "when 'chapter 3' text fades in, I want to _____"

 

I'm guessing you don't really need 139 lines of code to show the challenge. The more you can isolate it, the better your chances of getting a good answer.

[akapowl]

Hey @tpinne

 

That can be a bit tricky, as you are pinning that #section-3, thus you won't be able to easily use it as a trigger as it will not be scrolling anymore.

 

What you could do instead, is either use the #wrapper you have there as the trigger and calculate the start, taking the offsetTop of the pinSpacer around your #section-3 and all the pins before your #section-3 into account plus the way through to the chapter-3 animation on top of that ...

 

trigger: "#wrapper",
start: 'top top-=' + (document.querySelector('#scene-3').parentElement.offsetTop + 1000 + 1000 +  1000/5*3 ),   

 

...or you could use the pin-spacer of that section itself as the trigger and calculate the start just based on the beginning of the animation of chapter 3.

 

trigger: document.querySelector('#scene-3').parentElement,
start: 'top top-=' + 1000/5*3, 

 

 

Since all your tweens for that pinning ScrollTrigger of that section do have an equal duration of 1, in any case the beginning of the animation will be the total scroll-duration of the pin (1000) devided by the total amount of all your tweens (5) multiplied by the amount of tweens before your chapter-3 tween (3), so

 

1000 / 5 * 3

 

Edit:

I didn't check your calculation of the positionInScene3 before, but that would work too, with the pinSpacer as the trigger and a start: 'top top-=' + t3.labels.chapter3 / t3.duration()) * 1000

 

 

I also set the endTrigger and end to when that static-content of section 3 finishes in the example below - just in case that''s something you'd need too. Hope that helps  Happy Scrolling.

 

See the Pen e135a62376e052aa849b64fea28ce099 by akapowl (@akapowl) on CodePen

 

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

 

See the Pen zYzmaNR by tpinne (@tpinne) on CodePen