ScrollTrigger: Whitespace left after using the "once" parameter on scrollTrigger

[smackifilia]

Does anyone have an issue with the whitespace being added after using the "once" parameter.

 

I've got this tied to a lottie animation.  I don't have a pen, but I can provide the code if necessary.  Is that white space the expected behavior?  If so, whats the workaround?

 

Thanks

 

See the Pen KKzwrmy by smackifilia (@smackifilia) on CodePen

Edited August 7, 2020 by smackifilia
Added codepen example

[ZachSaucier]

Hey smackifilia and welcome to the GreenSock forums. Please create a minimal demo as I have no idea what you mean by space "added after using the 'once' parameter". 

 

Most likely your problem is unrelated to your Lottie animation so you could try leaving that out - just focus on the core issue, the minimal amount to recreate it:

 

[smackifilia]

Thanks for the reply Zach.

 

Here is a pen that shows what I'm seeing:  It is my understanding that the pin-spacer should "go away" when using the "once" attribute and transform the DOM to appear as if its not there.  I've certainly seen that behaving as expected on other examples.

 

[ZachSaucier]

10 minutes ago, smackifilia said:

I've certainly seen that behaving as expected on other examples.

Do you remember which demos you're thinking of? I can't seem to remember a demo that has both pinning and once: true. 

[smackifilia]

16 minutes ago, ZachSaucier said:

Do you remember which demos you're thinking of? I can't seem to remember a demo that has both pinning and once: true. 

Solid point, I haven't thought about the once: true.  Maybe I haven't?  Is this the intended behavior if once is set to true?  If so, I'll just have to figure out how to code around it.  In my opinion that is not the behavior I would expect, but maybe there's a good reason I'm not thinking of.

[smackifilia]

I think there's got to be a combo of self.disable and/or tl.disable that would get what I want.  In my real world example, the text moves on top of the animation as it finishes and locks into place.  That all works perfectly.  What I want is the final frame of the lottie animation to be locked at that point, the space above it gone, and the text to be locked on top of that final frame of the animation.  onLeave => self.disable works great for locking the animation in the final frame and removing the whitespace above, but my elements from the .from() part of the timeline are sitting down below the other elements on the page.  They never get put back in their original place after being moved by the pin spacer.

 

I feel like the answer is right in front of me, but I'm missing it.

 

Thanks again.

[ZachSaucier]

1 hour ago, smackifilia said:

Is this the intended behavior if once is set to true?

I don't know if we consciously thought about it, but I think it makes the most sense for this to be the default behavior. Otherwise there will be a jump of content. @GreenSock might share his thoughts.

 

1 hour ago, smackifilia said:

If so, I'll just have to figure out how to code around it.

You can remove the pin-spacer in the onLeave:

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

 

What do you want to be the case when the animation is completed? The animation to be in its completed state? Where do you want the text that is translated to be placed in reference to the animation/pinned element?