Frisbetarian

Hey all, I'm using Superscrollorama to tween different images on this website and apply a parallax effect on scroll Problem is that the images that are supposed to tween stutter and jitter at random, ruining the effect. This is the code that im using to tween the images: var controller = $.superscrollorama(); var scrollDuration = 2000; controller.addTween('#fruitExplosion1', TweenMax.to( $('#fruitExplosion1'), 2, {css:{top:'750px',left:'920px'}, ease:Cubic.easeOutCirc}), scrollDuration); controller.addTween('#fruitExplosion2', TweenMax.to( $('#fruitExplosion2'), 1, {css:{top:'650px',left:'1300px'}, ease:Cubic.easeOutCirc}), scrollDuration); controller.addTween('#fruitExplosion3', TweenMax.to( $('#fruitExplosion3'), 2, {css:{top:'550px',left:'900px'}, ease:Cubic.easeOutCirc}), 3000); controller.addTween('#fruitTop1', TweenMax.to( $('#fruitTop1'), 7, {css:{top:'2260px'}, ease:Quad.easeInOut}), 7000); controller.addTween('#fruitMiddle1', TweenMax.from( $('#fruitMiddle1'), 1, {css:{top:'2000px'}, ease:Quad.easeInOut}), 3000); Markup of the images: <div id="fruitExplosion1"><img src="images/fruitExplosion1.png"></div> <div id="fruitExplosion2"><img src="images/fruitExplosion2.png"></div> <div id="fruitExplosion3"><img src="images/fruitExplosion3.png"></div> <div style="position:absolute;z-index:-1;"> <img id="bottle" src="images/bottle/bottle.png" style="height:5850px;"> <img id="fruitTop1" src="images/bottle/front.gif"> <img id="fruitMiddle1" src="images/bottle/middle.gif"> <img id="fruitBottom1" src="images/bottle/back.png"> <!-- <img id="gradient" src="images/bottle/gradient.png"> --> </div> CSS: #fruitExplosion1{ position: absolute; top:900px; left:920px; z-index:-1; } #fruitExplosion2{ position: absolute; top:750px; left:1200px; z-index:-1; } #fruitExplosion3{ position: absolute; top:750px; left:1000px; z-index:-1; } #bottle{ position: absolute; top:1460px; left:1680px; width:849px; /*height:5850px;*/ z-index:-1; } #fruitTop1{ position: absolute;/*780*/ top:1423px; left:1680px; z-index:3; }#fruitMiddle1{ position: absolute; top:1245px; left:1671px; z-index:2; }#fruitBottom1{ position: absolute; top:1228px; left:1672px; z-index:1; } Any advice on how to solve this?

Thank you, worked

TweenMax.to($('html'), 1.5, {'scrollTop':$target.offset().top, 'scrollLeft':$target.offset().left, ease:Quart.easeOut}, function(){ window.location.hash = target; scrolling = false; } ); I know that its a noobish question, but am I calling my oncomplete correctly? It just doesn't seem to be changing the url when the animation completes.

Apologies for the late reply. Your suggestion to set a height value to signIn did the trick, much appreciated.

Thanks for the quick reply and for pointing out where I've gone wrong. I have fixed some of the issues and believe that the script error that was appearing should be no more. Weird thing is that TypeError: $target.offset(...) is undefined http://polypodhub.com/qi/js/jquery-1.10.2.min.js Line 5 Is not getting logged for me. I wasn't aware of it until you pointed it out. I am trying out FF's and Chrome's consoles and getting zilch. In any case, I think I fixed what was causing that undefined target to appear. Are you now able to see what is happening to the background color in FF?

I'm tweening the sign-in and register forms on this website Qi. What basically happens is when you click on Sign-In in the navbar, the sign-in form animates in from the top. Its working fine in Chrome and IE but for some reason, the background color of the div dissapears in FF leaving only a section where there is padding colored. Here is what im using to drop the form down and skew it: TweenMax.to($(".signIn"), 0.5, {top:"85px",scaleY:1.0,delay:0,ease:Quart.easeOut}); TweenMax.from($(".signIn"), 0.5, {skewX:-10, skewY:20,delay:0,ease:Quart.easeOut}); I noticed that the scaling and skewing is whats causing the background color to disappear. Any hint as to what could be wrong is appreciated. My guess is that I havent defined orientation in the stylesheet for that particular div?