Trying to find out to do an awesome animation

[Keyur kadam]

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!

animation sample video link

 

 

 

 

 

 

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

[Rodrigo]

Hi @Keyur kadam and welcome to the GreenSock forums!

 

Yeah there is a difference between the video you posted and the example codepen. In the video every image comes from a different position as the text in the center fades out, while in the codepen example basically the entire container is being scaled down.

 

I forked and made some changes in the codepen so you can see a different approach. Have a look at it as well as the documentation in order to see how is working, but is pretty straight forward:

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

 

Happy Tweening!

[Keyur kadam]

Hello @rodrigo,

Is there a way to slow down the animation? The animation continues smoothly and slowly, even if user scroll down quickly. Is there a way to do this? I would appreciate any help you can provide.  

[Rodrigo]

Hi,

 

You can either increase the end point to keep the gallery container pinned longer, but regardless of that if a user scrolls super fast there is no way to prevent that from happening with native scroll. I recommend you to watch this video about using ScrollTrigger:

 Happy Tweening!

[Keyur kadam]

Thanks