Scroll a container/element both horizontally and vertically on mousemove

[Policsek]

 

Hi. I have a container with it's width seted to 130vw and height to 150vh. All I want is to scroll inside the container using mousemove event. So, if I move the mouse on the top right corner of the visible window, I should reach the top right corner of the container. I guess I need the following values, but I'm not sure how to do the calcs.

 

The best example is  https://www.davidwilliambaum.com/

 

Thank you so much!

 

.container {
    width: 130vw;
    height: 150vh;
}

class El {
    constructor(element) {
        this.element = document.querySelector(element)
    }
    scrollElement() {
        let self = this

        window.addEventListener('mousemove', (e) => {
            let eX = self.element.offsetWidth
            let eY = self.element.offsetHeight
            let pX = e.pageX
            let pY = e.pageY
            gsap.to(self.element, .5 {
                    x: someCalc...
                    y: someCalc...
            })
        }) 
    }
}

const el = new El('.container')
el.scrollElement()

 

See the Pen oNZLjgL by bogdan-florin (@bogdan-florin) on CodePen

[akapowl]

Hey @Policsek

 

It's very hard to help based on a code-snippet alone - that's why it's always best to include a minimal demo that shows your issues and lets us tinker with to help you best.

 

This thread here contains an example of what you explained you are trying to do - with horizontal movement only though - maybe it helps you nonetheless.

 

 

If it doesn't help, a minimal demo of your efforts so far would be very appreciated to help you any further with this. 

 

[Policsek]

1 hour ago, akapowl said:

Hey @Policsek

 

It's very hard to help based on a code-snippet alone - that's why it's always best to include a minimal demo that shows your issues and lets us tinker with to help you best.

 

This thread here contains an example of what you explained you are trying to do - with horizontal movement only though - maybe it helps you nonetheless.

 

 

If it doesn't help, a minimal demo of your efforts so far would be very appreciated to help you any further with this. 

 

Sorry, I added the demo with the latest updates  

[akapowl]

 

I'm a bit short on time myself right now, so I'm afraid I can not have a deeper look on your approach - maybe someone else can chime in later.

 

But as I was interested myself, I tried adding some y-movement to @GreenSock's approach from the thread I linked to above and it seems to work quite well. You could adjust the width and height of the .holder in CSS to whatever you like here. Maybe that is something you could consider using yourself ?

 

See the Pen 955ef31ca995bdb05195ed5c1dba2602 by akapowl (@akapowl) on CodePen

 

[Policsek]

5 minutes ago, akapowl said:

 

I'm a bit short on time myself right now, so I'm afraid I can not have a deeper look on your approach - maybe someone else can chime in later.

 

But as I was interested myself, I tried adding some y-movement to @GreenSock's approach from the thread I linked to above and it seems to work quite well. You could adjust the width and height of the .holder in CSS to whatever you like here. Maybe that is something you could consider using yourself ?

 

 

 

 

This helps a lot, thank you for your time! I will have a deepr look on your approach too!

[Appmkl]

On 5/15/2021 at 9:38 AM, Policsek said:

 

Hi. I have a container with it's width seted to 130vw and height to 150vh. All I want is to scroll inside the container using mousemove event. So, if I move the mouse on the top right corner of the visible window, I should reach the top right corner of the container. I guess I need the following values, but I'm not sure how to do the calcs.

 

The best example is  https://www.davidwilliambaum.com/

 

Thank you so much!

 

 

Hey there !

 

I'm actually looking to solve something similar, looking at David Baum or this https://torquetorque.net

 

Basically I have a 'canvas' that is wider than viewport (300vw and 300vh) and would like to use mouse movement to navigate across.

 

I've tried running this code in jsbin but can't seem to replicate it.

 

Any ideas why ? A bit of a newbie here so let me know if I missed anything. 

 

Thanks !

[GreenSock]

Welcome to the forums, @Appmkl. 

 

If you need further help, please post a minimal demo (ideally in CodePen - I think you'll like it more than jsbin although that's fine too) and we'd be happy to take a peek. My guess is you didn't load the JS files properly in jsbin or something, but it's tough to troubleshoot blind

[akapowl]

 

Hey @Policsek - just wanted to add up on my initial response.

 

The problem in your original codepen seems to be the calculation of your tx/tY, so I just threw in a gsap.utils.mapRange() in there which takes a lot of troubles off your head when it comes to the right calculation, similar to the other demo using it, and it seems to work decently.

 

See the Pen 3f6e5d953f3b369d0260591c5209759b by akapowl (@akapowl) on CodePen

 

 

However it only does work decently if your document is at 0,0 position when it loads.

 

On initial load it will work - but if for instance you'd move your mouse to the bottom right corner of the window and reload the page, things will have shifted and everything would be off now when you move the mouse - you should not see this happening with the example I prepared from @GreenSock's demo though, just related to how it is setup in the first place.

 

Also you don't have to get all those values like the window's width etc. on every mousemove event - as the other example shows it's enough to get them on load and resize.

 

So the other example I posted might be a good point to start this from, I guess.

 

[Appmkl]

14 hours ago, GreenSock said:

Welcome to the forums, @Appmkl. 

 

If you need further help, please post a minimal demo (ideally in CodePen - I think you'll like it more than jsbin although that's fine too) and we'd be happy to take a peek. My guess is you didn't load the JS files properly in jsbin or something, but it's tough to troubleshoot blind

Hey,

 

Codepen is better indeed. Turns out I didn't load the Greenock script properly ... When I say I'm a newbie !

Problem solved & will follow the thread to see how things update on here.

 

Thanks !