Jump to content
Search Community

Draggable rotate and transform at once

Oleg 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

[Draggable pugin] Is it possible to use one target to rotate the object and another one to move it around?

 

started previously on github https://github.com/greensock/GreenSock-JS/issues/49#issuecomment-46522985

 

jackdoyle  Could you please guide me how to apply rotation on the already translated object onDrag? This is the last issue that I need to solve before buying Business license, really appreciate your help!

Link to comment
Share on other sites

Hi and welcome to the GreenSock forums.

 

It's a tricky scenario the one you describe, because if you create two Draggable instances on the same element, the final one you create will overwrite the previous. For example if you create an instance to move the element and then another to rotate it, the one that rotates the element gains control over the element so it can be rotated but not moved and if you create the rotation one first and then a translation instance, the latter gains control over the first one.

 

I can't think of a way to create two instances on the same element, maybe create a second instance on another element and then using a onDrag callback use a TweenLite.set() instance to pass the values to the first element.

Link to comment
Share on other sites

Hello Oleg,

 

Maybe you could use the psuedo element :before or :after ..  And have GSAP animate the actual element.. and then another tween that animates the element:before or element:after selector. Try the CSSRulePlugin ..

 

Here is an example:

See the Pen hodHx by jonathan (@jonathan) on CodePen

 

My example shows how you can animate one element with two tweens. It doesn't have Draggable in it, but one tween animates the element and the other tween animates the generated content of the elements :before selector.

var rule = CSSRulePlugin.getRule(".myClass"),
    rule2 = CSSRulePlugin.getRule(".myClass:before");

TweenMax.set($(".myClass:before"),{rotation:0});

TweenMax.to(rule, 2, {
   cssRule:{ 
      backgroundColor:"#F43C09" 
   }, 
   force3D:true,
   yoyo:true, 
   repeat:-1
});

TweenMax.to(rule2, 2, {
   cssRule:{ 
      rotation:360, 
      backgroundColor:"#CC0000" 
   }, 
   force3D:true,
   yoyo:true, 
   repeat:-1
});

I wonder if you can attach the Draggable instance to the element and then have the element:before animate with rotation?

 

Does that help?

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