Jump to content
GreenSock

Search In
  • More options...
Find results that contain...
Find results in...
Devotee007

Jump back and forth in a timeline with a steppedease spritesheet

Recommended Posts

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

Share this post


Link to post
Share on other sites

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? 

 

  • Like 2

Share this post


Link to post
Share on other sites

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? 

 

 

 

 

  • Like 1

Share this post


Link to post
Share on other sites

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? 

  • Like 3

Share this post


Link to post
Share on other sites

Thank you, it make sense, very well explained.

  • Like 1

Share this post


Link to post
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

Loading...

  • Recently Browsing   0 members

    No registered users viewing this page.

×