Dennyno Posted June 16, 2023 Share Posted June 16, 2023 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 Link to comment Share on other sites More sharing options...
Dennyno Posted June 16, 2023 Author Share Posted June 16, 2023 Starter point See the Pen poQyvPp by DedaloD (@DedaloD) on CodePen As it seems also the next has gone from the above one Link to comment Share on other sites More sharing options...
Rodrigo Posted June 16, 2023 Share Posted June 16, 2023 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! 1 Link to comment Share on other sites More sharing options...
Dennyno Posted June 16, 2023 Author Share Posted June 16, 2023 Hi Yep I partially solved, right while I was posting here. But.. the text inside the pinned animation has gone away... Link to comment Share on other sites More sharing options...
Dennyno Posted June 16, 2023 Author Share Posted June 16, 2023 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 🫶💚 Link to comment Share on other sites More sharing options...
GreenSock Posted June 16, 2023 Share Posted June 16, 2023 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. 1 Link to comment Share on other sites More sharing options...
Dennyno Posted June 19, 2023 Author Share Posted June 19, 2023 Thanks Link to comment Share on other sites More sharing options...
Recommended Posts
Create an account or sign in to comment
You need to be a member in order to leave a comment
Create an account
Sign up for a new account in our community. It's easy!
Register a new accountSign in
Already have an account? Sign in here.
Sign In Now