Search the Community

Hello, I am working with a banner that is 970x418. I am trying to create a parallax effect on y-scroll (drag). In order to do this, I assume that: 1) I need to create a "container div" with a "foreground div" and "background div," foreground on top of the background. 2) Set the container itself to scroll/drag and affect both div's together. 3) Change the speed the background div to be a little slower, in order to give the parallax illusion. So far, I haven't found anything that shows me how to work with dragging one item and using the info of that item to affect the positioning of another. I've seen sites that give code libraries like scrollMagic, but they are not easy when it comes to finding out how to do specific things, only what is shown in their examples. Please help.

Hi, Since helping Stefdv in this topic i dug a little more into parallax and scroll controlled Tweens/Timelines, and i dedicated some time to create a tutorial and some code in order to help GSAP JS users to create some apps and web sites using this technique. Is not a lights-out-blow-your-mind type of tutorial, but i just was hoping to help some other users who might want to apply this into their creations. Here you can find the tutorial, as well as the source code and a couple of examples, since i don't have a blog of my own, i'll take the liberty to point comments here, unless the staff says other thing. Since i started with this tutorial i found a lot of things about parallax and because of that i will make a second tutorial which i haven't started yet, but as soon as my schedule allows me to i will write it. I hope you enjoy it, Cheers, Rodrigo.

Hi, I'm currently working on an iOS app using Flash CC and Adobe AIR and have been loving using greensock to create great tweens.. I have a shocking green membership which is great! Anyway, the majority of the app will be using illustrations. I have split these into three layers each (background, foreground & middle) and want to use the iPad gyroscope to move these separate movieclips around the stage to give a parallax 3d effect. Is it possible to do this using the greensock code with easing enabled? Or how complicated is it? Thanks, Adam

I'm developing a slider with parallax effect, using TimelineMax. And it's joy ride with GSAP ! But, my intention was to deploy using node-webkit, and I'm getting quite inconsistent performance results. In the codepen I show just the basics, next and previous buttons and you should be able to swipe left and right. (Have to add much more, later, more content on each slide, probably dragging (with Draggable) and make it an infinite slider thing...) As for now, sometimes it just works beautifully, others, it's just a bit jerky, mostly at animations end, when slowing down. I've tried different easings, tried to thin the KBs of images, force3D: true, etc... Only thing is I get a better result, but still not allways smooth, if just open the page in chrome, instead of using node-webkit. I'm about to go back to Flash CC, AIR and Actionscript, (the animation code would virtually be the same) but I'd really like to do this in javascript and HTML5. wondering wether I'm getting hardware acceleration I tried chrome://gpu inside node-webkit, I get the same as just in chrome: Graphics Feature Status Canvas: Hardware accelerated Flash: Hardware accelerated Flash Stage3D: Hardware accelerated Flash Stage3D Baseline profile: Hardware accelerated Compositing: Hardware accelerated Rasterization: Software only, hardware acceleration unavailable Threaded Rasterization: Disabled Video Decode: Software only, hardware acceleration unavailable Video Encode: Hardware accelerated WebGL: Hardware accelerated Driver Bug Workaroundsclear_uniforms_before_first_program_use exit_on_context_lost texsubimage2d_faster_than_teximage2d Problems Detected Accelerated video decode interferes with GPU sandbox on certain AMD drivers: 298968 Disabled Features: accelerated_video_decode Additional GPU rasterization whitelist for field trial: 380694 Disabled Features: gpu_rasterization_field_trial Whitelist for using GPU rasterization for a broader set of content: 399306 Disabled Features: gpu_rasterization_expanded_heuristics GPU rasterization is blacklisted on non-Android: 362779 Disabled Features: gpu_rasterization Some drivers are unable to reset the D3D device in the GPU process sandbox Applied Workarounds: exit_on_context_lost TexSubImage2D() is faster for full uploads on ANGLE Applied Workarounds: texsubimage2d_faster_than_teximage2d Clear uniforms before first program use on all platforms: 124764, 349137 Applied Workarounds: clear_uniforms_before_first_program_use Threaded rasterization has not been enabled or is not supported by the current system. Disabled Features: threaded_rasterization It's a 16 GB RAM machine with a GTX 770 card, but the inconsistency has appeared almost identical on other machines with less resources, so I'm guessing it might not be a hardware issue ? Any ideas ?

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.