ScrollTrigger Pause Timeline on "onEnterBack"

[Joshua Harmon]

Hi,

 

I'm trying to permanently pause a timeline on "onEnterBack" in ScrollTrigger but I can't seem to get it work.

 

I tried Timeline.kill() but it left a "pin-spacer" div with a huge height.

 

What am I doing wrong here?

 

CodePen

See the Pen vYeWWBQ by joshuah46 (@joshuah46) on CodePen

[Cassie]

Hi there @Joshua Harmon

It may be that you're just killing the timeline and not the scrollTrigger - If you use a more current version of GSAP tl.kill() will also kill the associated scrollTrigger.

You have a lot of absolutely positioned elements though so if you kill the scrollTrigger you're also going to lose the ability to 'scroll' through the content.

You might have to kill the scrollTrigger and then set some styles so your page is actually navigable.

Updated GSAP version - killing the timeline and scrollTrigger

See the Pen wvrpoxR?editors=0010 by GreenSock (@GreenSock) on CodePen

 

This may also be of help.

Good luck!

[Joshua Harmon]

43 minutes ago, Cassie said:

Hi there @Joshua Harmon

It may be that you're just killing the timeline and not the scrollTrigger - If you use a more current version of GSAP tl.kill() will also kill the associated scrollTrigger.

You have a lot of absolutely positioned elements though so if you kill the scrollTrigger you're also going to lose the ability to 'scroll' through the content.

You might have to kill the scrollTrigger and then set some styles so your page is actually navigable.

Updated GSAP version - killing the timeline and scrollTrigger

 

 

 

 

This may also be of help.

Good luck!

Actually that's where I got stuck I can no longer scroll to section 2.

[Cassie]

Yeah - that's more of a styling issue. GSAP is scrolling through a timeline, the page itself isn't actually 'scrolling'.

When you kill the timeline, you'll need to write some code to position each section relatively and make sure they're visible. Right now without scrollTrigger enabled you can't see the other sections.

Demo without any JS at all - no ability to scroll through.

See the Pen VwMyPxg?editors=0010 by GreenSock (@GreenSock) on CodePen