Rawland_Hustle

@ZachSaucier I went for Inkscape.

Okay, I thought there maybe was a plugin or something for creating elements. Can you recommend a good, free app for creating SVG buttons and text which I then can manipulate with GSAP? I don't know how to save the SVG in my Codepen so it would be great if I could import my existing SVG code to the app.

I'm using GSAP to create a problem solving game where the user drags coins in to bowls of a balance scale and weighing them by pressing a button. The user should be able to read some instructions before the game and some other instructions during the game. Different text elements should change when pressing the button for weighing. After 3 weighs the game should stop and user should somehow submit which coin he/she think is heavier or lighter than the rest. Maybe by dragging a coin to a "submit area" and somehow entering if it's heavier or lighter. Is this something that should be done with HTML, or can it as well be done within the SVG? In the latter case, is there a straight forward way of doing it with GSAP? Thanks!

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

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

@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!

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!

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?

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.

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.

What do you mean?

Thanks! I'm almost done with this little project. Thanks alot for your help!

@ZachSaucier I have changed my setup to the one you suggested and I just noticed a challenge with it. Sometimes a coin needs to be moved back to it's original position, which now is x:0, y:0 since I use translate() to position the coins. How can I move a coin back to the coordinates within the initial translate()? I.e. move coin1 back to x:159, y:60?

Thanks!!! Is there a way to move an element say, 30 px on the X axis, from it's current position? I found the answer to this question: {x: "+=30"}.

What I'm trying to understand is how to define which reference to use for a certain element. In my current setup, each coin is a group with id's coin1, coin2, coin3 and so on. These "coin-groups" consists of a circle and a text element, which have their own coordinates in reference to the global SVG space. How would you change my current setup below in order for the the coin-group to carry the coordinates in reference to the global SVG space, and the circle and text elements to carry the coordinates in reference to the their parent coin group? <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>

How do I use SVG coordinates for the locations to go to? Thanks!

I have found the coordinates I want the coins to go to. The problem is that GSAP interprets x: 0, y: 0 as the dragged coin's initial position. How can I tell GSAP that it should interpret x: 0, y: 0 as top left of the viewport? Got ya! ?

@ZachSaucier Should I use getBBox() to get the current x/y-values of the element when it's dropped and subtract the x/y-values of coords[0]? Edit: Apparently getBBox() returns the element's original position, not it's current position . It doesn't matter though. Is getBBox() the way to go?

@ZachSaucier I didn't know about Canvas. Do you recommend that I start all over with either Canvas or HTML? Could you please give me a short example of moving an element to user defined coordinates with GSAP? Any coordinates will do. Like, okay, I've defined the coordinates in a array as you suggested: var coords = [{x: 10, y: 20}, {x: 15, y: 20}, ...];. How do I move my dragged coin (this.target) to the first set of coordinates (coords[0])?

I'm totally new to SVG so I have no idea how one defines coordinates. Can't I just move an element (a circle/coin in the case) to some coordinates of the viewport somehow? What would a non-SVG setup be, HTML? Can I animare the scale the way I've done (press buttons at the bottom) in HTML?

Is there any documentation of predefined positions? I can't find any. I've been looking at several physics engines for svg/js but couldn't find one that worked with existing svg elements or wasn't too complicated. Can you suggest a physics engine? Thanks!

Thank you! And thank you for replying. I think the biggest challenge is to prevent the coins (circle elements) from overlapping. They might even have to collide and bounce off of eachother, since the user should be able to take a coin from the bottom of the pile and drag it away. Is there a plugin for this? If not, I might have to abandon the idea of dragging and dropping the coins.

Hi! I'm trying to build an interactive balancing scale where the user can drag and drop 12 coins in the bowls in order to have the scale tilt left or right (this is for a puzzle for which I will apply the logic/math at a latter stage). The svg-image has a hidden rectangle - a "drop area" - just above each bowl. I register which "drop area"/bowl a coin is dropped into. If a coin is dropped outside of the "drop areas"/bowls, it goes back to it's initial position. The parts/requirements I need help with: When a coin is dropped in a "drop area" I want it to fall down and land on top of the bowl below (not keep falling out of bounds like it does at the moment). Each bowl should be able to contain anywhere from 0 to 12 coins and the coins should somehow stack/pile up in the bowl (coins cannot overlap because the user needs to see each coin's number). A stack should some "unstack" or "unpile" when the user drags a coin away from it. Any ideas or suggestions on how to solve this would be highly appreciated!