Jump to content
Search Community

How to animate div linearly using mouse wheel scroll?

Narendra Verma test
Moderator Tag

Warning: Please note

This thread was started before GSAP 3 was released. Some information, especially the syntax, may be out of date for GSAP 3. Please see the GSAP 3 migration guide and release notes for more information about how to update the code to GSAP 3's syntax. 

Recommended Posts

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 comment
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 comment
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 comment
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 comment
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 comment
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 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.
×
×
  • Create New...