Simulate camera movement

[shutterlab]

Hi All, 

I need your help to understand how I can build this kind of effect.

The idea is quite simple, on scroll the viewport move along a big comp (gallery)

but I don't know how to start :-/

Can you help me on this ?

Thanks a lot

 

 

 

[Shrug ¯\_(ツ)_/¯]

Welcome to the forum @shutterlab thanks for supporting GreenSock with your Club Membership. It does not appear as if that version of the site has launched yet, how do you know it's based upon scroll ? ?

 

https://www.the-cave.co.uk/

 

https://dribbble.com/shots/15219461-THE-CAVE

 

Regarding scrolling you could use overflow: hidden; on the body or a container. Then within either layout all your relative content. With GSAP’s scrollTo plugin you can then move around based upon an assigned class, id or provided x/y coordinates. GSAP's ScrollTrigger plugin can also be used with scrollTo. You could just use ScrollTrigger to move around also, using coordinates, the MotionPathPlugin, etc. You could also move around using Mouse / Touch movement, GSAP’s Draggable plugin, or even move around within an SVG viewbox. You would need to implement the desired parallax / easing logic regardless of which approach you decide upon. You have access to all these powerful plugins as part of your GreenSock Membership.

 

You may find interest with the example found in this thread concerning Draggable.

 

 

You can search the forum and find various concepts for all these things. Good luck on your project. ?

[shutterlab]

Hi Shrug, 

thanks for your help, this is a logic approach indeed.

Here's a link to a quick fiddle (sorry but didn't get the way to link scrollTo plugin)

https://jsfiddle.net/cjgyav39/

ScrollTo is working nicely, now I need to do the same with scroll based on Y mouse wheel

as i have comented my code

Can you give me a good approach to do that ?

Thanks again

and cheers from belgium

[Shrug ¯\_(ツ)_/¯]

You can link to the scrollTo plugin found on cdnjs for example. Most times it’s just simpler to create a CodePen instead as all the plugins are included to use and test over there. I would suggest using the ScrollTrigger plugin for any scrolling logic. You can find plenty of documentation, learning resources and countless examples here on the GreenSock site.