Jump to content
Search Community

Grapping icon WHILE the user grabs and holds an image

Shaman test
Moderator Tag

Go to solution Solved by tailbreezy,

Recommended Posts

 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

Edited by Shaman
Update
Link to comment
Share on other sites

53 minutes ago, Shaman said:

It would also be nice if the Watering Can would rotate down when hovering over the grass.

You could combine some calculations with tailbreezy's approach to do that sort of thing.

 

54 minutes ago, Shaman said:

Would it be easier to use GSAP? (Setting it up, implenting it in my work? )

I would say that it makes it much easier :) 

Link to comment
Share on other sites

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:

 

 

 

Edited by Shaman
Forgot the code :-(
Link to comment
Share on other sites

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

Link to comment
Share on other sites

On 2/19/2021 at 11:27 PM, tailbreezy said:

Maybe something as simple as that.

Actually the cursor changes on the svg! If you put your mouse below the can, where the water will be, you'll see it :-)

Can we somehow separate both (the can and the svg) and attach the svg animation to the can on grab?

Link to comment
Share on other sites

2 hours ago, ZachSaucier said:

That's a perfect use case for the trigger property of Draggable:


trigger: ".can .gamebtn"

I guess all the trouble is actually a browser problem because it works perfecly in Firefox. Chrome & Edge don't work.

 

Link to comment
Share on other sites

1 hour ago, tailbreezy said:
 

Another way is to simply remove the explicit cursor css state, which causes the pointer at the first place.

 

.gamebtn:hover {
/*   cursor: pointer; */
}

You are right, removed that one too. It's a browser problem btw. It works nicely in Firefox but only there.

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.
×
×
  • Create New...