Jump to content
Search Community

Draggable seems to prevent transform-translate from working

bm1967 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

 

I'm interested to understand why when using Draggable it prevents me from using transform:translate(x,y).

 

 

Click on the button, the element moves to the right. Uncomment Draggable and clicking on the button has no effect.

 

I've provided a Codepen example and would be very grateful if anyone can show me a way where both can used together.

 

Many thanks in advance

 

 

See the Pen JGLqQR by _d_v_ (@_d_v_) on CodePen

Link to comment
Share on other sites

Hi Diaco

 

Thanks for your reply.

 

I was aware .set was an option, although I was interested to understand why the CSS transform:translate had stopped working.

 

What's going on behind the scene that prevents this and are their any CSS/JS options open to facilitate this?

 

Thanks :-)

Link to comment
Share on other sites

Thanks for the great demo! Wish everyone could reduce their issues so clearly.

 

What's happening behind the scenes is that in order for Draggable to to work it needs to take control of .box so that no "outside forces" can mess with it's internal calculations for bounds, hitTest() and other things. As soon .box becomes the target of a Draggable it has inline styles applied which are more specific than your .repos class in your stylesheet.

 

Take a look at what dev tools shows you. In this image you will see that the .repos styles are overwritten by Draggable's inline styles.

 

http://prntscr.com/9vj2ii

 

Does that help?

  • Like 4
Link to comment
Share on other sites

Just to add to Carl and Diacos's great advice!

 

In CSS if for some reason you want to override inline styles on the tag, like Carl explained above. Then you would use the CSS !important declaration. But keep in mind that it should only be used as a last resort and if you really don't want inline styles on your tags to be overridden.

 

https://developer.mozilla.org/en-US/docs/Web/CSS/Specificity

 

Also i noticed that you had a typo in your CSS for webkit, it should be -webkit- for the proper vendor prefix

.repos {
  -webkit-transform:translate(300px,0);
  transform:translate(300px,0);
}

And with the !important declaration it would be used like this:

.repos {
  -webkit-transform:translate(300px,0) !important;
  transform:translate(300px,0) !important;
}

Hope this helps, and Happy Tweening!

 

:)

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