Reveal Pinned Sections

[JPM82]

I'm trying to create a section reveal that has multiple sections within.  I would like to pin when it is centered, and loop through each section with an animated reveal (a simple opacity transition will do just fine), and then continue on with the rest of the page. 

Something similar to this 

See the Pen BaowPwo by GreenSock (@GreenSock) on CodePen

, but ideally I'm imagining each section be revealed from behind  - sort of replacing each existing section.  Also I'd like each section not be 100vh. 

I've tried using the above link as a starting place, but couldn't get what I'm envisioning to work.  I've included a very crude codepen to try to demonstrate what I'm thinking.  I hope I'm explaining this well enough.  How can I make this happen?

See the Pen eYbRrWZ by paul-molnar (@paul-molnar) on CodePen

[mvaneijgen]

Hi @JPM82 do you have the codepen version you've tried with the GSAP code? We love to see what you can come up with, that way we can see your thought process and thus better help you.

 

Keep in mind 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. 

 

[JPM82]

Hi @mvaneijgen - thanks for the response.  I've been looking through the demos and I think I've got it much closer to a place I'm happy with.  I've updated the code pen to show you.  The only bit I can't seem to figure out is the space that appears above the pinned sections and the "header" (the big solid green block).  If you view the pen on a full screen you can see what I'm referring to.  I've tried using the pinSpacing : false setting, but that doesn't fix the issue.  How can I get rid of the space that opens up between the header and pinned sections?  Is that a gsap thing or simply a css thing?

[mvaneijgen]

Hi @JPM82 nice job, it is looking good! 

 

If you want to pin something instead of true you could also set an element to pin. I've wrapped your elements in a div called .pinMe and set that as the pin, now everything inside .pinMe will get pinned and you will not see the space created by ScrollTrigger (which is needed for the effect to work).

 

Hope it helps and happy tweening! 

 

See the Pen OJrjVPK?editors=1000 by mvaneijgen (@mvaneijgen) on CodePen

[JPM82]

Thanks for this @mvaneijgen.    Now that I'm come this far I have one more question (sorry for keep moving the goal post!).  I've added new section with a background color just below the pinned sections.  I'd like to change the background color of that section to match each revealed section.  I've been playing around triggering functions on scroll, but I can only get it to fire when the at the trigger.  Is there a way to do the function each time a pinned section is revealed?  And if so, how can I get the background color attribute of that section?  
Thanks again!

[mvaneijgen]

There are call backs you can use. I've add them to the stagger (as an object) and now it will run the onStart code each time a stagger starts. I've given each action a data attribute data-color="colorOfSection" (I've just copied the same color over and over again, but you'll get the gist). Hope it helps and happy tweening! 

 

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