ScrollTrigger - Boxed slider reveal effect

[BSA]

Hello,

I wondering how to create the same effect as the codepen.

But, boxed in a centered div with specific height and width.

 

A ScrollTrigger inside another one to do the reveal effect!?

 

Thanks

 

 

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

[Cassie]

Hi there @BSA,

 

Welcome to the GSAP forums! You could approach this in a simpler way than this pen - seeing as it's just a little box reveal.

I'd probably just link a timeline with snapping up to the scroll like so...

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

 

[BSA]

Hey @Cassie

 

Thanks for your quick answer ^^ I was not ready
Your approach is near the perfection !

 

But i still have some misunderstanding :s

When i'll tried to put some content above it's ok but under the "panels" the end is not reached..
I make two main content with a "immediate snap" (that work fine) but inside the seconde one with the "panels" i'll try to do a another "immediate snap on each scroll" with the panels then the rest of the content.

 

Here is the little buggy demo pen : 

See the Pen abLNzaN by Brunoooo (@Brunoooo) on CodePen

[Cassie]

Heya! 

 

So the 'end' position for the layered boxes was set to 'max' which is the very end of the body. So that section was never unpinning, and you wouldn't see the following section.

Here - if I set it to a px value you can see the footer

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

Also - I'm wondering why you're using scrollTo and a snap scrollTrigger for the sections? You should only need one of those approaches I think, they're achieving the same goal I think - unless I'm missing something.

[BSA]

Heyy, thanks @Cassie

I use the first scrollTo and a snap scrollTrigger for the purpuse of the project ^^ (a bit weird, i know..)

 

So now everyting is almost ok.. 

The last thing is to snap each panels like the two "main". (prevent the default scroll) just go up if scroll up and down if scroll down.

Sorry for my misunderstanding.. It's my first time with scrollTrigger.

[Cassie]

Oh ok - that's actually not scrolling you're looking for. 

You'll need to listen for touch or mouse wheel events and then advance to a certain section.

This demo should help point you in the right direction.

See the Pen MzWzyv by PointC (@PointC) on CodePen

[BSA]

Hello @Cassie,

Thanks for your sharing

 

But it's not what i'm lookin for.. I've updated the codePen ^^

There is only one thing left, make the same "snap" like the blue section to the panels section.
For now, i prevent large scroll with a end at 5000%. But sometimes he pass two panels and is not immediate snap.  I just want to navigate between the slides. (Don't know if i'm clear)

 

Can u help me for the end of my quest

 

See the Pen abLNzaN by Brunoooo (@Brunoooo) on CodePen