Jump to content
GreenSock

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

_gsTransform is undefined

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

Hi,

I am new to GreenSock and trying to use Draggable plug in of GreenSock.

 

I have added the JS libraries in following order

<script src="../../../js/jquery-1.10.1.min.js"></script>
<script src="../../../js/jquery-ui.min.js"></script>
<script src="../../../js/greensock/plugins/ThrowPropsPlugin.min.js"></script>
<script src="../../../js/greensock/TweenMax.min.js"></script>
<script src="../../../js/greensock/plugins/Draggable.min.js"></script>

My HTML code structure is as follows:

<div id="imageContainer">
	<div class="galleryImg"></div>
</div>

I completely flush #imageContainer  and add few elements, with class name galleryImg, to it dynamically.

 

To make the imageContainer draggable I added following code in my JS

Draggable.create("#imageContainer");

However, when I try to drag the element, an error is thrown and the element is not draggable. The error from FireBug is as follows:

TypeError: i._gsTransform is undefined

...},this.content=o,this.element=t,this.enable()},H=function(i,n){t.call(this,i),i

The error also occurs as soon as I click (mouseDownEvent) the  imageContainer.

 

Is there anything am I doing wrong over here ?

Which JS files do I need to add to use Draggable?

Where can I find standalone sample examples on how to use GreenSock plugins? (e.g. JQuery has this "View Source" link which can display full HTML to understand the whole example)

 

Please guide.

Link to comment
Share on other sites

Hi and welcome to the GreenSock forums.

 

Sorry to hear you are having problems. Not really sure why you are getting that error.

 

Here is a very basic example of Draggable http://codepen.io/GreenSock/pen/HtlFw

 

As you can see it it uses the same Draggable implementation as you and I'm just passing in the object to be dragged.

Draggable.create("#box")

It would be very helpful to see a very simple set of files that we can use to see this error. 

Can you reproduce it without using ThrowProps?

 

Please fork that codepen example and add what you need so that we can see the error you are seeing. Thanks

Link to comment
Share on other sites

Thank you very much for prompt response.

 

Please find the attached zip file which has a standalone HTML file. The draggable doesn't work in that and throws the described error.

 

I could also reproduce it without using ThrowProps.

 

Hope this helps to narrow down the problem.

draggableError.zip

Link to comment
Share on other sites

Thanks for attaching the files.

 

The error is because you are loading Draggable incorrectly. It is in the utils directory not plugins

 

BAD

<script src="js/greensock/plugins/Draggable.min.js"></script>

 

GOOD

<script src="js/greensock/utils/Draggable.min.js"></script>

 

Its an easy mistake to make. Should be working fine now.

Link to comment
Share on other sites

Thanks for pointing that. I was not aware that the files have to be in specific directories only. The code loaded all files

 

However, I have modified it as suggested but it didn't seem to solve the problem.

Attached is the updated HTML file.

 

Thanks.

 

p.s. How can I delete the previously added files so that I can upload modified zip file ? Is it a common practice on GreenSock forums ?

index.html

Link to comment
Share on other sites

Sorry, I didn't realize you had moved Draggable into plugins.

 

The first thing I do when troubleshooting broken files is I copy over the latest version of the GreenSock files. As soon as I did that and updated the path to Draggable everything worked fine.

 

I suggest you 

 

1) grab the latest GSAP files

2) maintain the same file structure that we use 

 

Please give that a shot. 

 

---

 

You should be able to edit your previous post and delete the attachments.

  • Like 1
Link to comment
Share on other sites

Thanks. It works like a charm.  :)

 

I believe my issue was that I was using older versions of the libraries and newer Draggable was not compatible with century old library versions.  ;-)

  • Like 2
Link to comment
Share on other sites

Great, glad its working now.

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