Jump to content
GreenSock

Search In
  • More options...
Find results that contain...
Find results in...
Kitson Chan

Trying to understand an awesome image scroll gallery

Recommended Posts

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

Link to comment
Share on other sites

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?
 

  • Like 6
Link to comment
Share on other sites

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

Link to comment
Share on other sites

@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.

  • Like 4
Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
  • Recently Browsing   0 members

    • No registered users viewing this page.
×