Add Extra blank scroll in 100Vh Section

[Sandeep Choudhary]

Hi Guys,

Hope you are doing good.
I am facing issue while using scroll trigger when section is 100Vh  or any height section as soon as timeline reach 100 percent or animation completed it start scrolling to next section so in my case if i have to show the slider when animation completed over the box element then its already scroll. If there is any way where can add 2-3 free scroll which will do nothing but stay the section there after timeline complete so any slider or other which will be shown on complete of animation is visible.

Any help or suggestion will be very helpful.

See the Pen YzmdNmG by SandeepChoudhary (@SandeepChoudhary) on CodePen.

[mvaneijgen]

Check out the Observer plugin https://gsap.com/docs/v3/Plugins/Observer/

See the Pen XWzRraJ by GreenSock (@GreenSock) on CodePen.

I've also wrote a guide how you can step through a timeline using the Observer plugin 

https://gsap.com/community/forums/topic/41263-use-any-timeline-as-a-step-through-on-scroll-using-the-observer-plugin/

 

[Sandeep Choudhary]

Hi @mvaneijgen
Thanks for the reply but i guess you have misunderstood the issue. I have resolved the same by adding the scroll trigger below so that can get 2-3 scroll  gap before move to next section. Just want to know is there any other way so that no need to declare scroll trigger below again and can be done over timeline scroll trigger ? 

 

let scrollTimeline = gsap.timeline({
    scrollTrigger: {
       trigger: ".section-2",
       scrub:true,
        start: "top top",
        end: "+=100%",
        //pin: true,
        ease: "none",
    }
})
.to('.box',{
  yPercent:0,
})

ScrollTrigger.create({

            trigger: ".section-2",

            start: "top top",

            end: "+=135%",

            pin: true,                        

        });

[mvaneijgen]

What you can do is add an empty tween to the end, but this will require some rethinking. There is no X amount of scroll in ScrollTrigger. 

Normally in GSAP things work with durations, but when working with ScrollTrigger these durations get converted to distance. It might be hard to wrap your head around, but maybe this example helps. 

 

Let's say we have four tweens that all take 1 second to animate and the total ScrollTrigger distance is 400px each tween will then take up 100px. If we remove one tween and make the last tween take 2 seconds the first two tweens will take still 100px, but the last tween will get stretched over the remaining 200px.

 

Hope this makes sense and happy tweening! 

 

See the Pen zYgywWP by mvaneijgen (@mvaneijgen) on CodePen.

 

[Sandeep Choudhary]

Hi @mvaneijgen
thanks a lot got your point.