Pinned section bug

[Dennyno]

Hi guys,

which could be the solution to allow me viewing previous and next sections before and after the animated one?
I got a pinned element, but need to pin it  only when required (more as sticky, intead of fixed).

EXAMPLE: A, B and C should not overlap the animated grid...

Thanks

See the Pen rNQeVVg by DedaloD (@DedaloD) on CodePen

[Dennyno]

Starter point 

See the Pen poQyvPp by DedaloD (@DedaloD) on CodePen

As it seems also the next has gone from the above one

[Rodrigo]

Hi,

 

I read your post a few times and I'm quite lost actually. The codepen example in your first post does that exactly, isn't it? You have section A, then the animated section that gets pinned, then section B and finally section C. So how it should work? Is the idea to wait for the animation to be completed before section B comes in? If that's the case just add a dummy instance at the end of your timeline:

tl.to(".wrapper-grid-anim", { opacity: 0.2, duration: 10, delay: 2 }, "<-10");

tl.to({},{}, "+=1")

Here is a fork of your codepen:

See the Pen RwqaWMv by GreenSock (@GreenSock) on CodePen

 

Hopefully this helps.

Happy Tweening!

[Dennyno]

Hi Yep I partially solved, right while I was posting here.

But.. the text inside the pinned animation has gone away...

[Dennyno]

Also my section height is 650vh (tested also more), but

1) the text is not even appearing
2) the phone svg is being cut but I guess it's already pinned too inside the parent section.

Basically seems that flex-start breaks the whole code, while basically need to put that phone + images grid left aligned at then end of it's animations 

Btw, thanks for any help 🫶💚

[GreenSock]

Yes, that's because you're pinning that inner element as soon as the parent hits the top - so it's pinned when that text is still way out of view below since that parent is so tall. And you've got the end set to "max", so it's never unpinned...thus you'd never be able to see it. 

[Dennyno]

Thanks