I want to animate the contents of the pinned panel

[Mohit Pain]

Hello Everyone,

iam new to gsap and still learning day by day.. but in this i got stuck and not able to find any answers.

 

what im trying to do is that i have crated a pinned Panels where panels of same class will overlap one by one, im trying to animate the full animation first rquired of that pinned element and after all the animation of that pinned element get completed then only it should start overlapping

 

 

Please watch this youtube video To know what i want ; its only 10sec long video

 

See the Pen pompNyw?editors=1010 by Mohit-Mishra-the-styleful (@Mohit-Mishra-the-styleful) on CodePen

[GreenSock]

Seems like basically the same question that you already posted, right?: 

 

See the Pen ZENvKMj?editors=1010 by GreenSock (@GreenSock) on CodePen

[Mohit Pain]

52 minutes ago, GreenSock said:

Seems like basically the same question that you already posted, right?: 

 

 

 

Yes sir, but no one has replied to me. I have to complete this task for my company, and I'm stuck. Please, sir, if you can help me, then please help me. If you don't understand my code in CodePen, then please make one for me. What I want is this: In my first section, I have some elements with animations applied to them. After the animation of the first section is completed by ScrollTrigger, the second section should start coming up from the bottom and get pinned at the top. However, make sure that when section 2 is coming from the bottom to the top, section 1 remains pinned until section 2 reaches the top and gets pinned. 

 

and if you want visual then i have pasted the youtube link at the top you can see there. Sir please dont ignore my request.. just create a simple demo same as it is after that i will write full code by myself.

 

make sure that it is same as it is shown in the video.

Edited June 16 by Mohit Pain

[GreenSock]

3 minutes ago, Mohit Pain said:

Yes sir, but no one has replied to me. I have to complete this task for my company, and I'm stuck. Please, sir, if you can help me, then please help me. If you don't understand my code in CodePen, then please make one for me. What I want is this: In my first section, I have some elements with animations applied to them. After the animation of the first section is completed by ScrollTrigger, the second section should start coming up from the bottom and get pinned at the top. However, make sure that when section 2 is coming from the bottom to the top, section 1 remains pinned until section 2 reaches the top and gets pinned. 

 

Yes, that's exactly what I already did. Am I missing something? 

[Mohit Pain]

Just now, GreenSock said:

Yes, that's exactly what I already did. Am I missing something? 

Yes sir, after the complete animation of the first section, the second section should start overlapping the first section. However, in your solution, the second section is not overlapping; it is pushing the first section to the top. What I want is that after the complete animation of the first section, it should remain pinned at the top. From the bottom, section 2 should overlap the first section, with the contents of the first section getting hidden behind section 2. Later, when section 2 reaches the top and completely hides section 1, section 2 should get pinned..

 

as you can see in the video that after the complete animation of the first section mobile images are still there at there place. but we can see that section2 is overlapping section1 without pushing the section1 out of the viewport

[GreenSock]

You mean like this?: 

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

[Mohit Pain]

5 minutes ago, GreenSock said:

You mean like this?: 

 

Yes sir, perfect! Thank you so much, sir... no one was able to help me but you did it sir!!! thankyou

 

[GreenSock]

You're welcome. Good luck!

[Mohit Pain]

Sir i want your last help in this too, I want to add ScrollTrigger to the other pinned panel too, the same as in the first panel. When my second panel is pinned, I want to apply animation to the contents of the second panel. I'm not able to animate the 'colored box' of panel 2. How can I add a ScrollTrigger to panel 2 so that I can animate its "blue box"  or the other elements which are present inside the panel2?

 

See the Pen WNBdEGq?editors=1100 by Mohit-Mishra-the-styleful (@Mohit-Mishra-the-styleful) on CodePen

[GreenSock]

It's the same concept as the first panel, right? 

 

See the Pen JjqMZOw?editors=1010 by GreenSock (@GreenSock) on CodePen

[Mohit Pain]

8 hours ago, GreenSock said:

It's the same concept as the first panel, right? 

 

 

it worked.. thankyou sir