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

[JoePham 1 Likes (Newbie)]

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

[OSUblake 18,476 Likes (Superhero)]

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

 

[JoePham 1 Likes (Newbie)]

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 

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

  

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 ! 

[OSUblake 18,476 Likes (Superhero)]

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);

 

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

 

 

[JoePham 1 Likes (Newbie)]

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 ? 

[OSUblake 18,476 Likes (Superhero)]

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
}

 

[JoePham 1 Likes (Newbie)]

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 ? 

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

[OSUblake 18,476 Likes (Superhero)]

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. 

[JoePham 1 Likes (Newbie)]

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) 

[OSUblake 18,476 Likes (Superhero)]

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

[JoePham 1 Likes (Newbie)]

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 ? 

[Cassie 5,141 Likes (Superhero)]

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

[JoePham 1 Likes (Newbie)]

Thank you so much i know what to do now