dtek516

As I mentioned, the only real issue appears to be on lines 97-98. Once that timeline completes, the door's properties change from what I defined.

Sure. https://codepen.io/dtek516/pen/eWGbMr However, I left everything in tact, in the event that theres more code that is causing the issue, and the fact that the page as a whole is in a way dynamic Hope you can still help.

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!

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>