Jump to content


Draggable and Scroll TextBox contenet and MovieClip Content

Warning: Please note

This thread was started before GSAP 3 was released. Some information, especially the syntax, may be out of date for GSAP 3. Please see the GSAP 3 migration guide and release notes for more information about how to update the code to GSAP 3's syntax. 

Recommended Posts

Hello ,


I managed to find solution to drag content of TextBox up and down but its not stable . once you hold down the scroll-bar and start dragging its working but if u leave the scroll and try to do it again its not working


Can i use GreenScok draggable to do that professionally ? I really feel sad i bought green-sock membership thinking that draggable will work fine but its been few days no success


this is the example code i hope someone with experiance can guide me how to drag content inside Movie Clip at the stage using same concept " am using Adobe animate cc Canvas Project is attached .



tl = this;


function linesOfTextF(n){
    for(var i=0;i<n;i++){
        tl.TextBox.text += 'this is line '+i+'\n';

paramF(0, 48, 146-20 , 48+146-tl.TextBox.getBounds().height);

function paramF(x1,y1,x2,y2){
    tl.m = (y1-y2)/(x1-x2);
    tl.b = y1-tl.m*x1;


function startdragF(e){
function stopdragF(e){

function dragF(e){
    if(e.stageY>=48 && e.stageY<=48+146-20){
        tl.TextBox.y = Math.floor(tl.m*tl.sb.thumb.y+tl.B);








Link to comment
Share on other sites

Sorry to hear you are unhappy with your Club GreenSock purchase.

As I tried to explain in your other post: https://greensock.com/forums/topic/15822-adobe-animate-cc-draggable-and-sortable-datagrid-with-scrollpane/, 

Draggable was only intended to work on DOM elements not with the HTML5 <canvas> (Animate CC, createJS, etc).


Although folks like Blake may find some clever ways to make it work, It really is not the right tool for the job and it isn't reasonable for us to spend a lot of time trying to find a way to make it work in a way that it wasn't intended to. Perhaps as demand for Animate CC tools grows we will consider that sort of tool, but it isn't something that we see as a priority any time soon. We have a lot to do to meet current market demand.


In your other post you linked to a demo from zimjs. I haven't used those tools at all but it seems like that tool would be a better fit for what you want to do.


Just so you know, Draggable is one of the tools that doesn't require a Shockingly Green purchase. Its available to all via the public downloads or CDN.

<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/1.19.1/utils/Draggable.min.js"></script>

We truly want everyone to be happy with GreenSock tools. I'm sorry Draggable wasn't the tool you thought it would be. We will gladly offer a refund, just let us know.

  • Like 2
Link to comment
Share on other sites

I saw the message you sent me, but I honestly don't know my way around AnimateCC or Easel.js, so I wouldn't be of much help


And like Carl said, Draggable is designed to work only with DOM elements, not canvas. I've come up with ways to get Draggable to work with different canvas libraries, but those are mostly for special cases, like when I need to drag a DOM element into a canvas element. I know my way around Pixi, so I know what methods to call to make it happen, but there is still a conversion process needed as the coordinates a canvas library uses might not be the same as the coordinates Draggable is using.


Your best bet is to just the built-in methods Easel provides for you. I'm sure you could probably get zim.js working nicely with it as it also uses Easel.

Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
  • Recently Browsing   0 members

    • No registered users viewing this page.