Jump to content

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


  • Content Count

  • Joined

  • Last visited

Community Reputation

2 Newbie

About Rawland_Hustle

  • Rank
  1. 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.
  2. 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 th
  3. Thanks! I didn't know that. I found a tutorial about it: https://www.javascripttutorial.net/javascript-unary-operators/.
  4. @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 });
  5. @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!
  6. 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!
  7. 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?
  8. 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)"
  9. 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.
  10. Thanks! I'm almost done with this little project. Thanks alot for your help!
  11. @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?
  12. 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"}.
  13. 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="dra