Add scroll behavior to mouse-move controlled layout

[Yunus Emre]

Trying to implement scroll behavior to '.world' element. Any help appreciated

See the Pen poYZEJQ by ynsmrsk (@ynsmrsk) on CodePen

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

[GreenSock]

@Yunus Emre I don't understand your question or your goal, sorry. Please be more specific about what GSAP-related question you're asking. 

[Rodrigo]

Hi,

 

Are you trying to implement something like this?

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

 

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

 

Hopefully this helps.

Happy Tweening!

[Yunus Emre]

18 hours ago, GreenSock said:

@Yunus Emre I don't understand your question or your goal, sorry. Please be more specific about what GSAP-related question you're asking. 

Currently, the scrollable area is controlled solely by mouse position. I also want to enable smooth scrolling through the mouse wheel or touchpad. Is there a GSAP util I can use it for this?

[Yunus Emre]

17 hours ago, Rodrigo said:

Hi,

 

Are you trying to implement something like this?

 

It was one of my goals to apply this parallax effect on the images, thank you for this @Rodrigo
I am trying to mimic the behavior on wanda website. It's complex but GSAP is enough for parallax effect and the mouse controller functionality. The only thing I need to implement is a custom smooth mouse-wheel/trackpad scroll functionality with parallax effect. Does GSAP have a helper for this behavior?

[Rodrigo]

Hi,

 

I'm afraid no, but you can definitely get that effect by using either a combination of ScrollTrigger and the Observer Plugin or just Observer, or ScrollTrigger with a single mouse event handler that.

 

If you inspect the side is just an <ul> with an <li> for each item so using a single mouse event handler would be my first attempt to this, then just maybe create a random X and Y value for how much each element moves based on it's initial position. I think a mix of both demos I linked in my previous post could be a good starting point.

 

Good luck with your project! 👍

Happy Tweening!

[Yunus Emre]

Thanks for the idea @Rodrigo
I created updateParallax function and ran it inside the "onScroll" and "update" function. But sliding images with this parallax effect causing the bottom of the scroll area being empty. You can see if you scroll all the way to the bottom. How can I fix it?

[Rodrigo]

Hi,

 

I don't have time to go through all your setup so I made this simple demo:

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

 

Are you trying to achieve something like that?

 

Hopefully this helps.

Happy Tweening!

[Yunus Emre]

1 hour ago, Rodrigo said:

Are you trying to achieve something like that?

This is a much simpler solution than mine, thanks for it. different from move-zone/dead-zone approach. but only the small top and bottom portion of the area should trigger the movement. You don't have to look all the setup actually. The problem is caused by the "updateParallax" function that uses globally defined viewport, world and pointer objects. I just don't know what else could be done instead to workaround this.

[Rodrigo]

14 hours ago, Yunus Emre said:

This is a much simpler solution than mine, thanks for it. different from move-zone/dead-zone approach. but only the small top and bottom portion of the area should trigger the movement. You don't have to look all the setup actually. The problem is caused by the "updateParallax" function that uses globally defined viewport, world and pointer objects. I just don't know what else could be done instead to workaround this.

Yeah honestly I don't follow all the logic you have there because is also connected to the world.x/world.y values and those are set in a different place in your code. I believe that this is a far simpler and cleaner approach:

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

 

I've been fiddling with this for a bit and I'm afraid that this is not the simplest thing to achieve and is mostly a custom JS logic issue rather than a GSAP related one. Unfortunately this is beyond the scope of the help we can provide in these free forums. You can contact us for paid consulting or post in the Jobs & Freelance forum in order to get help there.

 

Good luck with your project!

Happy Tweening!