Slide In post detail and pin on top on scroll

[Jean Polkin]

Hello everyone,
I'm new to GSAP and I'm trying to make a quite simple animation. I have a portfolio section. In this section I have two divs. The first displays the post-thumbnails and the other div displays the details of the post that was selected. the animation that I would like to create is when we click on a thumbnail, the post detail div slides in the viewport and the first div is resized. And when we scroll, the post-container div pin to top until the section end.

I have many problem as you can see on the code pen.  I don't know if i got the good approach to achieve this.

 

It would be very appreciated to have a little help from you

 

thanks

See the Pen rNPYPwd by JPolkin (@JPolkin) on CodePen

[mvaneijgen]

I had to restructure some of your code in all aspects  HTML, CSS and JS. It is never wise to animate your trigger elements, so I've wrapped it in an element called .trigger and that is what is used. I've placed some comments through out the code, be sure to read through them. 

 

Hope it helps and happy tweening! 

 

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

[Jean Polkin]

16 hours ago, mvaneijgen said:

I had to restructure some of your code in all aspects  HTML, CSS and JS. It is never wise to animate your trigger elements, so I've wrapped it in an element called .trigger and that is what is used. I've placed some comments through out the code, be sure to read through them. 

 

Hope it helps and happy tweening! 

 

 

 

Big thanks,
You are awesome!