[Pairing Scroll Trigger and Timeline Labels]

7 minutes ago, ZachSaucier said:

What makes it not seem right?

I figured the spirit of creating a timeline is to control one group of animated elements through different positions -- with labels for each stage.

 

If we instead make a different timeline for each stage, it seems in a way to defeat the purpose of a timeline, even if you get the right end result.

[Pairing Scroll Trigger and Timeline Labels]

16 hours ago, ZachSaucier said:

Can you please provide a minimal demo of the situation with irrelevant parts stripped? It's hard for me to visualize what your end goal is and it'd be very helpful in providing help for you.

 

 

Sure. I should've done this yesterday. Edited the OP to include a CodePen mockup.

 

It's very possible I'm trying to do something the wrong way here. But if you see the labels I've setup, and the content sections. Ideally I think I'd want each `data-section-*` to scroll-scrub the timeline between the corresponding labels. So like as the 'content section 2' section scrolls into view, it should be scrubbing between label 1 and label 2.

 

Instead the timeline is just stretched over the entire scroll distance between the start and end trigger. There's currently no way to define triggers in between.

 

I did mockup a local demo for my project where I just set a new timeline for each `content` section, with its own dedicated `trigger`. It works but it doesn't seem right.

[Pairing Scroll Trigger and Timeline Labels]

Is it possible to bind the scrubbing between timeline labels, and the presence of elements on the page?

 

If I have a long timeline animation, with labels for every new content section. But the content is independant of the timeline, how do you pair the two?

 

So scrolling between content `#section1` and `#section2` should scrub between labels `section1` and `section2` on the timeline, then again for sections/labels 2-3, 3-4, etc.

 

The only way I can think to solve this currently is to have a separate timeline for each step, with its own trigger settings.

See the Pen pogEjjW?editors=1010 by simeonunder2 (@simeonunder2) on CodePen