Rhaffaele Posted November 17, 2019 Share Posted November 17, 2019 Hello can you tell me why the first time the rotation is complete and the second time not? http://www.mercuri-digital.com/Raffaele/ALAN9/test9.html Link to comment Share on other sites More sharing options...
Rodrigo Posted November 17, 2019 Share Posted November 17, 2019 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!!! 2 Link to comment Share on other sites More sharing options...
Rhaffaele Posted November 17, 2019 Author Share Posted November 17, 2019 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 More sharing options...
Rodrigo Posted November 17, 2019 Share Posted November 17, 2019 From the link you provided I'm seeing this: 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 More sharing options...
Rhaffaele Posted November 17, 2019 Author Share Posted November 17, 2019 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 More sharing options...
Rodrigo Posted November 17, 2019 Share Posted November 17, 2019 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!!! 3 Link to comment Share on other sites More sharing options...
Rhaffaele Posted November 17, 2019 Author Share Posted November 17, 2019 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 More sharing options...
Recommended Posts
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 accountSign in
Already have an account? Sign in here.
Sign In Now