Pin an element after pin

[Cofkeb]

Hello,

I want to pin panel2 after the animation has finished, because I would like to animate other elements inside the panel2 after it takes 100% of the screen but I don't know how or what to use to pin panel2 for little more while to finish all animations inside. Thank you in advance!

See the Pen qBQGmqp by Filip-Ivanovic-the-scripter (@Filip-Ivanovic-the-scripter) on CodePen

[mvaneijgen]

Hi @Cofkeb welcome to the forum!

 

Take a look at the following video, think this will clear up a lot of things 

 

 

I've removed some of your CSS and added some. Mainly come CSS Grid so that all the panels are overlapping in the element .panels. It is the easiest to let GSAP handle all the properties instead of setting them first in your CSS and then overwriting them in GSAP. For instance transform: scale(1) is the default, so instead of setting it to 0 and then doing .to(elm, {scale:1}) you can do .from(elm, {scale:0}), this way you don't have to set anything in your CSS, makes it a lot easier to manage.

 

I've added some extra tweens to your set up to show you how it will work. As you can see there is no ScrollTrigger! Why is that?  The best thing to do when working with ScrollTrigger is to remove it! This seems counter intuitive, but ScrollTrigger is just animating something on scroll, so just focus on the animation at first and only when you're happy with the animation add ScrollTrigger back in. This way you can focus on one part at a time and it will save a lot of headache when debugging. 

 

See the Pen wvQbeMW?editors=0010 by mvaneijgen (@mvaneijgen) on CodePen

 

So if you think the animation is correct you can enable ScrollTrigger again. The same as the video above I've increased the scroll distance with 2000px, but you can decrease or increase it if you like, just play with the values to see how it feels. I've also set a duration on all the tweens, the scale tween takes 1 second and the other tweens 0.5, this means the scale animation will take twice as long as the other animations.

 

In ScrollTrigger terms that means the total time is now 2 seconds (1 + 0.5 + 0.5) and the distance is 2000px, so tween 1 takes 1000px, 2 500px and the last one also 500px. This is not 100% true, but I hope the illustration is help full. Hope it helps and happy tweening! 

 

See the Pen OJaYgXN?editors=0010 by mvaneijgen (@mvaneijgen) on CodePen

[Cofkeb]

Thank you so much, the thing that was bothering me the most was that I thought I could pin panel2 again but the problem was with the trigger because the scale of the panel was changing and the trigger would "trigger early" or not where I wanted it to. The solution to my problem is just to extend the end of the trigger so that I have more time to animate elements inside and also what I have found helpful was that I added a bit of delay at the end of the text animation just so that the animation ends properly before continuing with the normal scrolling. Again thank you so much for the answer.