Jump to content
GreenSock

Search In
  • More options...
Find results that contain...
Find results in...
Narendra Verma

How to animate div linearly using mouse wheel scroll?

Recommended Posts

Hello

I am able to scroll the div from right to left side but I have to display the div linearly when scrolling the mouse wheel.The current code is not displayed liner. I mean I have to display smoothly from right to left. TIll now I haven't used  GSAP. Would you help me out in this?

 

https://jsfiddle.net/Narendra2015/3s5su2q3/

Link to post
Share on other sites

Hi and welcome to the GreenSock forums,

 

I'm not exactly sure what you are trying to do or why you would use a tween. It seems the scroll works ok right now.

Have you tried to implement a tween for what you are trying to do?

Take a look at the Getting Started video. Moving something from left to right is very straightforward.

https://greensock.com/get-started-js

 

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

 

 

Link to post
Share on other sites

Thanks for the reply Carl,

What I did in your jsfiddle code, I commented the line TweenLite.to("#gentags",2, {scrollTo:{x:400}}) because I don't need to scroll the right to left on page load.

Now when I am scrolling the mouse wheel upside then animation is working from left to right. This is not a right. I need when mouse scroll wheel up then animates from right to left and mouse scroll wheel down then animate from left to right. I need a fast scroll.

something like https://www.tentwenty.me/about-us

 

Can you help me out in this?

Link to post
Share on other sites

Here's something I made for mouse wheel only scrolling. It's not designed to work with actual scrolling in the browser. Just to move stuff around with your mouse wheel.

 

See the Pen VrXOOM by osublake (@osublake) on CodePen

 

  • Like 2
  • Haha 1
Link to post
Share on other sites

Thanks for the reply OSUblake,

Your solution looks good.I need the horizontal scroll. Something like this.https://jsfiddle.net/Narendra2015/3s5su2q3/

 

I update my code in the jsfiddle but it's not smooth like your output.

 

Can you help me out in this?

Edited by hybreeder
Link to post
Share on other sites

Like I said, it just moves stuff around. Vertical, horizontal, virtual, it really doesn't matter, but it doesn't do actual browser based scrolling.

 

Just look at the first 46 lines of code, and adapt it to your needs. Change all the y related stuff to x related stuff, and you should be good to go. All the action takes place inside on the onFrame function, but don't go shoving a bunch of jQuery code inside it as that is high performance function that gets called 60fps. 

 

You don't need to touch anything inside the onWheel function, and the createShapes and random function aren't needed. Same with the getLineHeight function. Set the wheelMultiplier and ease values on the scroller object to whatever you want. The lower the values, the slower it will move stuff around.

 

If you need more help, just ask, but I think it should be pretty straightforward.

 

  • Like 2
Link to post
Share on other sites

Thanks for the reply OSUblake,

 

Trust me I am really confused. I commented getLineHeight(),  createShapes, random.

I also change the minY to minX and maxY to maxX and scroller.y  to scroller.x

I also change the wheelMultiplier: getLineHeight() to wheelMultiplier: 100.

but still not able to access. 

 

Can you assist me with my code?

Edited by hybreeder
Link to post
Share on other sites

Yeah, I'll just make a horizontal version of it later on. Are you trying to do it full page, like that tentwenty site?

  • Like 1
Link to post
Share on other sites

I tried to form my side https://jsfiddle.net/Narendra2015/3s5su2q3/6/

 

Now the issue is when I scroll little bit mouse wheel it's working smoothly but when I scroll fast mouse wheel it's also working the same. I mean check the scroll bar speed. Slow and fast both effect is showing same. I need if slow mouse wheel then smooth slowly article if fast mouse wheel then the smoothly fast article.

 

like this site https://www.tentwenty.me/about-us

 

Link to post
Share on other sites

We know what you're tying to do. You're not going to be able to do a smooth scroll exactly like that site is doing using tweens. It requires constant updating of it's velocity, just like in my demo.

 

I'm going to make another version, but I didn't have enough time yesterday, and I probably won't today because it's a holiday in the US, so check back later.

  • Like 2
Link to post
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.

×