Setting pin to true breaks my layout and does not pin the animation

[whereisNate]

I am trying to set up a scrollTo animation that will reveal a sequence of images.  Once I set pin to true, it seems to push the images right out of the section they are in, it also does not pin anything like I expect it to do.  

See the Pen yLZoMOg by natewscott-the-animator (@natewscott-the-animator) on CodePen

[mvaneijgen]

Hi @whereisNate

 

Something in your CSS was not playing nice with GSAP, I couldn't figure out what, so I hade just removed the CSS and rebuild the layout. I'd also updated your GSAP plugins to the latest versions and set the ScrollTrigger to be the section where everything resides in. 

 

Also, you almost never need a .fromTo() animation, GSAP is smart and it will just tween to the browsers defaults. so .from() opacity: 0 will tween to 1 if you don't set anything in your CSS. 

 

Hope it helps and happy tweening! 

 

See the Pen gOqGKpp by mvaneijgen (@mvaneijgen) on CodePen

[whereisNate]

Hey thanks, I wonder what in the CSS was causing the problem? It does seem to be what I need at the moment, I will update everything to the current GSAP. 

 

I am wondering if it that I did not have it set to the parent container that was causing it to wig out.