Jump to content
Search Community

Snap acting weird

FrEZ test
Moderator Tag

Recommended Posts

Anyone got any idea why my snapping values are getting mixed up? Also any idea how to add an animating variable that sets to true once my gsap.to progressX value is finished, so then the onStop gets the progress value and I don't have to use onStopDelay that is inconsistent?

 

Thanks in advance!

See the Pen mdjxGdw by FrEZy (@FrEZy) on CodePen

Link to comment
Share on other sites

Hi,

 

I can spot two issues in your setup, mostly on your onStop callback:

onStop: (self) => {
  progressX.value = snap(progressWrap(progressX.value));
  gsap.to(progressX, {
    duration: 2,
    value: progressX.value
  });
  console.log(progressX.value, "progress");
  console.log(snap(progressX.value), "snap");
}

What happens here is that you're updating progressX.value in the first line (), then you tell to GSAP to tween the value property of progressX to it's current value, because by that time progressX.value was updated with this:

progressX.value = snap(progressWrap(progressX.value));

See the issue?

On top of that if you add this to your callback:

onStop: (self) => {
  progressX.value = snap(progressWrap(progressX.value));
  gsap.to(progressX, {
    duration: 2,
    value: progressX.value,
    onUpdate: () => console.log("stop update", progressX.value)
  });
  console.log(progressX.value, "progress");
  console.log(snap(progressX.value), "snap");
}

You'll see that sometimes the values in the onUpdate are negative when that particular tween starts, that's why is taking the long way around soto speak, because is going from a negative progress to a positive one.

 

This seems to prevent the jump in the rotation:

onStop(self) {
  // progressX.value = snap(progressWrap(progressX.value));
  target = snap(progressWrap(progressX.value));
  console.log("onStop init", target);
  gsap.to(progressX, {
    duration: 2,
    value: target,
    onUpdate: () => console.log("stop update", progressX.value)
  });
  console.log(progressX.value, "progress");
  console.log(snap(progressX.value), "snap");
}

Unfortunately it doesn't prevent the negative value, for that you'll have to review the logic in your onChange callback to prevent negative values.

 

3 hours ago, FrEZ said:

so then the onStop gets the progress value and I don't have to use onStopDelay that is inconsistent?

I don't get what you mean that stop delay is inconsistent. How exactly? With the modifications I suggested for the onStop callback everything seems to work as expected (except for the negative values of course).

 

Hopefully this helps.

Happy Tweening!

Link to comment
Share on other sites

1 hour ago, Rodrigo said:

Hi,

 

I can spot two issues in your setup, mostly on your onStop callback:

onStop: (self) => {
  progressX.value = snap(progressWrap(progressX.value));
  gsap.to(progressX, {
    duration: 2,
    value: progressX.value
  });
  console.log(progressX.value, "progress");
  console.log(snap(progressX.value), "snap");
}

What happens here is that you're updating progressX.value in the first line (), then you tell to GSAP to tween the value property of progressX to it's current value, because by that time progressX.value was updated with this:

progressX.value = snap(progressWrap(progressX.value));

See the issue?

On top of that if you add this to your callback:

onStop: (self) => {
  progressX.value = snap(progressWrap(progressX.value));
  gsap.to(progressX, {
    duration: 2,
    value: progressX.value,
    onUpdate: () => console.log("stop update", progressX.value)
  });
  console.log(progressX.value, "progress");
  console.log(snap(progressX.value), "snap");
}

You'll see that sometimes the values in the onUpdate are negative when that particular tween starts, that's why is taking the long way around soto speak, because is going from a negative progress to a positive one.

 

This seems to prevent the jump in the rotation:

onStop(self) {
  // progressX.value = snap(progressWrap(progressX.value));
  target = snap(progressWrap(progressX.value));
  console.log("onStop init", target);
  gsap.to(progressX, {
    duration: 2,
    value: target,
    onUpdate: () => console.log("stop update", progressX.value)
  });
  console.log(progressX.value, "progress");
  console.log(snap(progressX.value), "snap");
}

Unfortunately it doesn't prevent the negative value, for that you'll have to review the logic in your onChange callback to prevent negative values.

 

I don't get what you mean that stop delay is inconsistent. How exactly? With the modifications I suggested for the onStop callback everything seems to work as expected (except for the negative values of course).

 

Hopefully this helps.

Happy Tweening!

I don't understand what's making my progressX.value negative. I see that it's because of p, and so I wrap the progressX.value within 0-1. Why does it still come out negative?

Link to comment
Share on other sites

2 hours ago, Rodrigo said:

Hi,

 

I can spot two issues in your setup, mostly on your onStop callback:

onStop: (self) => {
  progressX.value = snap(progressWrap(progressX.value));
  gsap.to(progressX, {
    duration: 2,
    value: progressX.value
  });
  console.log(progressX.value, "progress");
  console.log(snap(progressX.value), "snap");
}

What happens here is that you're updating progressX.value in the first line (), then you tell to GSAP to tween the value property of progressX to it's current value, because by that time progressX.value was updated with this:

progressX.value = snap(progressWrap(progressX.value));

See the issue?

On top of that if you add this to your callback:

onStop: (self) => {
  progressX.value = snap(progressWrap(progressX.value));
  gsap.to(progressX, {
    duration: 2,
    value: progressX.value,
    onUpdate: () => console.log("stop update", progressX.value)
  });
  console.log(progressX.value, "progress");
  console.log(snap(progressX.value), "snap");
}

You'll see that sometimes the values in the onUpdate are negative when that particular tween starts, that's why is taking the long way around soto speak, because is going from a negative progress to a positive one.

 

This seems to prevent the jump in the rotation:

onStop(self) {
  // progressX.value = snap(progressWrap(progressX.value));
  target = snap(progressWrap(progressX.value));
  console.log("onStop init", target);
  gsap.to(progressX, {
    duration: 2,
    value: target,
    onUpdate: () => console.log("stop update", progressX.value)
  });
  console.log(progressX.value, "progress");
  console.log(snap(progressX.value), "snap");
}

Unfortunately it doesn't prevent the negative value, for that you'll have to review the logic in your onChange callback to prevent negative values.

 

I don't get what you mean that stop delay is inconsistent. How exactly? With the modifications I suggested for the onStop callback everything seems to work as expected (except for the negative values of course).

 

Hopefully this helps.

Happy Tweening!

I would greatly appreciate it if you could help me fix the issues behind the inconsistencies in my logic as I am truly stuck here.

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