Jump to content
Search Community

if else Statement

Barrett test
Moderator Tag

Warning: Please note

This thread was started before GSAP 3 was released. Some information, especially the syntax, may be out of date for GSAP 3. Please see the GSAP 3 migration guide and release notes for more information about how to update the code to GSAP 3's syntax. 

Recommended Posts

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",
		})
		
	}
}

 

Link to comment
Share on other sites

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

 

  • Like 6
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...