Pause animation on X axis

[cindy]

Hi, as a learning experiment  would like to pause an animation when the square hits the X axis to his half, then when the user click the button I would like to resume or reverse the animation, is this possible without using timing?

 

Thanks in advance.

See the Pen qBqNOWj by CindyR (@CindyR) on CodePen

[ZachSaucier]

Hey Cindy and welcome to the GreenSock forums.

 

2 hours ago, cindy said:

when the square hits the X axis to his half

What do you mean by this? Do you mean when the right edge of the square is at the middle of the viewport? 

 

And does it need to have the bounce ease?

 

2 hours ago, cindy said:

when the user click the button I would like to resume or reverse the animation

How is the logic of whether it should resume or reverse determined?

 

2 hours ago, cindy said:

is this possible without using timing?

What do you mean "using timing"?

[cindy]

hi, thanks for reply, at the end of the animation the square is at transform: translate(400px, 0px);  I want to pause the animation when the square hits 200px and yes it need to be bounced, if not I would just paused the animation on 0.5, 

On the click of the button I don't care much about it, It could just resume the animation for now, so it would go from 200px to 400px.

 

By using timing I mean that I know how to pause, play the animation using the progress logic, but using bounce as effect doesn't allow me to stop the animation in half, because the square won't be exactly at 200px

[ZachSaucier]

I would create two animations: One that animates the box to an x of 200px. Then you can enable the button to play another animation to an x of 400 px. 

 

If that doesn't work for your end effect please try to better describe the end effect that you need better instead of what you think you need  

[mikel]

Hey @cindy,

 

A special solution using Draggable.hitTest

 

See the Pen RwoRGPz by mikeK (@mikeK) on CodePen

 

Happy hittesting ...

Mikel

[ZachSaucier]

1 hour ago, mikel said:

A special solution using Draggable.hitTest

The problem with that is that it doesn't have the bounce ease in the middle like cindy requested in her last message. So I don't think any sort of pausing in the middle would be a possible solution.

[mikel]

 

Hey ZACH,

 

It was more of 'special' fun.
The question here: Why doesn't GREEN 'stop' precisely at the HIT?

 

I can't understand Cindy´s problem with ease.

 

See the Pen abBZJyQ by mikeK (@mikeK) on CodePen

 

Happy tweening ...

Mikel

 

[ZachSaucier]

2 minutes ago, mikel said:

Why doesn't GREEN 'stop' precisely at the HIT?

onUpdate happens every time the tween updates. It doesn't run more often than that. If the rate of movement is very high, then part of the box's bounds might be past the hit test when the onUpdate fires. If you change the duration to something bigger (like 15) then you can see that it stops more closely to the hitTest.

[cindy]

6 minutes ago, mikel said:

It was more of 'special' fun.

Yes, it was a nice approach, however doesn't solve the problem in a pixel perfect way, but the addPause() method will do, I think I'll keep on that direction. Thanks

[GreenSock]

The challenge is to map the exact spot of that ease to the progress where the x value is what you want which isn't trivial. You could iterate over the ease until the value passes it and do some basic interpolation to estimate it, then tween to that progress value like this:

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

 

I added the snap just so that it doesn't land at a value like 199.9954.

 

Here's the helper function where you can pass in a linear progress value (0.5 in this case since 200 is halfway between 0 and 400), the ease, and optionally a precision value (500 default):

function mapLinearProgress(progress, ease, precision) {
	ease = gsap.parseEase(ease);
	precision = precision || 500;
	let inc = (1 / precision),
		p;
	for (let i = 0; i < 1; i += inc) {
		p = ease(i);
		if (p > progress) {
			let prev = ease(i-inc);
			return i - inc + ((progress - prev) / (p - prev)) * inc;
		}
	}
	return 1;
}

I hope that helps.

[mikel]

 

 

No challenge - just for fun.

 

See the Pen yLVJzNx?editors=0010 by mikeK (@mikeK) on CodePen

 

Happy bouncing ...

Mikel