Jump to content
Search Community

How can i reduce the spacing between Point A -> B when user scroll?

JoePham test
Moderator Tag

Recommended Posts

This is my demo link 
https://tool.baotramcompany.com/animation/v2/

and this my Gsap Code so
1. Can i reduce the space between point A -> B ? 
2. Can i reduce the speed of the character movement ? 

Thanks for you times.
Sory i cant push my code to codepen  (something was wrong!)

var animation;

gsap.registerPlugin(MotionPathPlugin, ScrollTrigger);

gsap.set("#cat", {
  scale: 1,
  autoAlpha: 1
});
gsap.set("#cat", {
  transformOrigin: "50% 50%"
});
animation = gsap.to("#cat", {
  scrollTrigger: {
    trigger: "#motionPath",
    start: "top left",
    endTrigger: "body",
    end: () => ScrollTrigger.maxScroll("html"),
    scrub: true,
    markers: false,
    timeScale: 10,
    onUpdate: self => {
      gsap.to("#cat", {
        rotationY: () => self.direction === 1 ? 0 : 180,
        overwrite: 'auto',
        onscroll: function () {
          if (self.direction === 1) {
            jQuery("#increaseTrans").trigger('click');
            //console.log("progress", self.progress);
          } else {
            jQuery("#increaseTrans").trigger('click');
          }
        }, //=> self.direction === 1 ? jQuery("#increaseTrans").trigger('click');  jQuery("#moveDown").trigger('click'); : console.log("up"),
      });
    }
  },
  duration: 0.5,
  ease: "none",
  immediateRender: true,
  motionPath: {
    path: "#text-curve",
    align: "#text-curve",
    alignOrigin: [0.5, 0.5],
    autoRotate: true,
  }
});

 

See the Pen BaJMVxW by joe-pham-patroids (@joe-pham-patroids) on CodePen

Link to comment
Share on other sites

Welcome to the forums @JoePham

 

Can you explain what you mean by reducing the space from A -> B? I'm not sure what you mean by A or B as there are no labels with that. It looks like you're following an SVG path, so you would probably need to rework that if you want to reduce the space.

 

To change the speed, you can change the scrub value to a number...

 

Quote

Boolean | Number - Links the progress of the animation directly to the scrollbar so it acts like a scrubber. You can apply smoothing so that it takes a little time for the playhead to catch up with the scrollbar's position! It can be any of the following

  • Boolean - scrub: true links the animation's progress directly to the ScrollTrigger's progress.
  • Number - The amount of time (in seconds) that the playhead should take to "catch up", so scrub: 0.5 would cause the animation's playhead to take 0.5 seconds to catch up with the scrollbar's position. It's great for smoothing things out.

 

And make your page longer. The speed is ultimately determined by the scroll distance, i.e. how far the user scrolls.

 

If your app is going to fixed that, another alternative would be to use the new Observer plugin, and use the wheel events to animate the progress of your animation. If you can make a CodePen, I can fork your code and kind of give you an idea of that.

 

Here's a guide on how to create a CodePen along with a pen to fork with everything already loaded.

 

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

 

  • Like 1
Link to comment
Share on other sites

47 minutes ago, OSUblake said:

Welcome to the forums @JoePham

 

Can you explain what you mean by reducing the space from A -> B? I'm not sure what you mean by A or B as there are no labels with that. It looks like you're following an SVG path, so you would probably need to rework that if you want to reduce the space.

 

To change the speed, you can change the scrub value to a number...

 

 

And make your page longer. The speed is ultimately determined by the scroll distance, i.e. how far the user scrolls.

 

If your app is going to fixed that, another alternative would be to use the new Observer plugin, and use the wheel events to animate the progress of your animation. If you can make a CodePen, I can fork your code and kind of give you an idea of that.

 

Here's a guide on how to create a CodePen along with a pen to fork with everything already loaded.

 

 

 

 

hi Here's my code on   

about the point A > B mean space between the start point to the second point when user scroll once times 
please help me this or at lease share me some keyword to take the research thanks ! 

Link to comment
Share on other sites

13 minutes ago, OSUblake said:

Here's a quick demo using the Obeserver and the new quickTo method.

 

If you want change how far it moves on every event, just change the 0.1 value here to something else.

progressTo(anim.progress() + 0.1);
progressTo(anim.progress() - 0.1);

 

 

 

 

 

Hi oh i did it but i have a question can i create a fake height ? because if i reduce the speed but the scrollbar still scroll fast ? so the problem is the character move slower than Scrollbar ... 
if can create a fake height is there any something to define when character at the end point then can move to the next section ? 

Link to comment
Share on other sites

6 minutes ago, OSUblake said:

What do you mean by "fake height"?

 

You would know when the character is at the end when the progress is 1.

if ((anim.progress() + 0.1) >= 1) {
  // it's at the end
}

 

As you can see in my codepen 

the Scrollbar scroll too fast so that the character cannot see after few scroll from user is there any way to fake height or freeze the screen ? 

Link to comment
Share on other sites

38 minutes ago, OSUblake said:

If you're going to have scrolling on the page, then you probably shouldn't use the Observer as it's going to conflict with scrolling.

 

If you need to change the speed of the ScrollTrigger, you just need to adjust the end value. 

Hi OSublake 

Can we reduce the space of the scrollbar every time user scroll ?? 
For Ex: 

window.scrollTo(0, window.scrollY + 5
Link to comment
Share on other sites

53 minutes ago, OSUblake said:

Sorry, but I'm not understanding what you're trying to do. If you need scrolling and scrollbar, then you should use ScrollTrigger.

Thanks for your information alot 

by the way is there any way to make a checkpoint like when object go throgh that checkpoint(mark by id) then run a function ? 

Link to comment
Share on other sites

Sure thing!

 

That's pretty much the entire purpose of ScrollTrigger. Do something when an element hits a certain point.
 

ScrollTrigger.create({
  trigger: "#id",
  start: "top center", // when the top of the element hits the center of the viewport
  onToggle: self => {
    console.log("toggled, isActive:", self.isActive)
  }
});


It seems like we're going around in circles a bit answering these questions though. Is there another way we can help you learn?

Have you watched the ScrollTrigger video?
 



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

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