Jump to content
GreenSock

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

Locomotive Scroll and follow mouse problem

Go to solution Solved by ZachSaucier,

Recommended Posts

Hi all people!!
I have a small problem with library locomotive scroll and implementation of follow mouse (wthi this example )

 

The mouse and circle are out of sync. If I put the smooth on false of locomotive scroll, they are ok, they move in a synchronized manner. How can I fix it ??

Basically  can show me an example of this use of application with the locomotive-scroll

Thanks!

See the Pen RQjyQa by Sahil89 (@Sahil89) on CodePen

Link to comment
Share on other sites

Hey Adiacent and welcome to the GreenSock forums. Thanks for supporting GreenSock with a Business Green membership!

 

How come you're using a super old version of GSAP? We highly recommend GSAP 3 which has a smaller file size, a sleeker API, and a bunch of new features. Upgrading is easy!

 

As for your question, do you have a minimal demo that shows the issue with Locomotive Scroll? Since it replaces the natural scroll you'll need to get the position of the scroll from Locomotive instead of from the default scroller of a page.

Link to comment
Share on other sites

Thanks  ZachSaucier!

This is my litte demo:

See the Pen BaQPzed by marcotorcolacci (@marcotorcolacci) on CodePen



The circle must appear in the image of the man  and it should move synchronously with the mouse. 

Thanks all for help!

Link to comment
Share on other sites

You've got a lot of stuff going on there. Can you please make your demo a minimal demo by removing all of the irrelevant parts? That will make it a lot easier for us to help you.

Link to comment
Share on other sites

Your demo is not so minimal so its hard to filter through. This demo using position: fixed; seems relative to fixing your issue.

  • Like 2
Link to comment
Share on other sites

Hi, 

I made the demo as minimal as possible. removed useless css and js.
The circle is very far from the pointer and therefore cannot be seen in the whole image but only in the central part ....

See the Pen BaQPzed by marcotorcolacci (@marcotorcolacci) on CodePen



 

Link to comment
Share on other sites

  • Solution

Closer to a minimal demo :) 

 

Several notes:

  • You're still using the super old version of GSAP. Again, we recommend upgrading. If you upgrade, you should also apply overwrite: 'auto' to your tween that animates the position of your circle. See this post for more info.
  • If you remove the Locomotive Scroll part you can see that your code doesn't work in that case either.
  • I don't really understand why you're using the setTimeouts.
  • You should avoid container.getBoundingClientRect() from firing every tick if you can as it's not very performant.
  • As I said in my first post in this thread, since Locomotive Scroll replaces the natural scroll you'll need to get the position of the scroll from Locomotive instead of from the default scroller of a page.

In cases like this you need to see how the element is mispositioned (is it always a constant amount off? If so where is that constant amount coming from? Is it off by how much you scroll? If so you need to add in the scroll position to the calculation). 

 

If I were creating this I'd probably make the circle a child element of the section that you care about and position it absolutely. That makes the calculations easier, though it's definitely possible to do the way you have it. 

 

I've not used Locomotive Scroll too much. The only way that I'm aware of getting the scroll position is using the scroll event listener. There might be a better way (like a property on the locomotive instance) that you could do instead.

See the Pen bGBjzvX?editors=0010 by GreenSock (@GreenSock) on CodePen

  • Like 2
Link to comment
Share on other sites

all clear! I will update the version of gsap3. (cmq the problem was always what you solved me, understand how to intercept the scroll of the locomotive.) Thank you very much.

You say that the setTimeout (() => is useless? In the demo the scroll locomotive is used.
 

https://locomotivemtl.github.io/locomotive-scroll/

Link to comment
Share on other sites

As the forums have helped me out numerous times this week, I figured I'd share a little "minimal demo" somewhat similar to the one in this thread: a small piece of what I've been working on. I know you guys prefer codepen, but codesandbox lets you use multiple files, so that's where I put it. The web panel on the right will seem blank until you mouse over it, then the magic happens. Both position and blur of the elements are being animated relative to the mouse position using gsap.ticker.add(). (Lots of seemingly elaborate math in there, but that's mostly just formulas pulled from elsewhere on the web, relating to calculating the sizes and arrangement of circles...)

 

https://codesandbox.io/s/romantic-cohen-27o1c

Link to comment
Share on other sites

On 3/5/2021 at 2:31 PM, ZachSaucier said:

Closer to a minimal demo :) 

 

Several notes:

  • You're still using the super old version of GSAP. Again, we recommend upgrading. If you upgrade, you should also apply overwrite: 'auto' to your tween that animates the position of your circle. See this post for more info.
  • If you remove the Locomotive Scroll part you can see that your code doesn't work in that case either.
  • I don't really understand why you're using the setTimeouts.
  • You should avoid container.getBoundingClientRect() from firing every tick if you can as it's not very performant.
  • As I said in my first post in this thread, since Locomotive Scroll replaces the natural scroll you'll need to get the position of the scroll from Locomotive instead of from the default scroller of a page.

In cases like this you need to see how the element is mispositioned (is it always a constant amount off? If so where is that constant amount coming from? Is it off by how much you scroll? If so you need to add in the scroll position to the calculation). 

 

If I were creating this I'd probably make the circle a child element of the section that you care about and position it absolutely. That makes the calculations easier, though it's definitely possible to do the way you have it. 

 

I've not used Locomotive Scroll too much. The only way that I'm aware of getting the scroll position is using the scroll event listener. There might be a better way (like a property on the locomotive instance) that you could do instead.

 

 

How could I make sure that the circle always has a start and end position?
That is when I enter or when I go out the circle was in the center of the image.

Thanks!

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