Adiacent Posted March 4, 2021 Share Posted March 4, 2021 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 More sharing options...
ZachSaucier Posted March 4, 2021 Share Posted March 4, 2021 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 More sharing options...
Adiacent Posted March 4, 2021 Author Share Posted March 4, 2021 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 More sharing options...
ZachSaucier Posted March 4, 2021 Share Posted March 4, 2021 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 More sharing options...
Shrug ¯\_(ツ)_/¯ Posted March 4, 2021 Share Posted March 4, 2021 Your demo is not so minimal so its hard to filter through. This demo using position: fixed; seems relative to fixing your issue. 2 Link to comment Share on other sites More sharing options...
Adiacent Posted March 5, 2021 Author Share Posted March 5, 2021 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 More sharing options...
Solution ZachSaucier Posted March 5, 2021 Solution Share Posted March 5, 2021 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 2 Link to comment Share on other sites More sharing options...
Adiacent Posted March 5, 2021 Author Share Posted March 5, 2021 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 More sharing options...
billyZduke Posted March 8, 2021 Share Posted March 8, 2021 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 More sharing options...
Adiacent Posted March 9, 2021 Author Share Posted March 9, 2021 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 More sharing options...
Recommended Posts
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 accountSign in
Already have an account? Sign in here.
Sign In Now