Search the Community

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