Jump to content
Search Community

Image sequence and Moving From Left to Right

dtek516 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

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

	// define images
	var images = [

	// 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,{
			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})
						.addIndicators() // add indicators (requires plugin)

Link to comment
Share on other sites

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:


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