Scrolltrigger with PIN only once

[vanchris]

Okay, so here is what im trying to achieve:

 

- I scroll to#av_section_1

- Scrolling Locks

- a little fade in/out animation on my h1 

- a function newText changes the value of my h1

- Scrolling is free again

- When i scroll up, nothing should happen. Scrolling should be free, no animation. Basically it should only fire once.

 

Now my problem:

When i use once = true, it works, but the pin-spacer is visible.

When i try  onLeaveBack: self => self.disable() the animation does not play, which is good, but the screen locks.

 

Any ideas? I guess my best shot would be to use once and get rid of the pin-spacer?

 

See the Pen GRjqoqX by mangotasche (@mangotasche) on CodePen

[ZachSaucier]

Hey vanchris and welcome to the GreenSock forums.

 

Would you mind putting together a minimal demo real quick? You've already done most of the work of stripping out a lot of the unrelated JS.

[vanchris]

Okay there you go

 

So basicily the pin-spacer is my problem...

[ZachSaucier]

Is this what you're going for?

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

 

You should use the onComplete of the actual animation if you want it to happen immediately once the animation is done.

 

Some notes:

• Your code formatting is not great. I recommend using more standard formatting.
• GSAP's default duration is 0.5 so you can leave out declaring that.
• It's better for performance to set the innerText instead of innerHTML. Also no need to use jQuery to do that.
• If you have a tween with a zero duration just use a .set().

[vanchris]

Thank you for your help, that was it! Works perfect.