Grapping icon WHILE the user grabs and holds an image

[Shaman]

 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 February 22, 2021 by Shaman
Update

[tailbreezy]

Maybe something as simple as that.

 

See the Pen 0c4313a6ba4654d309899fa967c91102 by dadacoded (@dadacoded) on CodePen.

[ZachSaucier]

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  

[Shaman]

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 February 19, 2021 by Shaman
Forgot the code :-(

[Shaman]

19 hours ago, ZachSaucier said:

Quote

I would say that it makes it much easier  

 

Hm, tried to implement the code we have so far but there's a gsap target error. -> https://ga.chi.lu

 

Also, the water drops are in front of the footer even if the footer has a higher z-index??

[ZachSaucier]

Sorry, we can't really debug a live site for you. I highly recommend the getting started article and GSAP installation page.

[Shaman]

24 minutes ago, ZachSaucier said:

Sorry, we can't really debug a live site for you. I highly recommend the getting started article and GSAP installation page.

 

Thank you for the advice:

 

- the installation is ok.

- the animation to make the grass grow doesn't work. (That worked before) Any leads for this?

 

Kind regards,

Claude

[ZachSaucier]

Sorry, without a minimal demo we'd only be guessing at what it could be and there are a plethora of possible issues.

[Shaman]

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

[Shaman]

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?

[ZachSaucier]

13 hours ago, Shaman said:

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

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

trigger: ".can .gamebtn"

See the Pen eYBGjpd?editors=1010 by GreenSock (@GreenSock) on CodePen.

[tailbreezy]

Quote

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

 

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

 

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

[Shaman]

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.

 

[Shaman]

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.