if else Statement

[Barrett 3 Likes (Newbie)]

Hi All,

 

I'm currently trying to create function that controls a sprite 4420px wide. The sprite is masked and only displays 170px width at any time. On a button click the sprite moves -170px to display the next image and so on. However when the last image of the sprite is reached I want to loop back to the first frame.

 

The if statement only seems to be recognised if the 'style.left ==  0'.

 

Please see my function below any help would be appreciated.

 

Thanks

 

addListeners = function () {
  
  angleLeft.addEventListener('click', angleLeftClick, false)
  
}

leftClick = new TimelineMax({
	delay: 0,
});


function angleLeftClick() {
	
	if (sprite.style.left == -4250) {
		
		leftClick.to(sprite, 0, {
			x: 0,
		})
		
		console.log("clicked");
	}
	
	else {	
		
		leftClick.to(sprite, 0, {
			x: "-=170",
		})
		
	}
}

 

[Shaun Gorneau 1,503 Likes (Superhero)]

Tough to see what is happening here with just a few lines of code ... if possible, a CodePen would give us a better opportunity to help. But, I suspect your issue is due to translating the `X` value vs changing the `left` value. The tween is affecting `x`, so the style.left property will remain unchanged. So we have to get its translated value relative to its initial offset.

 

See the Pen ZozxPg by sgorneau (@sgorneau) on CodePen

 

[Acccent 358 Likes (Leader)]

Also, just a small additional note, the delay for new timelines is 0 by default so you can just do leftClick = new TimelineMax();

[Barrett 3 Likes (Newbie)]

Hi Shaun, Acccent,

 

Both of these solutions worked perfectly. Thank you for your help and quick reply.

 

Thanks

Barrett