Stack/pile dropped elements

[Rawland_Hustle 2 Likes (Newbie)]

10 minutes ago, ZachSaucier said:

You could use a gsap.to(".coin", {x: 0, y: 0}) to animate it  

I haven't had time to try this yet but I'm pretty sure it won't work since that's pretty much how it's setup right now: gsap.to(this.target, 0.5, {x: 0, y: 0, ease: Bounce.easeOut});. The problem is that {x: 0, y: 0} now refers to the top left of the SVG/viewport and not the coins initial position. This because I use translate() to position the coins as you suggested.

[ZachSaucier 7,070 Likes (Superhero)]

26 minutes ago, Rawland_Hustle said:

I'm pretty sure it won't work

It works in the demo I posted above.

[Rawland_Hustle 2 Likes (Newbie)]

2 minutes ago, ZachSaucier said:

It works in the demo I posted above.

That's because you used a version of the pen before I switched to your way of positioning the coins (with translate()).

 

Earlier:

<g id="coin1" class="draggable coin" number="1" weight="2">
  <circle cx="159" cy="60" r="10" fill="#FFFA8D" stroke="#000" id="svg_4"/>
  <text x="159" y="65" text-anchor="middle" fill="black" id="svg_5">1</text>
</g>

gsap.to("#coin1", {x: 0, y: 0}); moves the coin to {x: 159, y: 60} which is the correct position for this coin.

 

Now:

<g id="coin1" class="draggable coin" transform="translate(159, 60)" number="1" weight="2">
  <circle r="10" fill="#FFFA8D" stroke="#000" id="svg_4"/>
  <text y="5" text-anchor="middle" fill="black" id="svg_5">1</text>
</g>

gsap.to("#coin1", {x: 0, y: 0}); moves the coin to {x: 0, y: 0} which is the incorrect position for this coin.

[OSUblake 18,400 Likes (Superhero)]

7 minutes ago, Rawland_Hustle said:

gsap.to("#coin1", {x: 0, y: 0}); moves the coin to {x: 0, y: 0} which is the incorrect position for this coin.

 

Then save the original position, and move back to it.

[ZachSaucier 7,070 Likes (Superhero)]

10 minutes ago, OSUblake said:

Then save the original position, and move back to it.

This.

 

This should do it for you.

var initPositions = [];
var coins = document.querySelectorAll(".coin");
function getInitPositions() {
  for(let i = 0; i < coins.length; i++) {
    initPositions.push({x: gsap.getProperty(coins[i], "x"), y: gsap.getProperty(coins[i], "y")});
  }
}

getInitPositions();

document.querySelector("#reset").addEventListener("click", () => {
  for(let i = 0; i < coins.length; i++) {
    gsap.set(coins[i], initPositions[i]);
  }
});

Or use another container <g>. That way you don't have to worry about the original position.

[Rawland_Hustle 2 Likes (Newbie)]

2 minutes ago, OSUblake said:

 

Then save the original position, and move back to it.

Do you mean I should save all the coin's initial positions in a javascript array and use it to whenever I need to move a coin back to it's original position? That would work, but is there really no way of telling GSAP to move an element to coordinates in relation to the SVG/viewport?

[Rawland_Hustle 2 Likes (Newbie)]

2 minutes ago, ZachSaucier said:

This.

 

This should do it for you.

var initPositions = [];
var coins = document.querySelectorAll(".coin");
function getInitPositions() {
  for(let i = 0; i < coins.length; i++) {
    initPositions.push({x: gsap.getProperty(coins[i], "x"), y: gsap.getProperty(coins[i], "y")});
  }
}

getInitPositions();

document.querySelector("#reset").addEventListener("click", () => {
  for(let i = 0; i < coins.length; i++) {
    gsap.set(coins[i], initPositions[i]);
  }
});

 

Thanks alot! I guess this means that there is no way of telling GSAP to move an element to coordinates in relation to the SVG/viewport. That must be a common use case so maybe that's a improvement of GSAP to consider. Something like gsap.to("#coin1", {viewportX: 159, viewportY: 60}); would be great!

[OSUblake 18,400 Likes (Superhero)]

1 hour ago, Rawland_Hustle said:

That would work, but is there really no way of telling GSAP to move an element to coordinates in relation to the SVG/viewport?

 

Everything is in relationship to the SVG. There is no such thing as "relative" in SVG. I think you're getting confused by where something is drawn, and transforms like translate. 

 

There's a bunch of different ways you can save stuff, like as an attribute,

<g id="coin1" 
   class="draggable coin" 
   transform="translate(159, 60)" 
   number="1" 
   weight="2"
   startX="159"
   startY="60">
  <circle r="10" fill="#FFFA8D" stroke="#000" id="svg_4"/>
  <text y="5" text-anchor="middle" fill="black" id="svg_5">1</text>
</g>

 

var coin1 = document.querySelector("#coin1");

// save as element property for faster access
coin1._startX = +coin1.getAttribute("startX");
coin1._startY = +coin1.getAttribute("startY");

// animate back to start
gsap.to(coin1, {
  x: coin1._startX,
  y: coin1._startY
});

 

 

 

[ZachSaucier 7,070 Likes (Superhero)]

5 minutes ago, Rawland_Hustle said:

there is no way of telling GSAP to move an element to coordinates in relation to the SVG/viewport.

GSAP is telling to move move an element to coordinates in relation to the SVG (and the SVG is positioned according to the document's flow, which is in respect to the viewport). That's exactly what it is doing.

 

5 minutes ago, Rawland_Hustle said:

Something like gsap.to("#coin1", {viewportX: 159, viewportY: 60});

GSAP can do that. But it depends on how the SVG is positioned, the type of positioning its parents have, the scroll position of the page, and other factors. So unless you're more clear about your exact use case and why the methods we've discussed aren't correct/are worse then what you're thinking of we can't really help more.

[Rawland_Hustle 2 Likes (Newbie)]

@ZachSaucier @OSUblake

I guess this is over my head. I'll just store the initial positions in an array as you suggested

Thanks for helping me out guys!

[Rawland_Hustle 2 Likes (Newbie)]

@ZachSaucier @OSUblake

I'm going to implement your suggested solution of storing the starting positions as attributes but I am not familiar with the syntax you're using. Can you point me to a documentation of the concept of the plus signs in the code below?

 

var coin1 = document.querySelector("#coin1");

// save as element property for faster access
coin1._startX = +coin1.getAttribute("startX");
coin1._startY = +coin1.getAttribute("startY");

// animate back to start
gsap.to(coin1, {
  x: coin1._startX,
  y: coin1._startY
});

 

[OSUblake 18,400 Likes (Superhero)]

55 minutes ago, Rawland_Hustle said:

Can you point me to a documentation of the concept of the plus signs in the code below?

Not really. It's just knowing how JavaScript works. Attributes are always a string, and the + operator is just a shorthand way to convert a string into a number. It similar to using Number or parseFloat, although there are slight differences between each method.

 

So these all do pretty much the same thing.

coin1._startX = +coin1.getAttribute("startX");
coin1._startX = Number(coin1.getAttribute("startX"));
coin1._startX = parseFloat(coin1.getAttribute("startX"));

 

But @ZachSaucier's code reminded me of the new gsap.getProperty() method, so I think this is a better way to create an array of coins.

 

See the Pen 44b6e5f8df0990e257005f23642949d6 by osublake (@osublake) on CodePen

 

 

If you need help figuring out positioning, this post might help you.

https://greensock.com/forums/topic/13681-svg-gotchas/page/2/?tab=comments#comment-72060

 

 

 

[Rawland_Hustle 2 Likes (Newbie)]

2 hours ago, OSUblake said:

...the + operator is just a shorthand way to convert a string into a number.

 

Thanks! I didn't know that. I found a tutorial about it: https://www.javascripttutorial.net/javascript-unary-operators/.

[OSUblake 18,400 Likes (Superhero)]

Nice find!