Image sequence and Moving From Left to Right

[dtek516]

Hey guys,
I used the image sequence to animate some pngs, but I'd also like to move the image from the right offscreen to the far left of the container. I'm using the onUpdate function, but cant seem to get the css left or right to respond.

<div class="spacer s0" id="trigger"></div>
<div id="imagesequence" style="width:100%;margin-bottom:500px;/* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#6ac0e2+0,0094ce+53,606d6d+54,f7f7f7+100 */
background: #6ac0e2; /* Old browsers */
background: -moz-linear-gradient(top,  #6ac0e2 0%, #0094ce 53%, #606d6d 54%, #f7f7f7 100%); /* FF3.6-15 */
background: -webkit-linear-gradient(top,  #6ac0e2 0%,#0094ce 53%,#606d6d 54%,#f7f7f7 100%); /* Chrome10-25,Safari5.1-6 */
background: linear-gradient(to bottom,  #6ac0e2 0%,#0094ce 53%,#606d6d 54%,#f7f7f7 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#6ac0e2', endColorstr='#f7f7f7',GradientType=0 ); /* IE6-9 */

">
<div class="container">
	<div class="row">
		<div class="col-xs-12">
			<img id="myimg" style="padding-top:50px;" class="img-responsive center-block" src="alienware/alienware0001.png">
		</div>
	</div>
</div>
</div>


<script>
	// define images
	var images = [
"alienware/alienware0000.png",
"alienware/alienware0001.png",
"alienware/alienware0002.png",
"alienware/alienware0003.png",
"alienware/alienware0004.png",
"alienware/alienware0005.png",
"alienware/alienware0006.png",
"alienware/alienware0007.png",
"alienware/alienware0008.png",
"alienware/alienware0009.png",
"alienware/alienware0010.png",
"alienware/alienware0011.png",
"alienware/alienware0012.png",
"alienware/alienware0013.png",
"alienware/alienware0014.png",
"alienware/alienware0015.png",
"alienware/alienware0016.png",
"alienware/alienware0017.png",
"alienware/alienware0018.png",
"alienware/alienware0019.png",
"alienware/alienware0020.png",
"alienware/alienware0021.png",
"alienware/alienware0022.png",
"alienware/alienware0023.png",
"alienware/alienware0024.png",
"alienware/alienware0025.png",
"alienware/alienware0026.png",
"alienware/alienware0027.png",
"alienware/alienware0028.png",
"alienware/alienware0029.png",
"alienware/alienware0030.png",
"alienware/alienware0031.png",
"alienware/alienware0032.png",
"alienware/alienware0033.png",
"alienware/alienware0034.png",
"alienware/alienware0035.png",
"alienware/alienware0036.png",
"alienware/alienware0037.png",
"alienware/alienware0038.png",
"alienware/alienware0039.png",
"alienware/alienware0040.png",
"alienware/alienware0041.png",
"alienware/alienware0042.png",
"alienware/alienware0043.png",
"alienware/alienware0044.png",
"alienware/alienware0045.png",
"alienware/alienware0046.png",
"alienware/alienware0047.png",
"alienware/alienware0048.png",
"alienware/alienware0049.png",
"alienware/alienware0050.png",
"alienware/alienware0051.png",
"alienware/alienware0052.png",
"alienware/alienware0053.png",
"alienware/alienware0054.png",
"alienware/alienware0055.png",
"alienware/alienware0056.png",
"alienware/alienware0057.png",
"alienware/alienware0058.png",
"alienware/alienware0059.png",
"alienware/alienware0060.png",
"alienware/alienware0061.png",
"alienware/alienware0062.png",
"alienware/alienware0063.png",
"alienware/alienware0064.png",
"alienware/alienware0065.png",
"alienware/alienware0066.png",
"alienware/alienware0067.png",
"alienware/alienware0068.png",
"alienware/alienware0069.png",
"alienware/alienware0070.png",
"alienware/alienware0071.png",
"alienware/alienware0072.png",
"alienware/alienware0073.png",
"alienware/alienware0074.png",
"alienware/alienware0075.png",
"alienware/alienware0076.png",
"alienware/alienware0077.png",
"alienware/alienware0078.png",
"alienware/alienware0079.png",
"alienware/alienware0080.png",
"alienware/alienware0081.png",
"alienware/alienware0082.png",
"alienware/alienware0083.png",
"alienware/alienware0084.png",
"alienware/alienware0085.png",
"alienware/alienware0086.png",
"alienware/alienware0087.png",
"alienware/alienware0088.png",
"alienware/alienware0089.png",
	];

	// TweenMax can tween any property of any object. We use this object to cycle through the array
	var obj = {curImg: 0};
var left = 5;
	// create tween
	var tween = TweenMax.to(obj, 0.5,{
			marginLeft:"700px",
			curImg: images.length - 1,	// animate propery curImg to number of images
			roundProps: "curImg",				// only integers so it can be used as an array index
			repeat: 0,									// repeat 3 times
			immediateRender: true,			// load first image automatically
			ease: Linear.easeNone,			// show every image the same ammount of time
			onUpdate: function () {
			  $("#myimg").attr("src", images[obj.curImg]); // set the image source
			}
		}
	);

	// init controller
	var controller = new ScrollMagic.Controller();

	// build scene
	var scene = new ScrollMagic.Scene({triggerElement: '#imagesequence', duration: 1000, offset: 300})
						.setTween(tween)
	
						.setPin("#imagesequence")
						.addIndicators() // add indicators (requires plugin)
						.addTo(controller);

</script> 

[Dipscom]

Hi dtek516,

 

Welcome to the forums!

 

A reduced example of what you are trying to achieve makes it easier for us to help you with your issues.

 

If you want to move an element left or right, I would suggest using the x property and give a position: relative or absolute to your element. 

 

Here's a quick video on how to create a codePen: