Jump to content

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


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

I have a piece of text inside a panel and I'm using the draggable plugin and it works beautifully....


Within the text I have chapter points, and in another div on the panel i have links to those chapter points which when you click do a TweenMax of the scrollTop to the correct position.


This is all working perfect on the desktop... but on iPad... the links just aren't clikcable... I've tried adding

dragClickables:false to the draggable panel that it's sat  but just not triggering the click...


I thought it might jet not be doing the scrollTop tween... but i put a log in and it's not even seeing the click...


So my question is how do i make links clickable in a div that is sat in a draggable div?

Is there a command I'm missing... or should i put an invisible panel behind the clickable text and allow that to be draggable (which in turn affects the main panel and makes it move)?



Link to comment
Share on other sites

Hello and welcome to the GreenSock Forums!


If possible could you provide like a limited

See the Pen by pen (@pen) on CodePen

or jsfiddle so we can better help you and see your code in context, in a live editable environment. Or a link to your webpage that is giving the issue.


Thx :)

Link to comment
Share on other sites

Have you tried adding the attribute data-clickable="true" to your links and seeing if that changes anything?


Also make sure you have the latest version of the Draggable and TweenMax files.


Other than that, an example like Jonathan has mentioned would be handy.

Link to comment
Share on other sites

Thanks for the replies... I managed to make it work by using href's rather than javascript clicks.... probably not the best way to do something by just avoiding the issue!


I struggle a bit with code pen, as to where to put the various links to .js files... is there a boilerplate of a standard green sock set up that people use as a starting point.



Link to comment
Share on other sites

Hi Mimeartist_payed!,


For creating a Draggable Codepen this demo is loaded up and ready to fork:



For 99% of other GSAP tools, you can just 


1: create a new pen

2: open the js panel (click on gear icon next to JS)

3: in the external js field start typing TweenMax and they have an auto-complete feature that will allow you to select the TweenMax.min.js file from cdnjs.com


We plan on creating a very short "getting started with Codepen" video so that everyone will be able to use it hassle-free. I think you will find that it is an incredible tool for prototyping and especially for receiving quick and collaborative support from the GreenSock community.

Link to comment
Share on other sites

Carl beat me to it... :)


He are the steps for creating a codepen pen:

  1. go to http://www.codepen.io/pen/
  2. under the JS panel you will see a gear icon, click it
  3. select a JavaScript library if needed from the dropdown
  4. enter the TweenMax script path in the External JS File or Another Pen input:
  5. add your HTML, CSS, and JS into the right panels
  6. click Save
note.. you can find the GSAP script paths on the top of this page in the top of the left sidebar Titled get GSAP
does that help?
  • Like 1
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.