Search the Community

Hello, I love your products and everything Greensock stands for. Your products are top-notch, and the customer service is as good as the Kinko's customer service is bad. GreenSock customer service is like "Bizzaro Kinko's Customer Service." In other works: GreenSock - "Totes Awesome Sauce" Kinko's - "The Hangover 2 & Indiana Jones 4, kind of awful" I am trying to come up with the most efficient and "zazzy-licious" way to put in the background of one of my website page, the scrolling code that you see on computer screens in the background of movies and tv shows. I'm not sure if I want just pure binary (1's and 0's) or letters and numbers. I figured that I would find about 500 ka-trillion Google results showing different ways of doing this in various languages, but alas, I didn't really find much of anything. I'm using the Greensock Javascript libraries (v.12) and the latest version of Raphael.Js. I don't really need anyone to show me how to do this, by providing a working example (at least, not yet). I'm really looking for a broad outline of the steps I would need to take to accomplish this task in the most code efficient and least taxing burden on the browser way possible. Any help would be greatly appreciated. Thanks, Sweet J

Hello, I have an element whose opacity is being changed based on scroll position. No problem there. When the element is in the scroll range, I want it to loop an animation only while within the scroll position range. The looping the animation part is what I'm having trouble with. I tried calling a function, using onComplete, etc. Here is the timeline: var tlwhoweareGreen = new TimelineMax({paused:true}); tlwhoweareGreen.append( TweenLite.to($("div#whoweare-green"), 1, {css:{opacity:1, autoAlpha:1}}) ); /*I've been trying to append the timeline or call a function here. Once the opacity has been set to 1, I want it to loop back to zero and back to one, infinitely until the the user has scrolled outside the range*/ Here is the scroll function: $(window).scroll(function() { var getVert = $(this).scrollTop(); console.log(getVert); var getHor = $(this).scrollLeft(); function scrollTween(startPoint, endPoint, tweenName, type) { var progressNumber; if(type == 'vertical') { progressNumber = (1 / (endPoint - startPoint)) * (getVert - startPoint); } else if (type == 'horizontal') { progressNumber = (1 / (endPoint - startPoint)) * (getHor - startPoint); } if (progressNumber >= 0 && progressNumber <= 1) { tweenName.progress(progressNumber); } else if(progressNumber < 0) { tweenName.progress(0); } else if(progressNumber > 1) { tweenName.progress(1); } } scrollTween(400, 800, tlwhoweareGreen, 'vertical'); $("div#whoweare-green").css("display", "block"); }); }); </script>

Hi Jack I was surprised to discover the amazing site, GreenSock and feel secured because I'm a novice in AS3. I gladly signed up. I hope this membership will help me learning AS3. I got stuck on my first project, making the clickable scroll for my NewiPad. I inserted my clickable movie-clip (vertical) inside the code from the Flick-scrolling example and tested the scroll on my New iPad. It worked well but the problem is that clicking my movie-clip and dragging the scroll conflict. When I scroll, I only want it to trigger the scroll event. Right now mouse click event and scroll event are firing at the same time. So I switched all the mouse click events into the touch events but still the same problem occurs. I only want that click event or touch event fired when I tap the button not drag the scroll. Your help will be much appreciated. Thanks. question_about_coflict01.zip

I am trying to figure out how to use greensock to tween to another anchor point on the page. Does anyone know how to do this. Thanks.

I am trying to setup a menu which uses the scrollTo plugin to move to different sections of a one page site, with a menu bar at each section. The html looks like this: <div id="bg"> <div id="section1"> <div id="menubar"> <div id="logo"> </div> <div id="vertline"> </div> <button id="whoweare">WHO WE ARE</button> <button id="whatwedo">WHAT WE DO</button> ... <div id="section2"> <div id="menubar2"> <div id="logo"> </div> <div id="vertline"> </div> <button id="whoweare">WHO WE ARE</button> <button id="whatwedo">WHAT WE DO</button> ....... The style like this: #bg{ height:8000px; background:url(images/background.png); margin: auto; } #section1 { height: 800px; } #section2 { height: 800px; } #menubar { position: relative; height: 50px; border-bottom: 1px solid; border-color: #022e2f; } #menubar2 { position: relative; height: 50px; border-bottom: 1px solid; border-color: #022e2f; } #logo { width: 76px; height: 34px; margin-left: 25px; margin-right: 25px; background-image:url(images/logo.png); background-repeat: no-repeat; } #vertline { width: 1px; height: 200px; position:absolute; top: 0px; left: 120px; background-color: #022e2f; } #whoweare { position:absolute; top: 10px; left: 145px; color: #fff; font-family: "HelveticaNeueBold", "HelveticaNeue-Bold", "Helvetica Neue Bold", "HelveticaNeue", "Helvetica Neue", 'TeXGyreHerosBold', "Helvetica", "Tahoma", "Geneva", "Arial", sans-serif; font-weight:600; font-stretch:normal; font-size: 14px; background-color: transparent; } #whatwedo { position:absolute; top: 10px; left: 280px; color: #fff; font-family: "HelveticaNeueBold", "HelveticaNeue-Bold", "Helvetica Neue Bold", "HelveticaNeue", "Helvetica Neue", 'TeXGyreHerosBold', "Helvetica", "Tahoma", "Geneva", "Arial", sans-serif; font-weight:600; font-stretch:normal; font-size: 14px; background-color: transparent; }#bg{ height:8000px; background:url(images/background.png); margin: auto; } The script looks like this: <script> $(document).ready(function(){ TweenMax.set(window, {scrollTo:0}); $("button#whoweare").click(function() { var section1 = $("div#section1").offset().top; TweenLite.to(window, 1.5, {scrollTo:section1, ease:Back.easeOut}); }); $("button#whatwedo").click(function() { var section2 = $("div#section2").offset().top; TweenLite.to(window, 1.5, {scrollTo:section2, ease:Back.easeOut}); }); }); </script> .... On the first menu the "whatwedo" button works, and will scroll to the second menu. But the second menu doesn't work. Is there something I'm missing? Thanks! Zach

So I have been searching for a way to have a background orbit a center. I came across the greensock blitmask that does an amazing job of wrapping the bitmap data to do infinte scrolling effects. However, I can't figure out a way to use this blitmask to rotate and still have the wrapping effect. I attached a SWF file to demostrate what i'm trying to accomplish. WASD keys control the movement cosc469.zip