Problem when moving to next label in timeline

[pwlls]

Hello Everyone,

 

I am using "nextLabel" for scroll bottom button to go to desired label when clicked, and it is working fine but only when I start from label 1.

The problem I am facing is when in timeline I am at label 2 ( Heading 2), and  I click on button it starts from label One. 

Can anyone help me how to fix this like it should start from current label and then move to next label. It should work like navigation dots as when clicked the desired label content comes into view.

 

Thanks

See the Pen podYjMV by pw_gz (@pw_gz) on CodePen

[Cassie]

Hi there @pwlls, 

 

Welcome to the forums. Would it be possible to cut this demo down to the bare minimum necessary to show what you're struggling with. Just some headings fading in and out and the buttons. There's quite a lot going on here at the moment and it's difficult to go through and figure out.

 

Thanks so much, we really appreciate it!

[pwlls]

Hello @Cassie, Thank you very much for the reply.

 

I have removed some unnecessary  code from the codepen demo.  Let me explain what I am struggling with:-

This is my timeline with Scroll trigger attached and I have created Gsap effects for fading and fade out effect.

var block_3_intro = gsap.timeline({   
    defaults: { duration: 1.5 }
})
.fromTo(".panel__3-heading_1", { y:-50,autoAlpha:0},{ y:0, autoAlpha:1, duration:1})
.to(".panel__3-heading_1",{autoAlpha:0, duration:.5},">+0.4")
.content_reveal_bottom(".panel__3__s-block-1")
.addLabel("move0")
.show__from_content(".panel__3--dots","<")
.addLabel("move1")
.content_slide__up(".panel__3__s-block-1", "jump1")
.content_reveal_bottom(".panel__3__s-block-2")
.content_slide__up(".panel__3__s-block-2", "jump2")
.content_reveal_bottom(".panel__3__s-block-3")
.content_slide__up(".panel__3__s-block-3", "jump3")

const block_3_trigger = ScrollTrigger.create({
    animation: block_3_intro,
    trigger: ".panle__3--a",
    start:"top top",
    scrub:2,
    pin:true,
    end:"+=650%",       
})

$('.blade_3_btn').click(function(e){    
     block_3_intro.tweenTo(block_3_intro.nextLabel());  
     console.log(block_3_intro.nextLabel())
})

The Thing I am struggling with is I have a scroll bottom button  which is fixed at bottom and when clicked, the timeline should move to next step. Let me explain in detail:-

 

Suppose, while scrolling I am at heading 2 and clicked scroll bottom button, then the timeline should slide to next step and for this, I have added labels in timeline and targeted using Gsap nextLabal() but there is some problem with this approach, as when clicked, the timeline always starts from first label. 

 

Hope I am able to clear my problem.

 

 

 

 

 

 

 

 

 

[Cassie]

Ah ok, I understand!

This may be the key...

https://greensock.com/docs/v3/Plugins/ScrollTrigger/labelToScroll()

 

The issue is that you're skipping to a label but not to a scroll position, so when you initiate scrolling it skips back to wherever you were initially.

[Cassie]

In your 'dots' you're using the scrollTo plugin which is animating to a certain scroll position, so that's working a ok. 

https://greensock.com/docs/v3/Plugins/ScrollToPlugin