Run Timeline on Pinned element using ScrollMagic without the element being 100vh

[Robhern135]

Hi there,

 

Is it possible to pin a div that isn't fixed to 100vh, stop the page scrolling but scroll through the TimelineMax, and then begin scrolling of the page again after the TL has finished?

 

Not only pausing the page scrolling (as there's content underneath the animating elements that I want to continue to, not scroll on top of), but how so I also avoid the scene hijacking my styling (ie margin, position, padding etc), in the codepen attached you can see that the element moves to the left of the screen then pops back when it's unpinned.

 

Thanks in advance!

See the Pen PoqxoBx by Robhern135 (@Robhern135) on CodePen

[ZachSaucier]

Hey Rob. You actually don't need ScrollMagic for this. Someone very recently asked about the same technique:

 

Related but not quite the same effect:

 

[Robhern135]

Hi Zach,

 

Thanks for the speedy response! So the position:sticky concept replaces the need for Pinning?

 

With that in mind would it still be possible to control the GSAP animation timeline within the element via scroll?

 

Thanks,

[ZachSaucier]

4 minutes ago, Robhern135 said:

So the position:sticky concept replaces the need for Pinning?

Yes.

 

4 minutes ago, Robhern135 said:

would it still be possible to control the GSAP animation timeline within the element via scroll?

I see you've updated your demo a bit  

 

But yes, you can do that by using the intersection observer API (one of our moderators Ryan made a great post on that) or just using the scroll position like the demo below: 

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

[Robhern135]

I was updating to make clearer that the body is moving below the element itself. How would I control the rest of the page scrolling with position:sticky?

 

Apologies I'm struggling to understand the example you gave.

 

I'm also getting an error that requestId is not defined when I try to implement myself.

 

Thanks! 

[ZachSaucier]

17 minutes ago, Robhern135 said:

How would I control the rest of the page scrolling with position:sticky?

I don't understand this question. You don't need to control the rest of the page scrolling?

 

Mixing the two pens together:

See the Pen jOPQPqa?editors=0100 by GreenSock (@GreenSock) on CodePen

 

18 minutes ago, Robhern135 said:

I'm struggling to understand the example you gave

Let us know what specific questions you have