Combine pinning and zoom through div to reveal another div

[jasonhiggins]

I'm trying to replicate the very first effect on this website -  https://the-goonies.webflow.io/ - where you zoom into one div to reveal another.  I know it is some combination of pinning, but I can't figure it out.  I'm just trying to figure out the first part where you zoom through the opening in the leaves to reveal the ocean. 

 

I think this thread is pretty close, but I can't figure out how to modify it.  Any help?

 

[mvaneijgen]

What have you already tried? Can you share a Codepen.io with your tests? 

 

If you want to create this effect you will need to have separate images one background and one with transparency that overlap each other, from that point it is a simple scale with GSAP, I would add two separate zoom values, to create a more parallax effect.

 

I've loaded the two images from the site in a codepen to see what I could do. Which looks like the following: 

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

[jasonhiggins]

OK.  Thank you! I'm very close.  I found the problem, I was also trying to snap to sections.  And that was causing problems.  I split it out into to divs now - so that the bottom sections will snap and the top one won't snap.  But now part of the top section still shows up.

 

See the Pen PoZmOEV by jasonhiggins (@jasonhiggins) on CodePen

[ZachSaucier]

6 minutes ago, jasonhiggins said:

now part of the top section still shows up.

That's just because you have a scrolling section within the main document's scrolling. So if someone scrolls within that section while the top part is showing then of course the top part will continue showing. I think you'd be better off trying to use ScrollTrigger's snapping and only one scroller.

[jasonhiggins]

The snapping seems to be breaking everything else though - that's why I split it out.   See here with one scroller?  It breaks the zoom effect and I can't even scroll at all.

 

See the Pen PoZmOEV by jasonhiggins (@jasonhiggins) on CodePen

[ZachSaucier]

If you remove the CSS scroll snapping and add the following to the end it seems to work fine for me (though I'm not fully sure where you want the snapping to happen):

ScrollTrigger.create({
  snap: 0.333
})

 

[jasonhiggins]

Got it!  Thanks!  I'll see if I can translate this into the project that I'm working on.  I want the snap to happen on sections.  So I assume if I have 10 sections, I would change that number to 0.1, correct?  Or is there a way to snap to a css class?

[ZachSaucier]

It depends on the height of the sections. See the docs for more info (in the table of properties by the snap property).