Jump to content
GreenSock

Search the Community

Showing results for tags 'scroll'.

  • Search By Tags

    Type tags separated by commas.
  • Search By Author

Content Type


Forums

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

Product Groups

  • Club GreenSock
  • TransformManager
  • Supercharge

Categories

There are no results to display.


Find results in...

Find results that contain...


Date Created

  • Start

    End


Last Updated

  • Start

    End


Filter by number of...

Joined

  • Start

    End


Group


Personal Website


Twitter


CodePen


Company Website


Location


Interests

  1. Sorry Im a new user of greensock . I want to achieve a 100% screenHeight scroll whenever user scroll until the trigger : ================================================================================ var tween7b = TweenMax.fromTo('#red2', 1, {y: "100%"}, {y: "0%", backgroundColor:'#C74A00', ease: Linear.easeNone}); var tween7c = TweenMax.to('#red2', 1, {y: "-100%", backgroundColor:'#C74A00', ease: Linear.easeNone}); new ScrollMagic.Scene({triggerElement: "#trigger6e", triggerHook: 0.85}) .setTween(tween7b) .addTo(controller); new ScrollMagic.Scene({triggerElement: "#trigger6e", triggerHook: 0.45}) .setTween(tween7c) .addTo(controller) .addIndicators(); ================================================================================== Sometimes its work, but sometimes it failed. I guess its getting confused because of two TweenMax.fromTo affected the same ID ? how could I achieve what I want then? thankyou before
  2. Is there a feature in GreenSock that is similar to ScrollFire or Waypoint? I'm looking to add/remove classes to an element on scroll, and then animate children of that element based on new class assignment. I'm currently using the ScrollToPlugin.
  3. I have a movie clip that I want to drag "scroll left" in 650 pixel increments. I have a movie clip (mc1) that is 650x650px on the stage (embedded within this clip is a symbol (mc2) that is 3250pxs x 650pxs (divided into 5 images) I want to drag through mc1 in 5 swipes revealing each image (650x650) on mc2 //movie clip 1 Draggable.create(mc1, {type:"scrollLeft", edgeResistance:0.5, throwProps:true}); Could you help me with the code that I need to initiate this please, I just need a push in the right direction and away I'll go until the next hurdle. Learning heaps and loving it.
  4. I am doing my first GSAP animation (yay for me)! The div containing the animation is below the screen when the page loads -- both on desktop and mobile. I don't want it to begin animation until the user scrolls to it. I want to verify that, in order to do this, I need to do something like the following: myTimeline.to('body', .5, {scrollTo:{y:250}}); with "250" being the distance of the div from the top of the page. Is this correct?
  5. Hi everyone, hope you are fine ! I come today with a new question about tweenmax. I have a earth to make rotate while the user is scrolling (position fixed). Then the earth has to transform in an other item. Well, after some research on your forum I discovered that you can have something fluent and nice with sprite sheets. and this function : TweenMax.to(obj, 0.2, {x: "-=1194px", ease:SteppedEase.config(3)}); Sooo I have 20 images in my sprite for a width of 7960px. The thing is, when I am rotating while scrolling, I can't do something like : x: "+= scrolling value". If I am not in good proportions the animation is broken. But in the meantime, if I scroll to a maximum position the animation has to be completed before transforming in an other object ! So I decided that each time I scroll, I will send 1194px to x, that correspond to 3 images. But, if you scroll very slowly you won't arrive in the next image's area before the end of spinning animation! Do you have some idea or tips of how I can synchronize tweenmax with a scroll ? I am hesitating about using scroll magic but I am afraid that it will use a huge amount of time to implement / masteries. EDIT: here is a codepen I made. http://codepen.io/anon/pen/VLJWrX
  6. I'm trying to repeatedly scroll items in a list. I have a container with 3 images all with float: left set on them. When the first element is animated, the second one stays in place, instead of moving. Relevant code here, complete example at: http://jsbin.com/tivupa/2/edit?html,output .slideshow { display: block; width:7300px; position: absolute; top: 200px; left: 0px; } .slideshow img { float:left;margin:0;padding:0; } <container> <div class="slideshow"> <img src="https://dl.dropboxusercontent.com/u/6801572/terrain.png" alt="" width="2400" height="305" /> <img src="https://dl.dropboxusercontent.com/u/6801572/terrain.png" alt="" width="2400" height="305" /> <img src="https://dl.dropboxusercontent.com/u/6801572/terrain.png" alt="" width="2400" height="305" /> </div> </container> TweenMax.to($(".slideshow img:first"), 10, {x:"-=2400px", ease:Linear.easeNone, onComplete: function(){ $(".slideshow img:first").insertAfter(".slideshow img:last");}}); Any ideas how I can get a continuous scrolling effect?
  7. Hello, I am trying to build a UI where two arrows – up and down – control the scroll position. The scroll element is a Draggable. var scroller = $('.scroller.draggable'); Draggable.create(scroller, { type:"scrollTop", edgeResistance:0.75, throwProps:true, onDragStart: function() { Draggable.get(menu).disable(); }, onDragEnd: function() { Draggable.get(menu).enable(); } }); $('.icon-arrow-down').on('click', function(event){ TweenLite.to(scroller, 1, {scrollTo:{y:$scope.yStart}, ease:Power2.easeOut, onComplete:updateYScroll}); function updateYScroll() { console.log(this.scrollY); //$scope.yStart = scroller.scrollY + $scope.yIncrement; } }); But when calling scrollY I always get undefined... Greetings, luneyard
  8. I touched on this in a previous posts but am still to find the perfect solution for mixing Draggable dragging/scrolling with native browser scrolling. 1. Open the attached Codepen 2. Emulate touch events - open Chrome inspector and emulate a device such as a Nexus 5 3. Alternatively view the Codepen on a device 4. Alternatively view the screen cap below Basically, you will see that it isn't possible to scroll the page vertically when the drag starts on the Draggable carousel (blue blocks). I've examined Draggable.js source code but I can't figure out where you the relevant scroll / touch event are being intercepted. Could you point me in the right direction? I know one work around is to use a second Draggable to control vertical scrolling but this isn't an option for us, we need native browser scrolling when scrolling vertically.
  9. Hi, Can I use greensock for continuous scroll upon keypress + hold Let say I want a page to scroll continuously arrow key down is pressed and stop when release I also checked the doc and faq section and I can't find instruction how to start using gsap. Do you have documentation on getting started? Thanks
  10. Does GSAP have built in scroll functionality to trigger animations or do I need to use another library such as ScrollMagic or Skrollr?
  11. I'm working on a site which will use like 7 slides in a kind of stair way. I was now trying to use Draggable for my navigation but I want to prevent the user to get lost. Since you can use type:x or type:y I thought I might get somewhere if I could change that type on the fly after Draggable.create. That doesn't seem to work. Maybe someone knows if that's possible or if I better can look for a solution based on a combination of tweens and scrollTo? To be clear an image attached of the layout. Every screen will cover the entire window.
  12. Is it possible to have natively vertical scroll elements within a horizontal Draggable element?
  13. 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
  14. I'm trying to set up my page such that my document's scroll behaves exactly like a 'scroll' draggable. What I'm really after is document scrolling that snaps to certain areas of the page, but with all the silky physics of Draggable — I basically want my scroll events to act just as if they were throws. For example, look at GreenSock's own "scrolly knob" demo. When the scroll area is dragged, or when the knob is turned, the scroll velocity is animated smoothly to a stop at one of the snap points. But when the content is manually scrolled by the user, there's no inertia or snapping. What I want is for mouse scrolling to behave just as the other scroll methods do. Any help with achieving this effect would be greatly appreciated!
  15. Hello, i just started using GreenSock and from the examples I'm very impressed Now i try to implement a prototype and have run into a problem. I have a div consisting of several divs laid out horizontally. This div is wider than the screen and i want it to move from left to right and back again. This i got to work. If the user starts scrolling manually, the animation should stop (works too) and the user should be able to scroll the div normally. Here is where i ran into a problem. Let's say the div scrolls to the left, then everything that goes offscreen is lost to the manual scroll and can't be reached. I'm not sure how to explain it, please see the attached codepen.io I'd be grateful for any advice. Kind Regards Nadja
  16. Hello, I can not figure out what would be the best way to accomplish this: I would liek to simulate a continous text scroll on mobile device. I made a PNG that has some horizontal lines which look like text paragraphs. I would like to move this PNG from bottom to top, simulating a scroll on mobile device. The animation runs in loop and I get an empty screen between iterations. I would like the same PNG to start moving into screen while the previous moves out so it looks like a continous scroll. What is the best way to animate this? Shold I use the same image twice on two separate tweens? Thank you. Alin
  17. Hey there everyone in the community, I am new here and firstly I gotta say to the GSAP Dev's...GREAT JOB, amazing plugin. But, even with its ease of use, I found it hard to aquire my desired effect. What I iam to accomplish, is to initiate a text animation I have used from your examples in the ZIP file, upon scrolling over the desired DIV. As it sits, GSAP uses: $(window).load(function() { to initiate the animations declared in the JS. Since I do not ant the animation to instantly start on page load, and I want it to start once scrolled over, this does not work for me. Now, I have tried the simple and powerful: $(window).on('scroll', function() { to try to reach my results. Hoever, even though it works upon scrolling over. It also works upon page load. Meaning, that lets say Im at the point of origin where the animations take place on the page. I refresh my page in that spot and the GSAP takes place right away. I move out of that space to another point on the page and scroll back to the animation area, and the letters in the animation are there as if the animation has finished (which it has because it still initiated on page load somehow) BUT then... the animation occurs upon scrolling over, but, get this...the animations from the scroll, take place underneath the completed animation that occured on page load. It is very hard to explain but you can evaulate my code below, and maybe help me to get the animation to only take effect when it is scrolled over. Here is my code: $(window).load(function() { var logo = $("#logo"), progressValue = $("#progressValue"), totalProgressValue = $("#totalProgressValue"), timeValue = $("#timeValue"), totalTimeValue = $("#totalTimeValue"), restartBtn = $("#restartBtn"), txtContainer = $("#txtContainer"), tl, progressSlider, totalProgressSlider, txt; /* Build DOM Elements*/ function splitText(phrase) { var prevLetter, sentence, sentence = phrase.split(""); $.each(sentence, function(index, val) { if(val === " "){ val = " "; } var letter = $("<div/>", { id : "txt" + index }).addClass('txt').html(val).appendTo(txtContainer); if(prevLetter) { $(letter).css("left", ($(prevLetter).position().left + $(letter).width()) + "px"); }; prevLetter = letter; }); txt = $(".txt"); } /* Build Timeline */ function buildTimeline() { //note this timeline uses 3D transforms which will only work in recent versions of Safari, Chrome, and FireFox. IE10 will support 3D transforms as well. All other browsers simply will not show those properties being tweened. TweenLite.set(txtContainer, {css:{perspective:500}}); tl = new TimelineMax({onUpdate:updateUI, repeat:2, repeatDelay:1, yoyo:true}); tl.from(logo, 0.5, {left:'-=60px', ease:Back.easeOut}); tl.staggerTo(txt, 0.6, {rotationX:"360deg", color:"858585", transformOrigin:"50% 50% 10"}, 0.02); } /* callbacks */ function updateUI() { //change slider value progressSlider.slider("value", tl.progress() *100); totalProgressSlider.slider("value", tl.totalProgress() *100); //update display of values progressValue.html(tl.progress().toFixed(2)); totalProgressValue.html(tl.totalProgress().toFixed(2)); timeValue.html(tl.time().toFixed(2)); totalTimeValue.html(tl.totalTime().toFixed(2)); } function init() { splitText("CONTACT US"); buildTimeline(); //show the demoBackground div after DOM is ready and all images loaded TweenLite.set($("#demoBackground"), {visibility:"visible"}); } init(); }); If anyone sees what I am doing wrong here, or can help...please do. I am not very new to JS or jQuery but am very new to GSAP. So any help is appreciated. Thanks in advance! EDIT: Here is my HTML: <div id="demo"> <h1 id="txtContainer"></h1> </div> </div> Thanks again! ~Jason of AJADMIN Websites
  18. 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
  19. GreenSock

    Draggable

    #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 InertiaPlugin loaded, you can simply set inertia: 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 InertiaPlugin)! 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 gsap.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. Demos Draggable Showcase Draggable How-To Demos See full documentation here. To get InertiaPlugin (for the momentum-based features), join Club GreenSock today. You'll be glad you did. If not, we'll gladly issue a full refund. To learn how to include Draggable and InertiaPlugin into your project, see the GSAP install docs.
  20. 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?
×