Pairing Scroll Trigger and Timeline Labels

[Simeon]

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

[ZachSaucier]

Hey Simeon and welcome to the GreenSock forums!

 

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.

[Simeon]

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.

[_Greg _]

@Simeon Check this example (Jack answer me how to trigger between two labels), maybe its help you.

 

[ZachSaucier]

21 hours ago, Simeon said:

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

I recommend doing it this way but you're welcome to use the approach that Jack gave in the linked thread above.

 

4 hours ago, Simeon said:

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.

What makes it not seem right?

[Simeon]

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.

[ZachSaucier]

If you approach it more from the sections rather than the animations I think it looks differently: If you enter a section, do X animation.  But you're free to do either approach.