Jump to content
Search Community

Tweening a box on a draggable & ThrowPropsPlugin site...

rickideeuk 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 there!


Here's a codepen for what I want to achieve, hopefully someone can help me...

See the Pen oshwG by rickideeuk (@rickideeuk) on CodePen


The draggable elements are all working just as I want them, but I want to add a text link in each box that when clicked will make that box move off to the side of the screen, out of the way so that just the top part is showing (like a tab) (see attached pic to see what I mean, box3 text link has been clicked and so the box moved down to the bottom left). This top part is then still draggable back onto the main canvas to dragged/thrown again.


In the JS section of my codepen you can see in the top part of the code that I've tired to make this happen with Box3 by adding this code...

TweenLite.set("#box3", {left:100, top:200});


but if you click on the Box3 text link this just makes the box jump the amount of pixels stated in the code and then it only works once.


So is it possible to make it tween off to the bottom/right of the page, no matter what the size of the screen is AND then if dragged back into the screen make it possible to do again and again???


I hope that all makes sense, many thanks in advance





Link to comment
Share on other sites

Hi Richard,


Thanks for providing both the codepen and the image, helps identify the issue a lot quicker.


There are two things going on here. First you're tweening the top/left properties with the tween, and with Draggable you're modifying x/y, so once you click on the link it'll change the values of those properties, but when you drag the element those values will remain the same.


Second you have to consider the size of the container, in order to know how much the element has to move. You also need to get the element's initial offset in order to calculate the new position for the click event:

var newX = $("#container").width() - $("#box3").offset().left - $("#box3").width(),
    newY = $("#container").height() - $("#box3").offset().top - $("#box3").height()/2;

$( "#movetwit" ).on('touchstart click', function() {
 TweenLite.set("#box3", {x:newX, y:newY});

You can see it working here:


See the Pen yFrJI by rhernando (@rhernando) on CodePen


Also if you're pointing to devices, you will have to calculate those values on every window resize. There are a few methods for that, media queries for example, but the most reliable is the resize event, for more on that check this article:





  • Like 2
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...