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.
