How can I implement a smooth auto-scroll and a 3D image popping effect on a website?

[gunhee]

I’m curious about the scrolling effect on this website: https://monopo.london/ Can you explain how this scrolling effect is achieved?

How can I achieve a smooth scrolling effect that automatically moves with the mouse wheel, along with a 3D effect where images pop out when scrolling on a webpage

When I did some research, it seemed like “curtains.js” was being used, but I couldn’t find information on achieving the effect of automatic scroll adjustment and dynamic 3D changes based on the scroll position. Additionally, I also looked for scroll effects utilizing “PixiJS”, but couldn’t find any relevant information. Can someone point me to a direction?

I found a similar example on CodePen, but it doesn't have the popping-out effect. and
I found a similar effect on the GSAP showcase when scrolling! However, I'm not sure how they achieved this effect

See the Pen advydB by aderaaij (@aderaaij) on CodePen

[Rodrigo]

Hi @gunhee and welcome to the GSAP Forums!

 

There is a difference between the page you linked and the codepen demo. The codepen is using an actual 3D animation while it seems that the page is using just a scale on the container.

 

Here is a simple demo I whipped to emulate the URL you posted:

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

 

Hopefully this helps.

Happy Tweening!