Jump to content

Search In
  • More options...
Find results that contain...
Find results in...

Search the Community

Showing results for tags 'scroll'.

  • Search By Tags

    Type tags separated by commas.
  • Search By Author

Content Type


  • GreenSock Forums
    • GSAP
    • Banner Animation
    • Jobs & Freelance
  • Flash / ActionScript Archive
    • GSAP (Flash)
    • Loading (Flash)
    • TransformManager (Flash)

Product Groups

  • Club GreenSock
  • TransformManager

Find results in...

Find results that contain...

Date Created

  • Start


Last Updated

  • Start


Filter by number of...


  • Start





Website URL







  1. I am trying to replace a jQuery plugin called "li-scroller" which combines the <li> tags from an unstructured list and scrolls the items inside a div one after another from left to right indefinately. Unfortunately the plugin distorts the letters slightly as the speed increases and I was hoping that Greensock would produce a more fluid result. Since I am new to Greensock, I am not sure which approach to take to accomplish this. Is Split Text necessary or would a method using Split Text produce smoother results than the alternative? Any guidance or examples to help get me started is appreciated. When I get something to work, I will post it to CodePen. Below is a list of some of the features I am trying to incorporate: Start at right of div, fade in letters and scroll from left to right. At left of div, letters fade out of display. First list item starts right after last list item without break in list. List repeats indefinately. Mouseover list causes the list scroll to pause. Seems simple enough but I have no clue how to tackle this. Thanks, James
  2. GreenSock


    Note: This page was created for GSAP version 2. We have since released GSAP 3 with many improvements. While it is backward compatible with most GSAP 2 features, some parts may need to be updated to work properly. Please see the GSAP 3 release notes for details. #container { margin:0; padding:0; font-family: Signika Negative, Asap, sans-serif; font-weight: 300; font-size: 17px; line-height: 150%; } #container h1 { font-family: Signika Negative, Asap, sans-serif; font-weight: 300; font-size: 48px; margin: 10px 0 0 0; padding: 0; line-height: 115%; text-shadow: 1px 1px 0 white; } #container h2 { font-family: Signika Negative, Asap, sans-serif; font-weight: normal; font-size:30px; color: #111; margin: 18px 0 0 0; padding: 0; line-height:115%; } #container p { line-height: 150%; color:#555; margin: 0 0 10px 0; } #container a { color:#71b200; } #container .normalBullets code { font-size: inherit; color: inherit; font-weight: normal; line-height: inherit; font-family: inherit; } #container .normalBullets li strong { font-size: 110%; } #container .normalBullets li { margin-bottom:8px; } #container .blackBG h1, #container .darkBG h1 { color: #ddd; text-shadow: none; } #container .blackBG p { color: #999; } #container .section { width: 100%; text-align: center; position: relative; padding: 20px; } /* .block was causing conflict with wp theme --- renamed below */ #container .customblock { padding: 10px; text-align: left; position: relative; } #container .blackBG { background-color: black; } #container .lightBG { background-color: #e4e4e4; } #container .subtleDark { color: #999; text-shadow: none; } #container .blackBG p strong { color:#ddd; font-weight: normal; } #container .controls { background-color: #222; border: 1px solid #555; color: #bbb; font-size: 18px; } #container .controls ul { list-style: none; padding: 0; margin: 0; } #container .controls li { display: inline-block; padding: 8px 0 8px 10px; margin:0; } /** CODE **/ #container .code { width: 100%; border: 1px solid #555; padding: 0; margin: 20px 0; } #container .code pre.prettyprint { margin:0; overflow: auto; } #container .codeTitle { color: #aaa; background-color: #111; padding: 8px; font-size:18px; border-bottom: 1px solid #555; } #container code, #scroller code { color: black; font-size: 16px; } #container .blackBG code, #container .darkBG code { /* carl removed color: #ccc; */ } #container pre { font-size: 1.1em; padding:8px; background-color:#333; color:white; border: 1px solid #777; } /** TOSS **/ #container .box { background-color: #91e600; text-align: center; font-family: Asap, Avenir, Arial, sans-serif; width: 196px; height: 100px; line-height: 100px; overflow: hidden; color: black; position: absolute; top:0; -webkit-border-radius: 10px; -moz-border-radius: 10px; border-radius: 10px; } /** BUTTONS **/ #container .button { display:inline-block; border-radius:8px; border-bottom-width: 2px; box-shadow: inset 0px 1px 0px rgba(255,255,255,0.6), 0px 3px 6px 0px rgba(0, 0, 0, 0.6); cursor:pointer; text-align: center; font-family: Signika Negative, Asap, Avenir, Arial, sans-serif; position:relative; margin: 4px; color:black; } #container .largeButton { padding: 12px 24px; font-size: 20px; margin: 12px 8px; min-width:110px; } .greenGradient { border: 1px solid #6d9a22; background-color: #699a18; background: linear-gradient(to bottom, #8cce1e 0%,#699a18 52%,#639314 53%,#76b016 100%); /* W3C */ text-shadow: 1px 1px 2px #384d16; color:#fff; text-decoration: none; } /** EXPANDABLE POINTS (FAQ) **/ .expPoint, .expList li { list-style: none; line-height: normal; margin: 0 0 0 8px; padding: 6px 4px 4px 24px; position:relative; border: 1px solid rgba(204,204,204,0); font-size: 110%; color: #111; font-weight: normal; } .expPoint, .expContent { font-family: Signika Negative, Asap, sans-serif; font-weight: 300; line-height: 140%; } .expPoint:hover, .expList li:hover { background-color:white; border: 1px solid rgb(216,216,216); } .expContent { height: 0; overflow: hidden; color: #444; margin: 2px 0 0 0; padding-top: 0; font-size:16px; } .expMore { color: #71b200; text-decoration: underline; font-size:0.8em; } .arrow-right { width: 0; height: 0; border-top: 5px solid transparent; border-bottom: 5px solid transparent; border-left: 6px solid #999; display:inline-block; margin: -4px 8px 0 -14px; vertical-align: middle; opacity:0.8; } .tableCellDesktop { display: table-cell; } .tableCellDesktop img { left: 120px; } @media screen and (max-width: 860px) { .tableCellDesktop { display: block; } .tableCellDesktop img { left: 0px; } } Features Touch enabled - works great on tablets, phones, and desktop browsers. Incredibly smooth - GPU-accelerated and requestAnimationFrame-driven for ultimate performance. Compared to other options out there, Draggable just feels far more natural and fluid, particularly when imposing bounds and momentum. Momentum-based animation - if you have ThrowPropsPlugin loaded, you can simply set throwProps:true in the config object and it'll automatically apply natural, momentum-based movement after the mouse/touch is released, causing the object to glide gracefully to a stop. You can even control the amount of resistance, maximum or minimum duration, etc. Complex snapping made easy - snap to points within a certain radius (see example), or feed in an array of values and it'll select the closest one, or implement your own custom logic in a function. Ultimate flexibility. You can have things live-snap (while dragging) or only on release (even with momentum applied, thanks to ThrowPropsPlugin)! Impose bounds - tell a draggable element to stay within the bounds of another DOM element (a container) as in bounds:"#container" or define bounds as coordinates like bounds:{top:100, left:0, width:1000, height:800} or specific maximum/minimum values like bounds:{minRotation:0, maxRotation:270}. Sense overlaps with hitTest() - see if one element is overlapping another and even set a tolerance threshold (like at least 20 pixels or 25% of either element's total surface area) using the super-flexible Draggable.hitTest() method. Feed it a mouse event and it'll tell you if the mouse is over the element. See http://codepen.io/GreenSock/pen/GFBvn for a simple example. Define a trigger element - maybe you want only a certain area to trigger the dragging (like the top bar of a window) - it's as simple as trigger:"#topBar", for example. Drag position, rotation, or scroll - lots of drag types to choose from: "x,y" | "top,left" | "rotation" | "scroll" | "x" | "y" | "top" | "left" | "scrollTop" | "scrollLeft" Lock movement along a certain axis - set lockAxis:true and Draggable will watch the direction the user starts to drag and then restrict it to that axis. Or if you only want to allow vertical or horizontal movement, that's easy too using the type ("top", "y" or "scrollTop" only allow vertical movement; "x", "left", or "scrollLeft" only allow horizontal movement). Rotation honors transform origin - by default, spinnable elements will rotate around their center, but you can set transformOrigin to something else to make the pivot point be elsewhere. For example, if you call TweenLite.set(yourElement, {transformOrigin:"top left"}) before dragging, it will rotate around its top left corner. Or use % or px. Whatever is set in the element's css will be honored. Rich callback system and event dispatching - you can use any of the following callbacks: onPress, onDragStart, onDrag, onDragEnd, onRelease,, onLockAxis, and onClick. Inside the callbacks, "this" refers to the Draggable instance itself, so you can easily access its "target" or bounds, etc. If you prefer event listeners instead, Draggable dispatches events too so you can do things likeyourDraggable.addEventListener("dragend", yourFunc); Works great with SVG Even works in transformed containers! Got a Draggable inside a rotated/scaled container? No problem. No other tool handles this properly that we've seen. Auto-scrolling, even in multiple containers - set autoScroll:1 for normal-speed auto scrolling, or autoScroll:2 would scroll twice as fast, etc. The closer you move toward the edge, the faster scrolling gets. See a demo here (added in version 0.12.0) Sense clicks when the element moves less than 3 pixels - a common challenge is figuring out when a user is trying to click/tap an object rather than drag it, so if the mouse/touch moves less than 3 pixels from its starting position, it will be interpreted as a "click" and the onClick callback will be called (and a "click" event dispatched) without actually moving the element. You can define a different threshold using minimumMovement config property, like minimumMovement:6 for 6 pixels. All major browsers are supported including IE9+. IE8 lacks hitTest() support. See full documentation here. See our Codepen Draggable Collection here. To get ThrowPropsPlugin (for the momentum-based features), join Club GreenSock today. You'll be glad you did. If not, we'll gladly issue a full refund.
  3. ThrowProps and Blitmask really do work well together for scrolling, but most of my views have too much interactivity for Blitmask to be useful. The BlitMask would need to be updated with a forced recapture of the Blitmask each time any change is made to the view, and this is taking about 500ms, which interferes with a smooth scroll. Is there an example for using ThrowProps in a Scroller without using BlitMask?
  4. Hello people! I have a <nav> with absolute position and inside of it some links <a>. After some scrolling I change its position to fixed to stick it at the top. (using stickOnScroll plugin) At the beginning I bind a mouseover to tween color of the text in <a> and works fine, but when I change it to fixed position the tween disappear. Thank you so much! <nav class="full-width" id="home_menu"> <ul class="container"> <li><a href="javascrip:void(0)">slim center</a></li> <li><a href="javascrip:void(0)" id="menu2">tratamientos</a></li> <li><a href="javascrip:void(0)">estilo de vida</a></li> <li><a href="javascrip:void(0)">por un méxico más sano</a></li> </ul> </nav> nav#home_menu{ position: absolute; height: 60px; top: 700px; width: 100%; border-top: solid 1px white; border-bottom: solid 1px white; } nav#home_menu ul{ min-height: 60px; height: 60px; top:0; width:1200px; left:50%; ; } nav#home_menu ul li{ display: inline; float: left; } nav#home_menu ul li a{ display: inline-block; margin-top: 23px; width: 295px; text-align: center; } $("#home_menu").stickOnScroll({ topOffset: 0, setParentOnStick: true, setWidthOnStick: true, onStick: onSticknav }); function onSticknav() { $('#menu2').bind('mouseover', overMenu); } function overMenu(e) { TweenMax.to($(e.currentTarget), .4, {color:"#009aff"}); }
  5. Is there a built in option to auto-scroll the container of a draggable element when the draggable is moved beyond the container? I am currently hooking up to the onDrag event and doing thing based on Y pointer. I kinda get the result I want. But still curious if there was a default option provided or anyone else has done it better.
  6. GreenSock


    Note: This page was created for GSAP version 2. We have since released GSAP 3 with many improvements. While it is backward compatible with most GSAP 2 features, some parts may need to be updated to work properly. Please see the GSAP 3 release notes for details. Allows TweenLite and TweenMax to animate the scroll position of the window (like doing window.scrollTo(x, y)) or a <div> DOM element (like doing myDiv.scrollTop = y; myDiv.scrollLeft = x;). To scroll the window to a particular position, use window as the target of the tween like this: //scroll to 400 pixels down from the top TweenLite.to(window, 2, {scrollTo:400}); //or to scroll to the element with the ID "#someID": TweenLite.to(window, 2, {scrollTo:"#someID"}); //or to specify which axis (x or y), use the object syntax: TweenLite.to(window, 2, {scrollTo:{y:400, x:250}}); Or to tween the content of a div, make sure you've set the overflow:scroll on the div and then do this: //scroll to 250 pixels down from the top of the content in the div TweenLite.to(myDiv, 2, {scrollTo:250}); Learn more in the ScrollToPlugin documentation.
  7. Hi there, i'm trying to do one of those animations on the header as you scroll down. I want it to be a very nice and smooth transition. I'm trying to do in such a way that i could easily re-use the code in different projects, just changing the timeline animation. Basically, when you scroll down 50px, an animation would play instantly, at the moment i'm adding a class "sticky" to my header, so i can control the position thru css, but i can't get the animation working. I'm sure there's something missing on my code, just can't figure out what it is. $(function() { var header = $(".header"); $(window).scroll(function() { var scroll = $(window).scrollTop(); if (scroll >= 50) { header.removeClass('not-sticky').addClass("sticky"); console.log("sticky") } else { header.removeClass("sticky").addClass('not-sticky'); console.log("notsticky") } }); }); var headerAnim = new TimelineLite({}); headerAnim.to(".sticky", 1, {css:{background:'#ccc'}, color:'#fff', ease:Back.easeOut}); //>> animate logo in, etc
  8. Hi all, this is my first post on this forum. I am working on a mobile calendar which requires to manage a large horizontal drag area combined to a important vertical scroll for a mobile web application (in webkit browser : Safari / Chrome) You will find a mockup attached to this post in order to understand what i am trying to do. This calendar has : - on left side : a vertical list of people (called "fixedView") - on right side : a vertical list of blocks which has a horizontal scrollview (using Draggable) in order to swich days by using drag gesture on axis : x (called "InnerView") These two sides are embedded in a "mainView" which is the page container for calendar. (Please have a look to attached file). In fact, i am trying to use a horizontal Draggable (InnerView) into a container which has a vertical scroll (mainView) I made a lot of research , check mobile performances (Galaxy S3 mini to iPhone5) and tests to try : "Scroll In Scroll" : Adding a vertical Draggable for mainView + Adding a horizontal Draggable for InnerView it "works badly" but don't know how to control vertical & horizontal in order to "lockAxis"; right now you can do diagonal drag which is not good (and bad perfs of course) moreover : with this method, i removed native scroll (provide by webkit with -webkit-overflow-scrolling: touch; which brings low perfs on vertical scroll => My Conclusions :using Greensock Draggable to manage vertical scroll is not possible cause we have very bad perfs on low devices I have to use native scroll provided by webkit for vertical scroll (best perfs.) and use Draggable for horizontal scroll (in InnerView) only Do you agree ? So, this is the problem i can't resolve : When i create a new Draggable for InnerView (params below) with {type : "x"}, i can't do a vertical scroll anymore (for sure). What i would like to do is to detect when user is doing a horizontal or vertical scroll on InnerView (by a swipe or drag gesture) . If User is scrolling horizontaly => we use Draggable Instance for InnerView only if User starts scrolling verticaly => we use a "prevent default" for Dragable to release touch bind and so let the browser do a native vertical scroll (webkit) So for this 2nd point, i don't know how to do this. (I had a look on google, GSAP forums, Docs...) I tried to bind the event with onDragStart method but didn't get it. Do you this this is the right approach ? I cant use a Draggable instance with {type : "x,y"} because it would mean that only "InnerView" will scroll vertically but in our case we need to scroll the entire mainview (which include FixedView + InnerView => so the mainView I had a look to "scrollLeft" and "scrollTop" properties and several code pens but i am still blocked. Hope my post is understandable; if you need more details, do not hesitate. Here Draggable Instance for InnerView : innerView = Draggable.create(innerViewEl, { type : "x", bounds : targetStageEl, throwProps : true, force3D : params.stage.force3D, edgeResistance : params.stage.edgeResistance, dragResistance : params.stage.dragResistance, // dragClickables : true, lockAxis : true, // zIndexBoost : false, snap: { x: function(endValue) { return Math.round(endValue / contextInterface._width) * contextInterface._width; } } }); Here DraggableInstance for MainView (bad perf for vertical scroll) mainView = Draggable.create(mainViewEl, { type : "y", bounds : {minY:0, maxY:-3000}, //SimulateLongScroll throwProps : true, force3D : false, // params.stage.force3D, edgeResistance : params.stage.edgeResistance, dragResistance : params.stage.dragResistance, dragClickables : true, lockAxis : true }); Thanks in advance.
  9. Is it possible to use a Superscrollorama object to control multiple timelines? My code: http://codepen.io/vincentccw/pen/AwIbx/?editors=111 RIght now the box1 class is animating as intended, but I'm only allowed to animate one box at a time, if I add another timeline below it, the whole animation stop working. Is there a better way to add multiple animation timelines or do I need to create multiple scrollorama object to hold individual timeline>
  10. Hello everybody, so far I am loving this plugin it is a great tool and this site is a great resource and I appreciate all the work that has been done in delivering such a great tool. I have a timeline that I created. The timline is not really that important. Just in case though: var tweenArticle = new TimelineMax() .from($('header.food_header > hgroup'), 3, {opacity:0, top:'-40px', ease: Power4.easeOut},0) .from($('article.food > section > summary > p'), 3, {opacity:0, top:'40px', ease: Power4.easeOut},0); This is the site I am trying to put it on: http://webshowcase.tk/wp1/?page_id=114 This is a wordpress site and what I am trying to do is affect every post on the page. When The article is in the viewport I would like to start animating just the elements in that article and if possible reverse but reverse is not super important at the moment. I can't seem to figure out how to get my timeline to play when the article is in the viewport. Any help would be greatly appreciated. Thank you.
  11. Hi, I'm trying to create a similar website to http://www.nouvelleoctavia.fr whereby as you scroll the content and imagery increase in size, fade in and fade out as if you are passing through it. I'm a newbie to GreenSock and I am having trouble understanding how it works. I'm currently trying to get a simple coloured div rectangle that is in the centre of the screen to increase and "pass through" as I scroll but it is not working. Any help would be most appreciated in getting me started. Thanks
  12. I am getting this weird error trying to use BlitMask when debugging on my android device: Error #2030: End of file was encountered. And it is coming from this part of the BlitMask code, on TOUCH_BEGIN event (when i put my finger down on the BlitMasked object): /** @private **/ protected function _mouseEventPassthrough(event:Event):void { if (this.mouseEnabled && (!_bitmapMode || (event is MouseEvent && this.hitTestPoint(MouseEvent(event).stageX, MouseEvent(event).stageY, false)))) { dispatchEvent(event); } } When debugging in emulator, the error does not happen, only when debugging on device. Does anyone know how to fix this issue?
  13. Hi All, I have a site where I have a horizontally styles un-ordered list (<ul>), my site dynamically adds items to the list based on user interactions. For each new item in the list, I have applied a Draggable.create call to make them draggable in the Y axis (vertical), I also apply an animation Tween on the item so it bounces into place. This all works fine! Im using this code for that: //add to the UL $(".cardList").prepend(newDiv); //animate the card into place TweenLite.from(newDiv, 0.5, { y: -250, ease: Elastic.easeOut }); Draggable.create(newDiv, { type: "y", onDrag: function () { //my code... }, onDragEnd: function () { //my code... } }); However, when there are a lot of items in the list, I would like to scroll the list horizontally, so I wrapped up my list into a DIV container and called: var scroller = new Draggable("#cardsContainer", { type: "scrollLeft", edgeResistance: 1.0 }); ...which 'kind of' works. I currently have 2 issues: 1) I can add a new item into the list and I can see that the scrollbar on the scroller increases, but from time to time, the scroller "snaps back" prematurely, so effectively you can never scroll to the end of the list. It simply stops scrolling, it looks like the animation I am using to add the new items to the list could have some effect on the calculation of the width of the scroller? 2) When I click and drag the scroller (when it does work), the items in the list which can scroll vertically move slightly up/down, can I have some kind of check to see if the user is scrolling left/right and NOT enable the vertical scroller based on some threshold? I hope that makes sense
  14. Hey, when I zoom in it zooms to the top left. I can scroll back to where I was centered, but is there a way to change the registration point? When I zoom in to a specific spot by moving top:-x, left:-x it crops off the top left. Would a better way, than changing the registration point, be appending the bounding box? I tried a couple suggestions with adding draggable, but in all the demos it required something for only paid members. Any ideas would be greatly appreciated. Thanks!
  15. Hello All, I am developing an app on android using phone gap. I am using timelinemax for animation. My animation is like this : one object is animating along with scroll animation. Animation works fine after scroll is completed. when both run simultaneously then object animation is poor. Is there any workaround for this ? Android Tested : 4.0 to 4.2 My second concern is that how we can achieve more smooth animation by force3D = TRUE or by Tweenmax.set(obj,{z:0.1}); ? Any help would be appreciated.
  16. Note: This page was created for GSAP version 2. We have since released GSAP 3 with many improvements. While it is backward compatible with most GSAP 2 features, some parts may need to be updated to work properly. Please see the GSAP 3 release notes for details. Making a DOM element draggable isn't terribly difficult - there are jQuery plugins and even some native HTML5 capabilities in newer browsers. But generic dragging is kinda boring. What about smooth, natural momentum-based continuation after the user releases the mouse (or touch on mobile devices)? What about imposing bounds and edge resistance and silky-smooth redirection to certain landing values that you provide? Or flick/drag scrolling with bounce-back that doesn't look awkward? Or instead of dragging to change the position of an element, what if you want to spin it? Maybe you even want to track the momentum and let it come to rest naturally or rig it to glide to a stop at a certain value, Wheel-of-Fortune style? Yeah, that's a lot more complex. In fact, it can be a real drag to build (sorry, the pun was irresistible). Draggable makes it remarkably simple. More importantly, it delivers a very fluid user experience on both mobile devices and desktop browsers. Instead of explaining what makes Draggable so special, we built an interactive demo that showcases some of its talents. There are even code samples that update as you change the options. Go play around and have some fun. View Demo
  17. Hi guys, firstly, let me thank you for this fantastic animation platform. Discovering it was simply jaw-dropping experience that changed my life as a developer. I am now playing around with page that will have multiple animations triggered on particular scroll position. I decided to not use any parallax plugins that work on mobile, because they appeared to be slow. Basically, I want to animate some DOM elements when they come in to the view. I tested it in all browsers and it works fine, even on iOS, but sometimes it is acting a bit weird. I have problems only on iOS. I haven't tested any android, i don't have any. When you scroll slowly to the desired element, it animates just fine. But sometimes when you scroll faster, it appears in final position, but without an animation. Sometimes just part of an animation happens. I would like to understand whats going on there. Can you help me please, or at least point me to the right direction? I am using latest version of GSAP, tested on iPhone 4 with iOS 6.1.3 and iPad 3. I was able to recreate the issue on iOS simulator as well. I am attaching example code. Many thanks! scrolltest.zip
  18. I'm trying to use Superscrollorama to animate some stuff on a webpage. The content only animates inside a specific div on the page, so I want the user to be able to scroll the page normally until that section is reached, then pause the page scrolling while keeping the scrollable animation. Once the animation has completed, they would continue scrolling down the page. I've tried using the pin functionality, but my div that contains the animations stays put while the rest of the page still scrolls. So I set it to pin the whole content of the page, and adjusted the offset so it wouldn't start until the user got to the animated section. This seems to be the right direction, but when I get to that scroll point, it jumps me back to the top of the page for some reason. If I jerk the scroll bar down past that point it seems to sort of work. Here's my code I have thus far: var controller = $.superscrollorama(), animatedContent = $('#content'); controller.pin(animatedContent, 1000, { anim: (new TimelineLite()) .append( TweenMax.to($('#water_color'), .5, {css:{height:0}}) ), offset: 400 }); And the HTML looks like this <body id="whats_new" includeLocalCSS="true" includeLocalJS="true" class="innovation reflex wide"> <section class="hero_area"> <div class="image_background"> <img src="fake.jpg"> </div> <div class="hero_overlay"> <div class="container_12"> <section class="demo top_blue_border grid_12"> <div id="animated_content"> <div id="text_intro" class="animation_copy"> <h2 class="type-light">Engineered to<br>Move with You</h2> <div class="top_blue_border"></div> <p>blah blah</p> </div> <div id="water_color"> <img id="blue_bar" src="sample.png" alt=""> </div> <div id="base_image"> <img src="sample.jpg"> </div> </div> </section> </div> </div> </section> </body> The animated content div is where the animations actually happen and are about 600 pixels down the page.
  19. I have created a sample for it: http://codepen.io/vincentccw/pen/vLIGh If you look into my javascript panel I have 2set of codes, one using jquery and GSAP another is just jquery(comment out). The code will be active once use scroll down using mouse wheel. My question is how do I use scrollTop but completely in GSAP? As I think GSAP is more readable and animate faster and most importantly I can set up more complex animation at the same time.
  20. Frans

    disable reverse

    Hello, i am new to superscrollorama. I want to disable an animation when you scroll up. I found the code on the website but it doesn't work for me: The 5th parameter is reverse, which you can use to disable reverse animation. controller.addTween('#fade', TweenMax.from($('#fade'),.5,{ css:{opacity:0}}), 200, false); // prevent backwards animation of the element What am i doing wrong? Frans
  21. Hello again, I'm now moving on to the menu. How do I setup the menu (styled it etc..), so what I want is that once you click on a menubutton it auto scrolls down to that page/section. And my question is. How do I do that? Because when I look at the demo of this I don't see any demo with an actual functioning menu. There is a lot about effects and animations, but nothing in it about how to make all of that work with a navigation also. Does anyone got some kind of tutorial on 'How to make a menu that scroll to page/section'? Maybe there is a tutorial somewhere that I have missed?
  22. Hi all! Today I was trying to execute some instructions on manual scroll event, avoiding the scroll animation performed by TweenMax. I attempted to initialize a boolean variable, which is false during the TweenMax animation and is restored to true "onComplete". On $(window).on("scroll") I checked the status of the variable. I found out that a scroll even was triggered even when my status variable was already returned to true: after some tests, it turns out that it's TweenMax itself. I tried on an empty page, reporting the following code in Firebug console, and looks like after the "hi" reported by TweenMax onComplete, another scroll event is triggered. $(window).on("scroll", function(){console.log ("scroll");}); TweenMax.to(window, 1, { scrollTo: { y: 500 }, ease: Linear.easeNone, onComplete: function () { console.log("hi!"); } }); I wouldn't expect this behavior: why does this happen? Thanks in advance! Massi
  23. Hello! First of all: Thank you for your great work! I`m trying to move a dynamic TextField from the bottom of the screen to the top and it works. It runs nice and smoothly on my PC. The problem starts when I run the .swf on a target, which is not as powerful as my developement PC. The text animation becomes quite choppy. I tried several things (cache text as bitmap via BitmapData, using TweenLite and now using BlitMask) to improove the performance and I could manage to get 11-12 FPS on the target hardware. That`s "ok".. but it would be nice to squeeze out some more FPS. Globally I define a Blitmask: var txtMask:BlitMask = null; I initialize it: txtMask = new BlitMask(txtMessage, 0, 680, movieWidth, textAreaHeight,true); ...and start the animation: txtMessage.text = msg; txtMessage.y = movieHeight; txtMessage.height = txtMessage.textHeight + 4; txtMask.update(null, true); TweenLite.to(txtMessage, Number((txtMessage.height + textAreaHeight) / textScrollSpeed), {y:(movieHeight - textAreaHeight - txtMessage.height),onComplete:onTextScrollFinish, ease:Linear.easeNone,onUpdate:txtMask.update,useFrames:false,immediateRender:true}); I also tried to tween the scrollY attribute of the BlitMask, but this didn't change anything (as expected). So I guess I just wanted to ask if someone has an idea how I could further inprove the performance of the TextField animation. Would it help to try the ThrowProps plugin? Thank you for your time
  24. 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.