Jump to content
Search Community

dtek516

Members

  • Posts

    4

  • Joined

  • Last visited

 Content Type 

Posts posted by dtek516

    Dissapearing Elements after Timeline completes

    in GSAP

    Posted

    Hi,

    Im trying to animate a house with "rooms".

     

    on page load, the house builds itself, then (at the moment), if you click the floating top left plus sign, it will zoom the house out, open a door and reveal a room. If you then click the house icon, the idea is that the house zooms back out - door shuts- and you can make another selection.

     

    Problem I'm having, is the rotateY on the door. Sometimes the entire door disappears after rotating, sometimes doesnt. I've tried fromTo, set, clearProps. Nothing is working. Am I missing something here?

     

    Thanks!

    See the Pen by house (@house) on CodePen

    Image sequence and Moving From Left to Right

    in GSAP

    Posted

    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> 
×
×
  • Create New...