Jump to content
GreenSock

Search In
  • More options...
Find results that contain...
Find results in...
Rawland_Hustle

Stack/pile dropped elements

Recommended Posts

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.

Link to comment
Share on other sites

26 minutes ago, Rawland_Hustle said:

I'm pretty sure it won't work

It works in the demo I posted above.

Link to comment
Share on other sites

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.

Link to comment
Share on other sites

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.

Link to comment
Share on other sites

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.

Link to comment
Share on other sites

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?

Link to comment
Share on other sites

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! :)

Link to comment
Share on other sites

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
});

 

 

 

  • Like 1
Link to comment
Share on other sites

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.

Link to comment
Share on other sites

@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
});

 

Link to comment
Share on other sites

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

 

 

 

  • Like 1
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.
×