Jump to content
GreenSock

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

Using ScrollToPlugin to auto scroll (very choppy?)

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

I'm trying to implement an 'auto scroll' of sorts based on mouse movement/position. 

 

I'm new to GSAP; I'm hoping someone can point out my errors/help me to make this animation smoother and continuous? 

Adapted from: 

 

Additionally, here is the live (very rough) preview on my site: https://www.tessa.studio/portfolio

 

Thanks in advance. 

 

Edit: The parallax effects on hover are, or at least appear to be, independent of my issues with the ScrollToPlugin... It's still laggy when I comment that portion of the script out.  These effects are the reason for wanting to scroll with mouse movements. 

See the Pen QWWvrvY by jsprac (@jsprac) on CodePen

Link to comment
Share on other sites

Hey Tessa and welcome to the GreenSock forums.

 

Your tweens conflict a good bit here. I'd recommend using one tween per mousemove call and using overwrite: "all" to make sure and stop conflict with previous tweens. Doing both of those things seems to take away the stuttering.

 

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

 

Side note: it doesn't make sense to put an ease on a .set() call :) 

Link to comment
Share on other sites

@ZachSaucier Wow - I am so grateful for your time and assistance ?

 

If it's not too much trouble,  I have a few follow-up questions. I'm not understanding the logic of the .set() call here/where it's even located since it appears to be implicit. I was reading the docs and realized I was completely mistaken with the xMove and yMove assignments. https://greensock.com/docs/v2/TimelineMax/set() 

 

1. What are the 0 and 500 values actually referring to? 

 

$landingInnerContent.on("mousemove touchmove", function(e) {
    var xMove = "+=0",
        yMove = "+=0";
    if (e.clientX > $landingWrapper.width() / 2) {
      xMove = "+=500";
    } else {
      xMove = "-=500";
    }
    if (e.clientY > $landingWrapper.height() / 2) {
      yMove = "+=500";
    } else {
      yMove = "-=500";

 

2. Additionally, the forum post that inspired me to try the ScrollToPlugin had eases (following the functions that I believe are the .set() calls you mentioned)...  so, are these the calls for which it wouldn't make sense, or am I not following correctly? 

 

See the Pen QjzZpO by jonathan (@jonathan) on CodePen

 

$landingInnerContent.on("mousemove touchmove", function(e) {
    if (e.clientX > $landingWrapper.width() / 2) {
      TweenMax.to($landingWrapper, 2, {
        scrollTo: {
          x: "+=175"
        },
        ease: Power2.easeOut
      });
    } else {
      TweenMax.to($landingWrapper, 2, {
        scrollTo: {
          x: "-=175"
        },
        ease: Power2.easeOut
2. Additionally, the forum post that inspired me to try the ScrollToPlugin had eases (following the functions that I believe are the .set() calls you mentioned)...  so, are these the calls for which it wouldn't make sense, or am I not following correctly? 

3. More of a theoretical question, as I haven't attempted to implement yet, but I intend to make this 'grid' draggable on mobile (since there'll  obviously be no pointer events to respond to for the scrolling). I will surely research all I can in the meantime, but do you know if I can use multiple GSAP libraries simultaneously/disable the Draggable for desktop? I'm afraid that I don't see how the Tweens were conflicting in my original code, and so I don't want to accidentally create more conflicts. No worries if this inquiry is too vague/unsupported. 

 

Thanks again for the corrections and helping me to learn! 

 

 

Link to comment
Share on other sites

2 hours ago, Tessa said:

I'm not understanding the logic of the .set() call here/where it's even located since it appears to be implicit.

I didn't use one in my demo. I just read the commented out .set() call that you had. It had an ease so I commented about it.

 

2 hours ago, Tessa said:

What are the 0 and 500 values actually referring to? 

You can look at the variable that they are being assigned to (xMove and yMove). Then look where that variable is being used:

TweenMax.to($landingWrapper, 8, {
  scrollTo: {
    x: xMove,
    y: yMove
  },
  ease: Power0.easeNone, 
  overwrite:"all"
});

 

2 hours ago, Tessa said:

are these the calls for which it wouldn't make sense, or am I not following correctly? 

No .set() calls are being used in that demo that you posted - only a couple of .to() calls. But that demo faces the same issue as your first one - I'd recommend an approach like the one I used in the post above :) 

 

2 hours ago, Tessa said:

do you know if I can use multiple GSAP libraries simultaneously/disable the Draggable for desktop?

Sure, if you do it properly :) You just have to make sure that they're not both being used at the same time and are set up correctly to play nicely. 

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