looped absolute sections demo - with timeline each section

[emjay]

For the following Pen I modified the ScrollTrigger Demo "Looped Absolute Sections".
The new parts are in the function "getSectionTimeline(section)".

I want a separate timeline for each section that either starts automatically or is played via scrub.
In my pen you can see that I'm trying to achieve this with data attributes. That works but not completely.

I can scrub the first section timeline, but the other timeline animations are not visible.
Somehow I think it has to do with the different start and end values, you can see that well in the markers.

However, I have no idea how I should approach the whole thing differently.
Does anyone have a useful tip for me?

See the Pen wvRjyge by emjay (@emjay) on CodePen

[Rodrigo]

Hi,

 

This is a bit complex and mostly implies the starting and end points of each ScrollTrigger instance for each section, plus the start and end points of the instance that you want to scrub. That needs some extra space before the next section switch happens.

 

Here is my initial approach to this:

See the Pen QWzrRxm by GreenSock (@GreenSock) on CodePen

 

Hopefully this helps.

Happy Tweening!

[emjay]

Hi @Rodrigo,

Thank you for your pen, I need to look at this in detail and follow it step by step.

One question, to the official original demo here: 

See the Pen rNOebyo by GreenSock (@GreenSock) on CodePen

I went through line by line to understand everything. Correct me if I'm wrong, but aren't the start and end values wrong?
They're are calculated this way:
 

start: () => (i - 0.5) * innerHeight,
end: () => (i + 0.5) * innerHeight,

Because they are determined by the value of i and the innerHeight of the window, the calculations for i = 0 are:

start: (0 - 0.5) * innerHeight = -0.5 * innerHeight
end: (0 + 0.5) * innerHeight = 0.5 * innerHeight

If innerHeight is 300 for example, the start and end values for each indexes / panels are the following:

index 0 -> innerHeight: 300 -> start: -150 -> end: 150
index 1 -> innerHeight: 300 -> start: 150 -> end: 450
index 2 -> innerHeight: 300 -> start: 450 -> end: 750
index 3 -> innerHeight: 300 -> start: 750 -> end: 1050
index 4 -> innerHeight: 300 -> start: 1050 -> end: 1350

This would mean that the first panel is shown shorter than the others. Right?

I think this would help to fix the start and ending values:

start: () => i * 0.5 * innerHeight,
end: () => (i + 1) * 0.5 * innerHeight,

That would result in the following values:

index 0 -> innerHeight: 300 -> start: 0 -> end: 150
index 1 -> innerHeight: 300 -> start: 150 -> end: 300
index 2 -> innerHeight: 300 -> start: 300 -> end: 450
index 3 -> innerHeight: 300 -> start: 450 -> end: 600
index 4 -> innerHeight: 300 -> start: 600 -> end: 750

The second problem I think is the height of the body, which is stretched on the basis of the number of sections. The height is currently calculated like this:

gsap.set("body", {height: (sections.length * 100) + "%"});

Because we use the half of innerHeight for the start and end values, i think we should also use the half for the body height, like this:

gsap.set("body", {height: (sections.length * 0.5 * 100) + "%"});

I forked the original pen by @GreenSock and added my fixes: 

See the Pen KKbexap?editors=0010 by emjay (@emjay) on CodePen

What do you think?

Thanks, emjay