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

Questions
,
1

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?:pleading_face:

화면 기록 2024-01-26 오후 5.56.16
automatic scroll effects or 3D image popping effect

화면 기록 2024-01-26 오후 6.01.05
3D image popping effect

2

Hey @gunee.park :slight_smile:

There are a few ways to do this, I have had success in the past with gsap.

I found an example which is hopefully still relevant today.

Theoretically you initialize gsap and your threejs scene. Then, when your trigger container is reached in the code, you run the .to function to move your threejs object with the following code:

timeline.to(yourImage.position, { x: -0.1, scrollTrigger: {
			trigger: ".your-section-to-trigger-animation",
			start: "top bottom",
			end: "top top",
    }})

edit: you probably don’t even need Three.js to emulate that other website. Some clever css with the help of gsap could be more effective.

3

Thank you for your kind and prompt response👍. I will give it a try. By any chance, do you happen to know about the sticky auto-scrolling effect?

4

Not sure exactly what you mean by that.
Are you referring to when you try to scroll it “resists” a bit and auto finishes if it goes over the threshold?

gsap has a snap property which achieves that I think.

can’t find a proper example using the snap property but it’s in the scrollTrigger docs.

1 Like