Jump to content
Search Community

Draggable dragClickables:true does not work since 2.1

andreas84 test
Moderator Tag

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

 

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 comment
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 comment
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 comment
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 comment
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 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.
×
×
  • Create New...