Jump to content
GreenSock

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

Draggable dragClickables:true does not work since 2.1

Recommended Posts

Hi

 

First post. I just updated to latest and greatest (2.1.1), i read in the release notes that dragClickables is default true by now. Cool I though, I already had that to true. But after updating the drags no longer work (on chrome 72) when starting on a clickable (<a>).

 

Reverted back to 2.0.2 and they work again.

 

//Andreas

See the Pen pYjQoJ by anon (@anon) on CodePen

Link to post
Share on other sites

Hi and welcome to the GreenSock forums,

 

Thanks so much for the clear demo. Very helpful.

We will have to look into this further. We will report back with what we find.

 

Sorry for the inconvenience.

 

 

  • Thanks 1
Link to post
Share on other sites

Aye fast work, thanks a lot! Confirmed working in above codepen using the beta link you provided. Might post something else today if I can make a codepen of it ;) 

  • Like 1
Link to post
Share on other sites

Hi,

 

for me dragClickables is still not working — neither in version 2.0.2 nor in 2.1.

 

I would like to have 2 images turn into a slider if the viewport is < 768px (see attached image).

The animation works fine, only the dragClickables doesn't have any effect. If my draggable item is an <a> tag it stops working.

 

The interesting thing about it is: If I copy-paste my code into a codepen (see below) everything works fine. But in my (Laravel-) environment it's not working (unless I turn the <a> into a <div> or something else).

 

I'm importing GSAP via NPM. I also tried to import the files from a local folder (not node_modules) but without success. Unfortunately I'm not able to use the beta-file Jack @GreenSock posted above — at least not by importing it as module.

 

I know it's hard to help me in my case since you would have to have look into my real project. But maybe anyone else encountered a similar problem and found a solution. ?

 

Thanks so much,

Robert 

 

P.S.: Quick note concerning the pen: you have to open it in codepen in order to drag the viewport to less than 768 px

 

See the Pen zbrJrj by rob83 (@rob83) on CodePen

 

DoubleImage_Teaser.jpg

Link to post
Share on other sites

I just pushed out GSAP 2.1.2 which has the Draggable fix in place. 

 

@robs, can you please update your GSAP and give it a shot? I tried your codepen and it seemed to work great. Perhaps I'm missing something(?) 

  • Like 1
Link to post
Share on other sites

Thanks, @GreenSock, now it's working.

Btw. the thing you missed was that the codpen was working for me as well. That was actually the strange thing: If I copy-pasted the code from the pen into my local project it stopped working.

But now it's all good.


Thanks again!

  • Like 1
Link to post
Share on other sites

Sorry, still have a little issue:

If I "throw" the content to the left and resize the window to > 768px the two images are shifted to the left (since the inline style still remains). You can reproduce that behavior in my codepen above.

 

I know customers usually don't resize their browser window back and forth but unfortunately there are some devices (like iPhone X) that exceed the 768px viewport width in landscape.

I fixed this very simply by resetting the transform property on window resize: 

window.onresize = function () {
    document.querySelector($content).style.transform = 'translate3d(0px, 0px, 0px)'
};

 

However now I have a different strange behavior: if I turn the screen back into portrait I'm able to dragged the content out of the container (see gif below). Looking at the properties in the dev tools I see that the transform property after dragging to the left is set to:

translate3d(-594px, 0px, 0px);

 

The maximum (and/or minimum) value should be translate3d(-279px, 0px, 0px) in case of the iPhone X.

 

Did I do something wrong by setting the transform-value on window resize? Is there a better (and waterproof) solution how to handle this?

 

Thanks so much!

Draggable-Error 3.gif

Link to post
Share on other sites

It's tough to say without a demo, but my guess is that the problem is you're re-defining the transforms OUTSIDE of GSAP (something we generally don't recommend). To maximize performance and avoid ambiguities in matrix decomposition, GSAP caches transform-related data (in a _gsTransform object attached to the element, created the first time you use GSAP to alter transforms on that element). 

 

So maybe try making this change in your onresize: 

//OLD:
document.querySelector($content).style.transform = 'translate3d(0px, 0px, 0px)'

//NEW:
TweenMax.set($content, {x:0, y:0});

 

If that doesn't help, please provide a reduced test case in codepen and we can take a peek. 

 

Cheers!

Link to post
Share on other sites

This solved the problem! Thanks again!

  • Like 1
Link to post
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.

×