Jump to content
Search Community

Shaman

Members

  • Posts

    21

  • Joined

  • Last visited

 Content Type 

Posts posted by Shaman

    hitTest & getDirection combination on draggable item

    in GSAP

    Posted

    Hi again,

     

    It's done with a minimal bug :

     

    See the Pen PobaZXx by Shaman1975 (@Shaman1975) on CodePen

     

    Sometimes the pictures jump back to the initial position instead of tweening and I don't find out why...

    I used your method @ZachSaucier and I'm happy with it if it wasn't for the bug. Any idea?

     

    Thank you so much for your time and effort @mikel but in your version something isn't working right.

    If you quickly hover over Oscar, he will not go back to his initial position but that's what I need.

    Whatever the user does and for how long, after a short time the image should move back to it's initial position.

     

    Kind regards,

    C.  

     

    hitTest & getDirection combination on draggable item

    in GSAP

    Posted

    Thank you @ZachSaucier & @mikel,

     

    I tweeked your idea a bit and for the "x"-animation, i'm quite happy.

     

    Also I tried to fix the: 

    Quote

    you should avoid getting the image offsets each time

    Hope that's ok now?

     

    But "y" is a not ok yet:

    • Actually, I think I need another formula for the "y"... (Similar to "x").

    Another thing I would like to achieve:

    • How would I reverse the animation after each move?

    See the Pen mdOLXbv by Shaman1975 (@Shaman1975) on CodePen

      

     

    Thank you again for your time and your help. 

     

    hitTest & getDirection combination on draggable item

    in GSAP

    Posted

    OMG Zach, I don't understand what you are saying. I'm really sorry. 

    So I try in my words:

    • Getting X & Y from draggable to each image - ok
    • Quote

      If the diagonal distance to the center is within a certain maximum

      Not sure if I understand how to test this. -> Maybe I really could use your help here

    • Animate the item in the opposite direction (In proportion to the distance) - somewhat ok but I think I can do it :-)

     

    hitTest & getDirection combination on draggable item

    in GSAP

    Posted

    Hi Zach. Thank you for looking into this matter and your time.

    My end goal is that the images should move away from the draggable and come back after a short time.

    That's already working but only in one direction...

    So if I push them from the right they should move a bit to left and come back and vice versa.

    And that for every direction. 

    hitTest & getDirection combination on draggable item

    in GSAP

    Posted

    Hi,

     

    In the following Codepen I try to 'push' the image elements into the direction the mouse (draggable can) came from.

     

    Actually I was wondering if there is a method to use the directions result from 'getDirection' ('right', 'up', etc. ) to use in my demo.

     

    Else it would take 8 "IF's" to determine the direction the image should move to. 

    Is that right?

     

    E.G.: 

    animation.to(shaker, {
      x: "+=50",
      duration: 0.4
    });

    would need to pass 8 tests to tell the animation where to move?

     

    I'm not sure if this is well explained. English's not my mother langage, sorry.

     

    Kind regards,

    C.

     

    See the Pen KKNoRzP by Shaman1975 (@Shaman1975) on CodePen

    Is Firefox the only browser for 'Draggable' to function properly? (Draggable "Toss" Demo)

    in GSAP

    Posted

    OMG!!!

    You will never believe but I've almost tears in my eyes!

    My Setup: 3 screens (2x27'' @1920x1080 1x40''@3840x2160)

     

    On 1 of the 27'''s this happens!! All the other screens/browsers work!

     

    Could confirm this on any screen? I'm going nuts. I can't even believe this myself.

    Even if I only take a tab and move it between the screens, it only works on the other 2.

     

    Is there any logical reason to this? I'm not halucinating :-)

     

    Is Firefox the only browser for 'Draggable' to function properly? (Draggable "Toss" Demo)

    in GSAP

    Posted

    Hi,

     

    After struggling for so long, I found out that my problem wasn't due to my fault:

     

     

    No matter what I try in Chrome, the mouse cursor won't change to 'grabbing' while dragging an object. Exaclty like in this codepen: 

     

    Runs flawlessly in FF.

     

    • Is there anything I miss?
    • Is this known or can it be confirmed by someone please?
    • Maybe there is already a solution to this?

     

    Thank you,

    C.

    See the Pen zDwEk by GreenSock (@GreenSock) on CodePen

    Grapping icon WHILE the user grabs and holds an image

    in GSAP

    Posted

    I did it 😀

     

    See the Pen gOLRZRx by Shaman1975 (@Shaman1975) on CodePen

     

    Thank you all for your support.

     

    HTML 

    <div class="can">
  <svg width="15" height="100vh" fill="none" xmlns="http://www.w3.org/2000/svg">

    <defs>

      <pattern id="droplets" width="15" height="21" viewBox="0 0 181 208" fill="url(#pattern)" patternUnits="userSpaceOnUse">
        <path d="M94 160.7C94 186.65 72.97 207.68 47.02 207.68C21.07 207.68 0.0400085 186.65 0.0400085 160.7C0.0400085 134.75 28.04 116.44 47.02 84C61.82 112 94 134.76 94 160.7Z" fill="#00A3FF" />
        <path d="M181 76.7C181 102.65 159.97 123.68 134.02 123.68C108.07 123.68 87.04 102.65 87.04 76.7C87.04 50.75 115.04 32.44 134.02 0C148.82 28 181 50.76 181 76.7Z" fill="#00A3FF" />
      </pattern>
    </defs>

    <rect width="100%" height="100%" fill="url(#droplets)" />

  </svg>

  <img draggable="true" id="gb03" class="gamebtn" alt="Watering Can" src="https://ga.chi.lu/wp-content/uploads/2021/02/watering-can.png" width="80" height="80">
</div>
<img id="grass" class="grasspng" alt="Grass" src="https://ga.chi.lu/wp-content/uploads/2021/02/grass.png">
</img>

     

    CSS 

    * {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
}

html,
body {
  padding: 0;
  margin: 0;
  height: 100%;
  -ms-overflow-style: none;
  scrollbar-width: none;
}

body::-webkit-scrollbar,
html::-webkit-scrollbar {
  display: none;
}

.can {
  position: relative;
}

#gb03 {
  position: absolute;
  top: 0;
  left: 0;
}

#droplets {
  visibility: hidden;
}
svg {
  top: 30px;
  left: -10px;
  position: absolute;
  z-index: -1;
}

.gamebtn {
  z-index: 2;
  width: 50px;
  height: 50px;
  margin-bottom: 5px;
}

.gamebtn:hover {
  cursor: pointer;
  filter: brightness(130%) drop-shadow(0 2px 5px black);
}

#grass {
  position: fixed;
  z-index: 1;
  transition: all 2s;
  transition-timing-function: linear;
}

     

    JS 

    window.addEventListener("load", function () {
  console.clear();
  gsap.set("#grass", {
    bottom: -40
  });
  CanAnim();
});
function CanAnim() {
  var tl = gsap
    .timeline({
      paused: true
    })
    .to(".gamebtn", {
      scale: 1.5,
      rotate: -25,
      duration: 0.25
    });
  Draggable.create(".can", {
    type: "x,y",
    activeCursor: "grabbing",
    onDragStart() {
      tl.timeScale(1).play();
      gsap.to("#droplets", {
        repeat: -1,
        duration: 0.1,
        autoAlpha: 1,
        ease: "none",
        attr: {
          y: () => "+=" + 21
        }
      });
    },
    onDragEnd(event) {
      var bottom = gsap.getProperty("#grass", "bottom");
      if (bottom != "0") {
        gsap.to("#grass", {
          duration: 0.3,
          bottom: "+=10"
        });
      } else {
        gsap.set("#grass", {
          bottom: 0
        });
      }
      tl.timeScale(2).reverse();
      gsap.killTweensOf("#droplets");
      gsap.set("#droplets", {
        autoAlpha: 0
      });
    }
  });
}

     

     

    Kind regards,

    Claude

    Grapping icon WHILE the user grabs and holds an image

    in GSAP

    Posted · Edited by Shaman
    Forgot the code :-(

    42 minutes ago, tailbreezy said:

    Maybe something as simple as that.

    Almost, because in my function, you have to repeat the process to make the grass actually grow :-) 

    function WaterDrop(event) {
  event.preventDefault();
  if (event.target.id == "grass") {
    console.log("Dropped " + event.target.id);
    var grass = document.getElementById("grass");
    var bottom = grass.style.bottom;
    var grow = "10px";

    console.log(bottom);

    if (bottom == "0px") {
      grass.style.bottom = "0px";
      document.getElementById("gb03").style.display = "none";
    } else {
      grass.style.bottom = parseInt(bottom, 10) + parseInt(grow, 10) + "px";
    }
  } else {
    console.log("Nope");
  }
}
    42 minutes ago, tailbreezy said:

     

     

     

    Grapping icon WHILE the user grabs and holds an image

    in GSAP

    Posted · Edited by Shaman
    Update

     Hello :-)

     

    1. I'm trying to get a grabbing icon while the user grabs and holds the Watering Can (Please see update).
    2. It would also be nice if the Watering Can would rotate down when hovering over the grass. (Done, please see update)

     

    • Would it be difficult to only use javascript? (I tried already a lot of things, also by attaching an image to the mouse and let it follow it. The cursor always get's standard...)
    • Would it be easier to use GSAP? (Setting it up, implenting it in my work? )

     

    Thank you for any advice,

    Kind regards,

    Claude

     

    UPDATE: The codepen and the code below was updated but the Grass still doesn't grow. Any idea why?

    UPDATE 2: The grass grows :-) The cursor still doesn't change to "grabbing" while grabbing the can.

    UPDATE 3: It seems to be a browser compatibility issue. Removed all the extra cursor code and it work fine in Firefox!  

     

    CodePen: 

     

    HTML (Latest Update) 

    <div class="can">

  <svg width="15" height="100vh" fill="none" xmlns="http://www.w3.org/2000/svg">

    <defs>

      <pattern id="droplets" width="15" height="21" viewBox="0 0 181 208" fill="url(#pattern)" patternUnits="userSpaceOnUse">
        <path d="M94 160.7C94 186.65 72.97 207.68 47.02 207.68C21.07 207.68 0.0400085 186.65 0.0400085 160.7C0.0400085 134.75 28.04 116.44 47.02 84C61.82 112 94 134.76 94 160.7Z" fill="#00A3FF" />
        <path d="M181 76.7C181 102.65 159.97 123.68 134.02 123.68C108.07 123.68 87.04 102.65 87.04 76.7C87.04 50.75 115.04 32.44 134.02 0C148.82 28 181 50.76 181 76.7Z" fill="#00A3FF" />
      </pattern>
    </defs>

    <rect width="100%" height="100%" fill="url(#droplets)" />

  </svg>

  <img id="gb03" class="gamebtn" alt="Watering Can" src="https://ga.chi.lu/wp-content/uploads/2021/02/watering-can.png" width="80" height="80">
</div>
<img id="grass" class="grasspng" alt="Grass" src="https://ga.chi.lu/wp-content/uploads/2021/02/grass.png">
</img>

     

    CSS (Latest Update) 

    * {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
}

html,
body {
  padding: 0;
  margin: 0;
  height: 100%;
  -ms-overflow-style: none;
  scrollbar-width: none;
}

body::-webkit-scrollbar,
html::-webkit-scrollbar {
  display: none;
}

.can {
  position: relative;
}

#gb03 {
  position: absolute;
}

#droplets {
  visibility: hidden;
}
svg {
  top: 30px;
  left: -10px;
  position: absolute;
  z-index: 0;
}

.gamebtn {
  z-index: 2;
  width: 50px;
  height: 50px;
  margin-bottom: 5px;
}

.gamebtn:hover {
  filter: brightness(130%) drop-shadow(0 2px 5px black);
}

#grass {
  position: fixed;
  bottom: -40px;
  z-index: 7;
  transition: all 2s;
  transition-timing-function: linear;
}

     

    JS (Latest Update) 

    window.addEventListener("load", function () {
  console.clear();

  tl = gsap
    .timeline({
      paused: true
    })
    .to(".gamebtn", {
      scale: 1.5,
      rotate: -25,
      duration: 0.25
    });

  var cur = 0;

  Draggable.create(".can", {
    onDragStart() {
      tl.timeScale(1).play();
      gsap.to("#droplets", {
        repeat: -1,
        duration: 0.1,
        autoAlpha: 1,
        ease: "none",
        attr: {
          y: () => "+=" + 21
        }
      });
    },
    onDragEnd(event) {
      var bottom = gsap.getProperty("#grass", "bottom");
      if (bottom != "0") {
        gsap.to("#grass", {
          duration: 0.3,
          bottom: "+=10"
        });
      } else {
        gsap.set("#grass", {
          bottom: 0
        });
      }
      tl.timeScale(2).reverse();
      gsap.killTweensOf("#droplets");
      gsap.set("#droplets", {
        autoAlpha: 0
      });
    }
  });
});

     

    See the Pen zYoEqzr by Shaman1975 (@Shaman1975) on CodePen

    Change cursor when grabbing an item

    in GSAP

    Posted · Edited by Shaman
    Comment/Reply of @ZachSaucier

    Hello :-)

     

    1. I'm trying to get a grapping icon while the user grabs and holds the Watering Can.
    2. It would also be nice if the Watering Can would rotate down when hovering over the grass.

     

    • Would it be difficult to only use javascript? (I tried already a lot of things, also by attaching an image to the mouse and let it follow it. The cursor always get's standard...)
    • Would it be easier to use GSAP? (Setting it up, implenting it in my work? )

     

    Thank you for any advice,

    Kind regards,

    Claude

     

    CODEPEN

    See the Pen gOLRZRx by Shaman1975 (@Shaman1975) on CodePen

     

     

    HTML 

    <div>
  <img draggable="true" id="gb03" class="gamebtn" alt="Watering Can" src="https://ga.chi.lu/wp-content/uploads/2021/02/watering-can.png" width="80" height="80">  
</div>
<img id="grass" class="grasspng" alt="Grass" src="https://ga.chi.lu/wp-content/uploads/2021/02/grass.png">
</img>

     

    CSS 

    * {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
}

html,
body {
  padding: 0;
  margin: 0;
  height: 100%;
  -ms-overflow-style: none;
  scrollbar-width: none;
}

body::-webkit-scrollbar,
html::-webkit-scrollbar {
  display: none;
}

.gamebtn {
  z-index: 2;
  width: 50px;
  height: 50px;
  margin-bottom: 5px;
}

.gamebtn:hover {
  cursor: pointer;
  filter: brightness(130%) drop-shadow(0 2px 5px black);
}

#grass {
  position: fixed;
  bottom: -50px;
  width: 100%;
  z-index: 1;
  transition: all 2s;
  transition-timing-function: linear;
}

     

    JS 

    window.addEventListener("load", function () {
  document.getElementById("gb03").addEventListener("dragstart", WaterDown);
  document.getElementById("gb03").addEventListener("dragend", WaterUp);
  document.addEventListener("dragover", WaterOver);
  document.addEventListener("drop", WaterDrop);
  document.getElementById("grass").style.bottom = "-50px";
});

function WaterDown() {
  console.log("Started to drag");
}

function WaterUp() {
  console.log("Stopped to drag");
}

function WaterOver(event) {
  event.preventDefault();
}

function WaterDrop(event) {
  event.preventDefault();
  if (event.target.id == "grass") {
    console.log("Dropped " + event.target.id);
    var grass = document.getElementById("grass");
    var bottom = grass.style.bottom;
    var grow = "10px";

    console.log(bottom);

    if (bottom == "0px") {
      grass.style.bottom = "0px";
      document.getElementById("gb03").style.display = "none";
    } else {
      grass.style.bottom = parseInt(bottom, 10) + parseInt(grow, 10) + "px";
    }
  } else {
    console.log("Nope");
  }
}

     

    Work in progress is for this site: https://ga.chi.lu

     

×
×
  • Create New...