Shaman

@ZachSaucier You are the Master! Thank you so much. Have a great day.

Hi again, It's done with a minimal bug : https://codepen.io/Shaman1975/pen/PobaZXx 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.

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: 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? https://codepen.io/Shaman1975/pen/mdOLXbv Thank you again for your time and your help.

Hi Mikel, Try this : <text class="touch" x="20" y="75">from TOP</text> <text class="touch" x="20" y="75">from RIGHT</text> <text class="touch" x="20" y="75">from BOTTOM</text> <text class="touch" x="20" y="75">from LEFT</text> https://codepen.io/Shaman1975/pen/oNYdMjv

Hi again Zach, I forked the pen and got this far but I think I still don't get it ? EDIT: Actually my question is now how to use the result to move the image in the same direction? Could you please have a look (again)? https://codepen.io/Shaman1975/pen/OJbvYPJ Thank you

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 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

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.

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.

You are absolutely right This drove me nuts during days because I always tested on THAT screen... and on mobile. Thank you all for your time, have a nice day, Claude

Ok, was testing this a little further. If I put that monitor to primary screen it works. As soon as it isn't the primary screen anymore, this happens. Any thoughts?

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

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: https://codepen.io/GreenSock/pen/zDwEk 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.

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

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?

I did it ? https://codepen.io/Shaman1975/pen/gOLRZRx 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

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

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??

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"); } }

Hello I'm trying to get a grabbing icon while the user grabs and holds the Watering Can (Please see update). 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: https://codepen.io/Shaman1975/pen/zYoEqzr 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 }); } }); });

Hello I'm trying to get a grapping icon while the user grabs and holds the Watering Can. 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 https://codepen.io/Shaman1975/pen/gOLRZRx 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