[ScrollTrigger and Motionpath HELP !!!!]

On 9/9/2023 at 8:01 PM, Carl said:

I don't know. You seem to have a lot of custom logic that hijacks the normal scroll behavior and inputs and I can't really dig into that.

no worries i found solution thanks you 

[ScrollTrigger and Motionpath HELP !!!!]

14 hours ago, Carl said:

if you were to remove everything except for the motionPath animation you would see that it slows down at the end because all tweens have a default ease of "power1.out". Try using ease:"none" and see if that works better.

 

section_2.to(rec, {
        motionPath: {
            path: path,
            align: path,
            alignOrigin: [0.5, 0.5],
        },
        immediateRender: true, ease:"none"
    })

 

Hi btw do you how to pause `scroll` for few seconds when user `OnEnterBack` ??? 
coz the problem i got now when user `OnLeave` and suddenly `OnEnterBack` with a strongly Swipe will make the object move very fast maybe right to the top within 1 seconds 

[ScrollTrigger and Motionpath HELP !!!!]

14 hours ago, Carl said:

if you were to remove everything except for the motionPath animation you would see that it slows down at the end because all tweens have a default ease of "power1.out". Try using ease:"none" and see if that works better.

 

section_2.to(rec, {
        motionPath: {
            path: path,
            align: path,
            alignOrigin: [0.5, 0.5],
        },
        immediateRender: true, ease:"none"
    })

 

Thanks you man you're my hero

[ScrollTrigger and Motionpath HELP !!!!]

Hi this my project with Gsap using ScrollTrigger , Motion Path
I create a function to delay speed of scroll 20px/per scroll ( mouse wheel ) but some how when character reach to section which is near bottom 
the speed suddenly slow down ( but the Speed 20px/per scroll still work you can check the scroll spacing between scroll ) 

 

i tried to find the reason why but still dont understand ( should i not try to control speed of the mouse ) ? 

 

is there anybody can help me on this ? at least show me the reason ?? 

See the Pen ExGZrWB by phm-thanh-li-m-the-animator (@phm-thanh-li-m-the-animator) on CodePen

[Hi how can i create vertical slider with dots navigation like this video ?]

here video I want to know the keywords or see a demo of the navigation animation shown in the video above. I tried creating it with vanilla JavaScript, but it doesn't seem smooth and has a lot of issues. I hope I can find a demo that I can take a look at.

[GOT PROBLEM WITH GSAP SCROLLTRIGGER !!]

 

i got this problem right here at X axis like when my object reached to the X axis then container will auto move up when i scroll down ? 
i mean when ever my object reached the X the container will move up so any one know what is the problem of my demo ??? 
really need some help about this 

thanks for watching this
 

 

 

See the Pen mdzoQwZ by phm-thanh-li-m-the-animator (@phm-thanh-li-m-the-animator) on CodePen

[Hi i how can i move to next section without create more spacing ?]

On 5/27/2023 at 7:00 AM, Rodrigo said:

Hi,

 

This is the closest I can get to what you need:

 

 

 

There's still a bit of space at the bottom but I don't know how to remove that.

 

Hopefully this helps.

Happy Tweening!

Thanks you bro this help me alot

[Hi i how can i move to next section without create more spacing ?]

Hi i have a code from pen but i dont know how to move to next section 3 without create more spacing below section 2 ?? 

See the Pen mdzoQwZ by phm-thanh-li-m-the-animator (@phm-thanh-li-m-the-animator) on CodePen

[Hi all i have some question about ScrollTrigger !]

Here my code i have fews question

1. but when i scroll to section 4 i still see the cloud at the first time so how can i push all the cloud to the right and only show when i scroll ?? 

2. is there any way to optimize my script code it look like a mess ... 

 

See the Pen dyKZRMx by phm-thanh-li-m-the-animator (@phm-thanh-li-m-the-animator) on CodePen

[Hi look like Scrollorama JS with Tween got problem at Pin function ?]

Hi guys, im working on a project but have some problem with the "Pin" function 
its seem cannot pin while user scroll through the Pin function is only work when user scroll up ?? how can i fix it ? 

See the Pen dyKZNrM by phm-thanh-li-m-the-animator (@phm-thanh-li-m-the-animator) on CodePen

[How can i combine these code in to demo code ?]

25 minutes ago, mvaneijgen said:

@JoePham can you create a minimal demo for us? The demo you've posted is not yours right? And if I check your code there is no element in the demo with an id of cat.

 

Right now I can't see how this block of code has anything to do with this demo. If you can put it in relation to the rest if the code you will be using and put that in a demo, even if it is not working we'll have a better understanding of what you are trying to do and it will be easier to help you.

See the Pen ZEvZjeM by phm-thanh-li-m-the-animator (@phm-thanh-li-m-the-animator) on CodePen

 

hi this is my minimal code with the extra code but look like its not working right can you tell me why ? thanks  
my extra code is for reduce speed of the object without using height because in my project if use the height to reduce it create another conflict .. 

[How can i combine these code in to demo code ?]

22 minutes ago, mvaneijgen said:

@JoePham can you create a minimal demo for us? The demo you've posted is not yours right? And if I check your code there is no element in the demo with an id of cat.

 

Right now I can't see how this block of code has anything to do with this demo. If you can put it in relation to the rest if the code you will be using and put that in a demo, even if it is not working we'll have a better understanding of what you are trying to do and it will be easier to help you.

See the Pen ZEvZjeM by phm-thanh-li-m-the-animator (@phm-thanh-li-m-the-animator) on CodePen

 

hi this is my minimal code with the extra code but look like its not working right can you tell me why ? thanks 

[How can i combine these code in to demo code ?]

i found this scroll code ... 

and my question is how can i combine demo code with this code below
this code below can control speed of the object 
thanks for you times !

let anim = gsap.to("#cat", {
  paused: true,
  immediateRender: true,
  ease: "none",
  motionPath: {
    path: "#text-curve",
    align: "#text-curve",
    alignOrigin: [0.5, 0.5],
    autoRotate: true,
  }
});

let progressTo = gsap.quickTo(anim, "progress", {
  duration: 0.5,
  ease: "expo"
});

let catTo = gsap.quickTo("#cat", "rotationY")

Observer.create({
  type: "wheel,touch,pointer",
  wheelSpeed: -1,
  onUp() {
    progressTo(anim.progress() + 0.1);
  },
  onDown() {
    progressTo(anim.progress() - 0.1);
  },
  onToggleY(self) {
    let rotation = self.deltaY < 0 ? 180 : 0;
    catTo(rotation);
  }
});

 

See the Pen wvzYxjE by codribble (@codribble) on CodePen

[Hi How can i Overwrite the Rotation ?]

Hi everyones

I got stuck at the rotation 

so my question is how can i Overwrite the rotation ? ?? 

please go to the Codepen 

dont know only show the mobile version ... 

thanks for your time ! 

See the Pen ZEvZjeM by phm-thanh-li-m-the-animator (@phm-thanh-li-m-the-animator) on CodePen

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

Thank you so much i know what to do now

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

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 ? 

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

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) 

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

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 ? 

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

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 ? 

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

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 ! 

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

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