Jump to content
GreenSock

Search In
  • More options...
Find results that contain...
Find results in...
shutterlab

Simulate camera movement

Recommended Posts

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

 

 

 

Link to comment
Share on other sites

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. 😉

  • Like 3
  • Thanks 1
Link to comment
Share on other sites

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

Link to comment
Share on other sites

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.

 

 

  • Like 1
Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
  • Recently Browsing   0 members

    No registered users viewing this page.

×