Jump back and forth in a timeline with a steppedease spritesheet

Devotee007 · January 21, 2020

Hi,

I'm trying to do a spritesheet that moves to a certain point on clicking different points of interests. I have succeded in doing a steppedease that gooes forward and backwords when clicking on two points. But I have three points A, B and C and I want to play the spritesheet correct if you are for example on C and clicks A it should go there, and if I click B from A it should go there. Is this possible to do in one Timeline? Below is the code I have:

<!DOCTYPE html>
<html>
	<head>
		<title></title>
		<script src="https://code.jquery.com/jquery-3.4.1.js" integrity="sha256-WpOohJOqMqqyKL9FccASB9O0KwACQJpFTUBLTYOVvVU=" crossorigin="anonymous"></script>
		
		<style>
			#back {
				position: absolute;
				left: 0px;
				top: 0px;
				width: 50%;
				height: 100%;
				cursor: pointer;
				background-color: #ccc; 
				opacity: .5;
				z-index: 1;
				display: flex;
				justify-content: center;
			}

			#forward {
				position: absolute;
				right: 0px;
				top: 0px;
				width: 50%;
				height: 100%;
				cursor: pointer;
				background-color: #eee;
				opacity: .5;
				z-index: 1;
				display: flex;
				justify-content: center;
			}
			
			#timeline {
				position: absolute;
				top:0px;
				left:0px;
				width: 100%;
				height: 100%;
				z-index: 2;
				pointer-events: none;
				display: flex;
    			justify-content: center;
    			align-items: center;
			}

			#object {
				top:0px;
				left: 0px;
				width: 652px; 
				height: 652px; 
				background:url(sprite-30fps.png);
				background-repeat: no-repeat;
			}
		</style>
	</head>
	<body>
		<div id="back">BACK</div>
		
		<div id="forward">FORWARD</div>

		<div id="timeline">
			<div id="object"></div>
		</div>
		

		<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/latest/TweenMax.min.js"></script>
		
		<script>
			var tl = new TimelineLite({paused:true});
	
			tl.to("#object", 1, {backgroundPosition: "50% 0", ease:SteppedEase.config(14)}) 
			.addPause()
			tl.to("#object", 1, {backgroundPosition: "100% 0", ease:SteppedEase.config(14)})


			$('#forward').on('click', function(event) {
				event.preventDefault();
				tl.play();
			});

			$('#back').on('click', function(event) {
				event.preventDefault();
				tl.reverse();
			});
		</script>
	</body>
</html>

//Devotee007

GreenSock · January 21, 2020

I don't think you need a timeline actually.

First of all, I know it sounds weird but the "/latest/" directory on the CDN points to a very old version of GSAP - I would strongly recommend updating to the latest version. The CDN provider, CDNJS, stopped allowing updates to directories like that many years ago - that's why it's stuck at an old version. In the future, always link to a specific version, like /3.0.5/.

You could use a single tween that goes across the whole 28 steps, and then just tween to the midway point (progress: 0.5) for the first step, and the end (progress: 1) for the second. Here's an example with the first step and it's using the latest GSAP 3 syntax:

// do the whole sequence in one tween, but just remember that animating the progress to 0.5 is the first part, and then 1 as the second part. 
var walk = gsap.to("#object", 1, {backgroundPosition: "100% 0", ease: "steps(28)", paused: true});

$('#forward').on('click', function(event) {
	event.preventDefault();
	gsap.to(walk, {progress: 0.5, duration: 1, overwrite: true});
});

$('#back').on('click', function(event) {
	event.preventDefault();
	gsap.to(walk, {progress: 0, duration: 1, overwrite: true});
});

You can load the latest GSAP from https://cdnjs.cloudflare.com/ajax/libs/gsap/3.0.5/gsap.min.js (though we're likely releasing an update to 3.1.0 this week, FYI).

Does that help?

Devotee007 · January 21, 2020

Thank you for the help and the heads up on the old CDN! I have tried it now and it works great! I have one question, what does overwrite:true do?

GreenSock · January 21, 2020

overwrite: true simply tells GSAP to immediately kill all other tweens of that same target (or targets). So, for example, if someone clicks the button a bunch of times quickly, you wouldn't want a bunch of tweens trying to control the progress of that same animation simultaneously. You could use overwrite: "auto" for a more complex algorithm that only looks for (and kills) specific properties that overlap, but in your demo it was clear that we've only got one thing we're tweening anyway, so it's faster to just do overwrite: true.

Make sense?

Devotee007 · January 22, 2020

Thank you, it make sense, very well explained.

Notifications

Messages

Jump back and forth in a timeline with a steppedease spritesheet

Recommended Posts

Devotee007

Link to comment

Share on other sites

GreenSock

Link to comment

Share on other sites

Devotee007

Link to comment

Share on other sites

GreenSock

Link to comment

Share on other sites

Devotee007

Link to comment

Share on other sites

Create an account or sign in to comment

Create an account

Sign in

Recently Browsing 0 members