Search the Community

Hello, I'm just starting with TweenLite and I have a very basic question: I tween a movieclip in a mouseup event (it is a simple scroll), using this: TweenLite.to(mc, 2, {throwProps:{x:200, y:0}, ease:Strong.easeOut}); The effect looks good, but I need to limit the movieclip "mc" X. The mc may have a maximum X value of 0, and a minimum of -1500, so I can tween the mc without showing the background under the mc. Is there any way to limit the tween or to stop the tween when the mc reach the limits? Thank you very much.

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>

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

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.

Hello i wanna ask for the more experienced userds of GSAP JS: How can i make a window scrollTo plugin go to 100% bottom of the webpage? on jquery i set it as "max", but i wan´t to use only GSAP for animations and jquery for selector and general pourposes tnx for your time.

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 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

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

Hi there, I have seen many sites that let you smoothly scroll a webpage up and down when you click on navigation buttons. I was wondering how I would go about this with the new Greensock JS. I have had no luck, and also all the examples I have looked at scroll to the location of a div. Is there no way I can just set a value or height property instead. Like scrollTo 1000px. I already have my function set up so I just need the animate scroll code. $('#box1').click(function(){ // Code goes here }) Thanks for your help Will P.s. Sorry I just moved this post to here, realised I posted this in the wrong area of the forum before.