Jump to content
Search Community

Simple carousel animation

neoaquino 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

I'm fairly new to Html5 and coming from flash background this framework is heaven sent. I'm doing a simple carousel, I already check the consoles in chrome, so far I'm not getting any issues. So my issues is I can't make it work. Can you guys assist me on what im doing wrong, Right now only 1 button works that should be scrolling horizontally and loops at the end. Please check my code.

 

Thanks!

See the Pen bNdaRy by anon (@anon) on CodePen

Link to comment
Share on other sites

Diaco really know more but I now you I would suggest a counter. Know you run through the array and when it's done it's done. So you have to add a counter so you can give it a new position and start again the same thing.

 

I've the same background, some Flash and not much JS. You could also place all images as a long line in a kind of container div and tween the content of that div by using a timeline. Using 'clip' in CSS can make the container so that it doesn't show the other images. And when you have all images seen you can play the timeline at zero or just put it on repeat: -1

 

Advantage of a time line is that it's easier to control instead of giving each image a tween.

Link to comment
Share on other sites

I apologize for sounding lazy and your right I should have posted my test results right now I'm just stumped, I have no idea how to continue it for Im not yet familiar and have no idea what i'm doing. This is what I did base on Diaco's suggestion.

function addListeners(){
	leftBtn.addEventListener("click",btnLeftPress,false);
}

function btnLeftPress(e){
	for(i=0;i<picArray.length;i++)
	{
		if(picArray[i]._gsTransform.x <= -300)
		{
			picArray[i]._gsTransform.x = picXArray[picArray.length-1];
			
		}
	}
	
	for(i=0;i<picArray.length;i++)
	{
		TweenLite.to(picArray[i], .50, {x:'-=300', onComplete:resetLeft});
		console.log(picArray[i]);
	}
	disableBtn();
}

function resetLeft(e){
	
	for(i=0;i<picArray.length;i++)
	{
		if(picArray[i]._gsTransform.x <= -300)
		{
			picArray[i]._gsTransform.x = picXArray[picArray.length-1];
		}
	}
	enableBtn();	
}

function disableBtn()
{
	leftBtn.removeEventListener("click",btnLeftPress,false);
}

function enableBtn()
{
	leftBtn.addEventListener("click",btnLeftPress,false);
}

and I'm getting this error on my console

 

Uncaught TypeError: Cannot read property 'x' of undefined

 

By the way Im using the Tweenmax plugin

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...