Search the Community

I was playing with paralax scrolling and found an old forum post about it following the mouse. The movement works well but I want to replace the pageX with the posistion of the div#viewPort offset. I tried a few things to get it and return it as a var but I couldn't get the doParallax function to read it. Any help is greatly appreciated.

Hey guys, so basicly i want to trigger an animation when the visitor scrolls down to the place the animation is located. how would i go about doing it? this is the code i want to trigger: <script> //we'll use a window.onload for simplicity, but typically it is best to use either jQuery's $(document).ready() or $(window).load() or cross-browser event listeners so that you're not limited to one. window.onload = function() { var sponsor = document.getElementById("sponsor"), funktioner = document.getElementById("funktioner"), patenter = document.getElementById("patenter"), butik = document.getElementById("butik"); godtdesign = document.getElementById("godtdesign"); direktesalg = document.getElementById("direktesalg"); brick1 = document.getElementById("brick1"); brick2 = document.getElementById("brick2"); brick3 = document.getElementById("brick3"); brick4 = document.getElementById("brick4"); brick5 = document.getElementById("brick5"); brick6 = document.getElementById("brick6"); brick7 = document.getElementById("brick7"); brick8 = document.getElementById("brick8"); brick9 = document.getElementById("brick9"); brick10 = document.getElementById("brick10"); brick11 = document.getElementById("brick11"); brick12 = document.getElementById("brick12"); brick13 = document.getElementById("brick13"); brick14 = document.getElementById("brick14"); brick15 = document.getElementById("brick15"); brick16 = document.getElementById("brick16"); brick17 = document.getElementById("brick17"); brick18 = document.getElementById("brick18"); brick19 = document.getElementById("brick19"); brick20 = document.getElementById("brick20"); rbrick1 = document.getElementById("rbrick1"); rbrick2 = document.getElementById("rbrick2"); rbrick3 = document.getElementById("rbrick3"); rbrick4 = document.getElementById("rbrick4"); rbrick5 = document.getElementById("rbrick5"); rbrick6 = document.getElementById("rbrick6"); rbrick7 = document.getElementById("rbrick7"); rbrick8 = document.getElementById("rbrick8"); TweenLite.to(godtdesign, 1, {opacity:1.0, delay:1.0}); TweenLite.to(direktesalg, 1, {opacity:1.0, delay:2.0}); TweenLite.to(butik, 1, {opacity:1.0, delay: 4.0}); TweenLite.to(patenter, 1, {opacity:1.0, delay:3.0}); TweenLite.to(funktioner, 1, {opacity:1.0, delay:2.0}); TweenLite.to(sponsor, 1, {opacity:1.0, delay:1.0}); TweenLite.from(brick1, 0.2, {y:-400, opacity: 0.0, delay:0.0, }, 0.05); TweenLite.from(brick2, 0.2, {y:-400, opacity: 0.0, delay:0.2, }, 0.05); TweenLite.from(brick3, 0.2, {y:-400, opacity: 0.0, delay:0.4, }, 0.05); TweenLite.from(brick4, 0.2, {y:-400, opacity: 0.0, delay:0.6, }, 0.05); TweenLite.from(brick5, 0.2, {y:-400, opacity: 0.0, delay:0.8, }, 0.05); TweenLite.from(brick6, 0.2, {y:-400, opacity: 0.0, delay:1.0, }, 0.05); TweenLite.from(brick7, 0.2, {y:-400, opacity: 0.0, delay:1.2, }, 0.05); TweenLite.from(brick8, 0.2, {y:-400, opacity: 0.0, delay:1.4, }, 0.05); TweenLite.from(brick9, 0.2, {y:-400, opacity: 0.0, delay:1.6, }, 0.05); TweenLite.from(brick10, 0.2, {y:-400, opacity: 0.0, delay:1.8, }, 0.05); TweenLite.from(brick11, 0.2, {y:-400, opacity: 0.0, delay:2.0, }, 0.05); TweenLite.from(brick12, 0.2, {y:-400, opacity: 0.0, delay:2.2, }, 0.05); TweenLite.from(brick13, 0.2, {y:-400, opacity: 0.0, delay:2.4, }, 0.05); TweenLite.from(brick14, 0.2, {y:-400, opacity: 0.0, delay:2.6, }, 0.05); TweenLite.from(brick15, 0.2, {y:-400, opacity: 0.0, delay:2.8, }, 0.05); TweenLite.from(brick16, 0.2, {y:-400, opacity: 0.0, delay:3.0, }, 0.05); TweenLite.from(brick17, 0.2, {y:-400, opacity: 0.0, delay:3.2, }, 0.05); TweenLite.from(brick18, 0.2, {y:-400, opacity: 0.0, delay:3.4, }, 0.05); TweenLite.from(brick19, 0.2, {y:-400, opacity: 0.0, delay:3.6, }, 0.05); TweenLite.from(brick20, 0.2, {y:-400, opacity: 0.0, delay:3.8, }, 0.05); TweenLite.from(rbrick1, 0.2, {y:-400, opacity: 0.0, delay:0.0, }, 0.05); TweenLite.from(rbrick2, 0.2, {y:-400, opacity: 0.0, delay:0.2, }, 0.05); TweenLite.from(rbrick3, 0.2, {y:-400, opacity: 0.0, delay:0.6, }, 0.05); TweenLite.from(rbrick4, 0.2, {y:-400, opacity: 0.0, delay:0.8, }, 0.05); TweenLite.from(rbrick5, 0.2, {y:-400, opacity: 0.0, delay:1.0, }, 0.05); TweenLite.from(rbrick6, 0.2, {y:-400, opacity: 0.0, delay:1.2, }, 0.05); TweenLite.from(rbrick7, 0.2, {y:-400, opacity: 0.0, delay:1.4, }, 0.05); TweenLite.from(rbrick8, 0.2, {y:-400, opacity: 0.0, delay:1.6, }, 0.05); } </script> thank you! - Jonas

Hi I am working on a website for a client which is basically an old flash site which I am translating into HTML with GSAP animation. The whole thing also uses parallax.js to create a layered 3d effect. This works great across all devices and moves when an ipad is tilted etc. My problem is that tweenmax is clashing somehow with the parallax javascript and causing the animations to jump or in the case of CSS opacity the fade does not work at all. When I remove parallax.js then it works just fine. So I did some research and then it occurred to me that it may be possible to create the parallax effect without using the plugin but through gsap itself and then it wouldn't cause compatibility issues. But although I can find examples of parallax controlled by mouse movement, there doesn't seem to be anything about creating this effect with device orientation/tilting etc Is this even possible? Thanks

So I found a tutorial here: http://code.tutsplus.com/tutorials/a-simple-parallax-scrolling-technique--net-27641 That makes parallax scrolling very simple and easy to understand. I want to take the javascript from the tutorial and apply GSAP. Not sure how to do that however.. The JavaScript from the tutorial. I'm sure it's easy but it would probably take me hours of playing with it where someone here has probably done it already or could do it in a minute or two. var $window = $(window); $('section[data-type=background]').each(function(){ var $bgobj = $(this); // assigning the object $(window).scroll(function() { var yPos = -($window.scrollTop() / $bgobj.data('speed')); // Put together our final background position var coords = '50% '+ yPos + 'px'; // Move the background $bgobj.css({ backgroundPosition: coords }); }); });

I am currently building a website that utilizes gsap js and scrollmagic to create a parallax effect. It works perfectly in most browsers and I even got it to be responsive. However I noticed an issue with Safari 6 on Mac OSX where the animation still 'technically' works but is extremely glitchy. You can see what I mean here: http://adm-rhino.unl.edu:82/why-college/ Any ideas on a solution or where the problem stems from would be a great help.

Hi all, I have created an infinite scrolling background with 4 layers. For giving the wrapping effect on each layer, I am using 2 copies of the same image and during the loop i am shifting the x positions. Now i want to use BlitMask for this, and i have sccuessfully implemented it too. I just want to have one doubt cleared : - there are 4 sprites for each layer updating in an update loop - these 4 layers are a child of BGScreen sprite should I use the BlitMask for just the BGScreen sprite or should I create 4 instances for each layer so that i can use the wrapping feature and then blit them each. And finally blit the whole BGScreen sprite too ?? any other suggestions are also welcome thanks I am attaching the two as files... just for your reference

Hello greensockers, This is a "how's that done?" post rather than a plea for help solving something. I'm curious if anyone has any experience achieving a parallax effect on elements in a page. An impressive example - and incredible site overall, can be seen on the welcome page here: http://axel-aubert.fr/#accueil Most of my queries with Uncle Google have come up with solutions similar to Scrollorama, which is different. I did find Plax (http://cameronmcefee.com/plax/) but the demo isn't very smooth... wasn't able to find much beyond that. I realize this isn't completely related to greensock but as it revolves around web effects, it seems to be in the same universe. Plus, you guys are always very helpful So, any thoughts on how I might approach this? JS libraries? If it's greensock-able, I'd love to know! I'm guessing this experience degrades down to a static image or wonky version of parallax in non-modern browsers but it's just too fun not to try. thanks in advance for any insight! azuki

Hi all, I am currently working on a onepage parallax wordpress site for a client, he spotted a site that had a load of cool effects and wants them adding to his site. That led me to superscrollorama which led me here. I am trying to recreate some of the effects from the superscrollarama demo site on the the clients site. I want to be able to use the same effect on numerous classes and have them trigger when they scroll into view and reverse when scrolling out of view (as they do on the demo site). Unfortunately ALL of them trigger at the same time (when the first class comes into view) and they dont reverse out again. Below is the code from the superscrollarama demo site // individual element tween examples controller.addTween('#fade-it', TweenMax.from( $('#fade-it'), .5, {css:{opacity: 0}})); controller.addTween('#fly-it', TweenMax.from( $('#fly-it'), .25, {css:{right:'1000px'}, ease:Quad.easeInOut})); controller.addTween('#spin-it', TweenMax.from( $('#spin-it'), .25, {css:{opacity:0, rotation: 720}, ease:Quad.easeOut})); I am completely new to this, and am at a loss. Any help/advice would be much appriciated.