Jump to content
GreenSock

Rhaffaele

Draggable

Recommended Posts

Hi, what are we supposed be looking at? Nothing is moving in the sample you provide and nothing can be dragged as well.

 

Please create a reduced sample that points out just the issue you're having in codepen so we can take a better look:

 

Happy Tweening!!!

 

  • Like 2
Link to comment
Share on other sites

I don't understand why it doesn't work for you.  It works for me. Can you see the image of the woman? I tried to upload it to codepen but I can't insert images, I should do it again with the box instead of images.

Link to comment
Share on other sites

From the link you provided I'm seeing this:
p8GE6Qk.jpg

 

In the index page appears a picture of a woman but there is nothing draggable there neither.

 

Regardless of the content the codepen sample allow us to take a look at your code, play with it and try to figure and solve any possible issues.

Link to comment
Share on other sites

I replaced the dragable images now it should work.
I did this code pen, if you drag the first image to target two go back with an animation, if you do it the second time the animation is different, but it should be the same.

See the Pen oNNJjQy by rha-elettronica (@rha-elettronica) on CodePen

Link to comment
Share on other sites

Just remove the position parameter in the drag end callback:

onDragEnd: function(e) {
  $("#drag1").removeClass("invisible");
  if (this.hitTest("#target2", "30%")) {
    tl
      .to(box, 0.1, { rotation: 15 })
      // in this instance no position or repeat delay
      .to(box, 0.1, { rotation: -15, repeat: 2, yoyo: true })
      .to(box, 0.1, { rotation: 0 }, "+=0.1");
    TweenLite.to(e.target, 0.2, { x: 0, y: 0, top: 0, left: 0 }).delay(0.5);
  }
  if (this.hitTest("#target1", "30%")) {
    TweenLite.to(this.target, 0.6, { opacity: 0, scale: 0 });

    TweenLite.to("#drag1", 0.6, { opacity: 1 });
  } else {
    TweenLite.to(e.target, 0.1, { x: 0, y: 0, top: 0, left: 0 });
  }
}

It seems that the position parameter is messing things up after the first run, also I don't see the need to state a repeat delay of  0 seconds, that is basically the default.

 

Finally you're using the same method on all the drag end callbacks, you can easily create one method and pass it directly to the callback. Take a look at this:

 

https://www.drycode.io/

 

Happy Tweening!!!

  • Like 3
Link to comment
Share on other sites

Thanks so much now it works.
you are right, better to group and keep the programming dry. But it's not easy and I'm a beginner. During the week I will try to fix it

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