Trying to understand an awesome image scroll gallery

[Kitson Chan]

Hi guys. I have found this very amazing image gallery and I come up with the idea to create a scroll gallery myself too. However, I seems dont quite understand what it is doing and how does the whole thing work out. Any help would be great. Thanks!

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

[Cassie]

Hey Kitson,

 

I've removed scrollTrigger so you can see how the animation is set up without being linked to the scroll.

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

 

// create a timeline
gsap.timeline()
// set all image blocks apart from the center to visibility hidden and opacity 0
  .set(".gridBlock:not(.centerBlock)", { autoAlpha: 0 })
// animate the image blocks apart from the center to visibility visible and opacity 1
  .to(".gridBlock:not(.centerBlock)", { duration: 0.1, autoAlpha: 1 }, 0.001)
// scale up the container to it's full size from a third of it's size
  .from(".gridLayer", {
    scale: 3.3333,
    ease: "none",
  });

Then that animation is tied to scroll using our ScrollTrigger plugin.

Does this help - Is there a specific part that you have questions about?
 

[Kitson Chan]

so it is just basically scaling the image down the scale? How about the pin and then unpin of the center image? Thanks!

[nico fonseca]

@Kitson Chan Yes, the animation only scale the images. There is a small trick on the CSS to position the images and achieve this effect, and then with GSAP add the pin and the images scale animation.
The pin is on the .grid element. If you want to see when the pin start/end, check the markers by adding markers: true on ScrollTrigger.