Jump to content
GreenSock

Shaman

Grapping icon WHILE the user grabs and holds an image

By Shaman, in GSAP. Views: 1,452

Go to solution Solved by tailbreezy,

Recommended Posts

Posted (edited)

 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
Posted
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
  • Author
Posted (edited)
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
  • Author
Posted
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??

Link to comment
Share on other sites
  • Author
Posted
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

Link to comment
Share on other sites
  • Author
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

Link to comment
Share on other sites
  • Author
Posted
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
Posted
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

Link to comment
Share on other sites
Posted
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; */
}

Link to comment
Share on other sites
  • Author
Posted
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
  • Author
Posted
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
 Share
Go to topic listing

  • Recently Browsing   0 members

    • No registered users viewing this page.
×
Login Create Account