how to change depth size

[noob1337]

Hey, GSAP!

Please give an example like this. I would like to create a similar technique, but I don’t understand how to implement it.
When scrolling, our container is fixed until the visibility depth of all images that were hidden changes.
That is, we must move away when scrolling in depth...
I tried to draw what I mean.

Happy new year! 🎁

[GSAP Helper]

We love helping with GSAP-related questions, but unfortunately we just don't have the resources to provide free general consulting, logic troubleshooting, or "how do I recreate this cool effect I saw on another site?" tutorials. Of course anyone else is welcome to post an answer - we just want to manage expectations.  

 

If you're looking for ScrollTrigger effects, I'd recommend looking at the demos at https://codepen.io/collection/DkvGzg and https://codepen.io/collection/AEbkkJ - you may be able to use one of those as a jumping-off point. 

 

You are welcome to post in the "Jobs & Freelance" forum for paid consulting, or contact us directly. 

 

Otherwise, if you've got a GSAP-specific question just post that here along with a minimal demo and we'd be happy to take a look. 

 

Finally at the top of my head I can't remember a demo/page that does what you're trying to achieve, sorry.

[noob1337]

10 hours ago, GSAP Helper said:

We love helping with GSAP-related questions, but unfortunately we just don't have the resources to provide free general consulting, logic troubleshooting, or "how do I recreate this cool effect I saw on another site?" tutorials. Of course anyone else is welcome to post an answer - we just want to manage expectations.  

 

If you're looking for ScrollTrigger effects, I'd recommend looking at the demos at https://codepen.io/collection/DkvGzg and https://codepen.io/collection/AEbkkJ - you may be able to use one of those as a jumping-off point. 

 

You are welcome to post in the "Jobs & Freelance" forum for paid consulting, or contact us directly. 

 

Otherwise, if you've got a GSAP-specific question just post that here along with a minimal demo and we'd be happy to take a look. 

 

Finally at the top of my head I can't remember a demo/page that does what you're trying to achieve, sorry.

Hey!
I completely agree with you, I tried to find something similar on the forum but had no luck. I just can't even understand the algorithm of how this can be done. I can fix the container, but how can I move back? I will be glad to even explain how this can be done.

[GreenSock]

It looks to me like maybe you just need to animate the scaleX/scaleY of the image or the container. You could pin it, of course. So a tween of scaleX/scaleY with a scrollTrigger that has scrub: true and pin: true. 

 

I hope that gets you going in the right direction. If you still need help, please give it a try and then provide a minimal demo that clearly shows the issue and your attempt. No need to include your actual project - just simple colored <div> elements should be fine to illustrate the problem. Here's a starter CodePen that you can fork: 

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